在網頁中加載圖片是必不可少的,但是有時候因為圖片較大或者網絡卡頓等原因,可能會出現圖片顯示緩慢或者加載不全的情況。為了解決這個問題,我們可以使用jQuery設置同步加載圖片。
$('img').each(function(){ var imgUrl = $(this).attr('src'); var img = new Image(); img.src = imgUrl; if(img.complete){ $(this).attr('src', imgUrl + '?random=' + Math.random()); }else{ img.onload = function(){ $(this).attr('src', imgUrl + '?random=' + Math.random()); } } });
上述代碼中,我們使用了jQuery的each()方法遍歷了所有的圖片。在遍歷過程中,根據每個圖片的地址創建一個Image對象,并將圖片的地址賦值給該對象的src屬性。如果該圖片已經加載完成,則直接將圖片的地址加上一個隨機數作為查詢參數,這是為了防止瀏覽器緩存影響圖片的顯示。如果該圖片還在加載中,則設置其onload事件,待圖片加載完成后再將其地址加上隨機數作為查詢參數。
通過這種方式,我們可以使得圖片同步加載,避免出現圖片加載緩慢的問題。
上一篇div 置底