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

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

但是，如果你想要做别的用同样的方法点击，那么你可能要添加一个标志来检查它是否已经加载。如果你遇到问题，你可以在两个地方做到这一点。

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