Question

我写了一个简单的脚本来将图像加载到主查看器中。它非常简单，点击缩略图 - 抓取图库ID和图片ID .. 将这些传递给.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;
});

Answer 1

你可以做几件事。首先，如果您不希望在尝试加载后再次点击该图片，则可以简单地从图像中删除该点击。

$('#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;
});

Jquery。载入图像，如何检查图像是否已在浏览器中加载？

1 个答案: