js判斷圖片是否完全載入的方法(jquery的error事件妙用)
阿新 • • 發佈：2018-12-02
頁面上，如何判斷圖片是否完全載入？
有時候，當用js動態獲取伺服器圖片的時候，可能圖片在伺服器是不可用狀態，這是需要重新獲取。但是在頁面，用什麼方法判斷圖片是否完全載入了呢？期間LZ嘗試了多種方法，最後得到了一種比較合理的方案。
因為，在jQuery中有一個error事件,可以通過繫結圖片的error事件來監聽圖片是否完全載入。
| 1 2 3 4 5 6 7 8 |
$(document).ready(function() {
$('#pbcimg').error(function(){
var src=$(this).attr("src");
$(this).attr("src", src + "?noCache=" + new Date().valueOf());
});
);
|
這樣,在給<img/>動態指定src的時候，若出錯，則會迴圈觸發此事件，直到圖片正確載入。
探尋之路：
之前是通過判斷 img.readystate=="complete"||img.readystate=="loaded" 和 img.complete==true 的狀態，再使用setTimeOut()來定時改變<img/>的src，但是這些屬性有瀏覽器差異，有的瀏覽器無法獲取到這些屬性，從而導致不能及時clearTimeOut()來清除定時器。所以，這樣瀏覽器將一直執行此定時。時間過長的話，將導致記憶體消耗太大。