如何判斷圖像是否在JQuery中加載或緩存？

似乎.load（）函數在圖像先前被緩存時不會觸發。所以，如果你想確保一個圖像已經加載和顯示其它（即放大鏡）之前加載，你不能這樣做：如何判斷圖像是否在JQuery中加載或緩存？

$(img_to_load_first) 
    .load(
     $(img_to_load_last) 
      .src("2nd.png"); 
    ) 
    .src("1st.png");

那麼，如何確保JQuery的加載順序？

來源

2009-12-22 CpILL

當這個碼被運行？它在$（document）.ready中嗎？ – 2009-12-22 19:50:08

你需要做的是有選擇地處理你的加載綁定。您可以通過測試圖像對象屬性complete來驗證加載。

例如：

$('.load_selector').each(function(){ 

    if (!this.complete) { 
     $(this).load(function(){ 
      // handle image load event binding here 
     }); 
    } else { 
     // handle image already loaded case 
    } 

});

注意，以上，this（單獨使用）指的是DOM引用的jQuery提供的圖像對象。

來源

2009-12-22 19:52:31 sparkey0

這對您有幫助嗎？請注意，如果需要，您可以像上面那樣在'else'子句中觸發您的裝載處理程序。 – sparkey0 2009-12-22 22:02:39

關於兼容性的任何想法？ – 2017-01-31 15:45:39

廣泛的支持，請參閱瀏覽器矩陣在這裏：http://www.w3schools.com/jsref/prop_img_complete.asp - 要記住的一件事是，你可能想檢查一個有效的src屬性之前檢查完整的屬性。許多瀏覽器將返回空的src（例如：空源是完整的，因爲它沒有加載/將不會加載） – sparkey0 2017-02-06 17:39:16

謝謝Sparkey，

我會給這個嘗試，但它看起來不錯。我發現在話題在這裏一個廣泛的討論：這使我的「jQuery的‘onImagesLoad’插件」這裏http://www.bennadel.com/blog/1007-jQuery-Attr-Function-Doesn-t-Work-With-IMAGE-complete.htm

：http://includes.cirkuit.net/includes/js/jquery/plugins/onImagesLoad/1.1/documentation/

這似乎解決了這個問題，像這樣：

$imgs.each(function(i, val){ 
    $(this).bind('load', function(){ 
     // ... 
    }).each(function(){ 
     if (this.complete || this.complete === undefined){ this.src = this.src; } //needed for potential cached images 
    }); 
});

這幾乎可以歸結爲你所說的，只有他完成的檢查也測試「未定義」。

來源

2009-12-23 18:21:36 CpILL

如果你想換行所有這些功能在一個jQuery的擴展方法，嘗試的（這應該工作等待任意數量的圖像）：

$.fn.imagesLoaded = function() { 
    var def = $.Deferred(); 
    var count = this.length; 
    this.each(function() { 
     if (this.complete) { 
      if (!--count) { 
       def.resolve(); 
      } 
     } else { 
      $(this).load(function() { 
       if (!--count) { 
        def.resolve(); 
       } 
      }); 
     } 
    }); 
    return def.promise(); 
}

，然後簡單地使用這樣的：

$(img_to_load_first).imagesLoaded().done(function() { 
    $(img_to_load_last).src("2nd.png"); 
});

來源

2015-03-03 17:28:27

你也可以檢查你的圖像是否有寬度或高度來檢測它是否已經加載。

例如：

var img = _content.find('img'); 
    if(img[0].width >0 || img[0].height > 0) { 
    console.log('already loaded image'); 
    } else { 
    img.on('load', function() { 
    console.log('image loaded'); 
    }); 
}

來源

2016-07-07 09:35:20 chriscrossweb

如何判斷圖像是否在JQuery中加載或緩存？

回答

相關問題