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

我编写了一个简单的脚本，将图像加载到主查看器中。 它非常简单，点击缩略图-抓取画廊id和图像id。。 将这些内容传递到。加载时，将加载新内容

现在，如果你点击一个拇指，图像被加载，如果你再次点击同一个拇指，它会再次调用图像，我不希望这样。我希望能够检查图像是否已加载到浏览器缓存中，如果已加载，则不执行.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;
});

---

你可以做几件事。 首先，如果您不希望图像在尝试加载后再次被单击，您可以简单地从图像中删除“甚至单击”

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

但是，如果要使用相同的单击方法执行其他操作，则可能需要添加一个标志以检查是否已加载该标志。如果您遇到问题，可以在两个位置执行此操作

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;
});

---

我想，但我不确定，如果图像已经在缓存中，浏览器是否会自动使用缓存中的图像。您可以通过在单击图像时监视网络流量来尝试此操作。