Jquery .Load Image，如何检查图像是否已在浏览器中加载？答案

【问题标题】：Jquery .Load Image, How to check if the image is already loaded in the browser?Jquery .Load Image，如何检查图像是否已在浏览器中加载？
【发布时间】：2011-11-03 23:21:20
【问题描述】：

我编写了一个简单的脚本来将图像加载到主查看器中。它非常简单，单击缩略图 - 获取画廊 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;
});

【问题讨论】：

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

标签： jquery caching loading image-gallery

【解决方案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;
});

【讨论】：