Jquery. Загрузить изображение, как проверить, загружено ли уже изображение в браузере? - PullRequest
Новая
       27

Jquery. Загрузить изображение, как проверить, загружено ли уже изображение в браузере?

0 голосов
/ 03 ноября 2011

Я написал простой скрипт для загрузки изображения в основной просмотрщик.Это очень просто, нажмите на миниатюру - возьмите идентификатор галереи и идентификатор изображения .. передайте их в .load, новый контент загружается.

В тот момент, когда вы нажимаете большой палец, изображение загружается, иесли вы снова нажмете тот же большой палец, он снова вызовет изображение, я не хочу этого.Я хочу иметь возможность проверить, загружено ли уже изображение в кэш браузера, и если это так, не выполнять .load

Спасибо за прочтение, любая помощь будет признательна. 

$('#thumb_list li a').click(function(){

var gallery_id = $(this).attr('gallery');
var image_id = $(this).attr('rel');

$("#image_container")
         .load("inc_photos.cfm?gallery_id=" + gallery_id + "&image_id=" + image_id,
         function(){

         });
return false;
});

1 Ответ

2 голосов
/ 03 ноября 2011

Есть пара вещей, которые вы можете сделать. Во-первых, вы можете просто удалить клик даже с изображения, если не хотите, чтобы он снова мог щелкнуть после попытки загрузки. 

$('#thumb_list li a').click(function(){

var gallery_id = $(this).attr('gallery');
var image_id = $(this).attr('rel');

$("#image_container")
         .load("inc_photos.cfm?gallery_id=" + gallery_id + "&image_id=" + image_id,
         function(){
             $('#thumb_list li a').unbind('click');
         });
return false;
});

Однако, если вы хотите сделать что-то еще с тем же методом щелчка, вы можете добавить флаг, чтобы проверить, был ли он уже загружен. Вы можете сделать это в 2 местах, если у вас есть проблемы с этим. 

var isImageLoaded = false;

$('#thumb_list li a').click(function(){

var gallery_id = $(this).attr('gallery');
var image_id = $(this).attr('rel');
if( !isImageLoaded )
{
    $("#image_container")
         .load("inc_photos.cfm?gallery_id=" + gallery_id + "&image_id=" + image_id,
         function(){
             isImageLoaded = true;
         });
}
return false;
});

Вы также можете сделать это по клику, если хотите избежать дублирования сетевого трафика: 

var isImageLoaded = false;

$('#thumb_list li a').click(function(){

var gallery_id = $(this).attr('gallery');
var image_id = $(this).attr('rel');

if( !isImageLoaded )
{
    $("#image_container")
         .load("inc_photos.cfm?gallery_id=" + gallery_id + "&image_id=" + image_id,
         function(){

         });
}
isImageLoaded = true;
return false;
});
...