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