延遲頁面渲染，直到下載圖像

Question

是否有可能延遲頁面渲染，直到下載圖像以防止圖像在頁面被繪製時加載？

乾杯！

Answer 1

您可以使用圖像上的onload來檢測它何時加載。

var img = new Image(); 
 
img.src = "http://www.mind-coder.com/example.jpg"; 
 
img.onload = function() { alert("Height: " + this.height); }

下面

完整的示例，它有什麼作用：

• 一個div叫蓋，蓋你的頁面下載所有圖像之前（可能顯示像請加載消息）。

• JS腳本（在這裏需要香草沒有jQuery）搜索頁面中的所有圖像，並使用src存儲在data-src中的路徑爲每個圖像加載它們。

• onload在圖像加載時執行，並且loadCount變量跟蹤加載了多少圖像，檢查頁面中的總數。

• 當加載的圖片數量與頁面中圖片的數量相同時，隱藏封面並顯示您的頁面。

(function() { 
 
    var loadCount = 0; 
 
    var imgs = document.querySelectorAll('img'); 
 
    imgs.forEach(function(img) { 
 
img.src = img.dataset.src; 
 
img.onload = function() { 
 
    loadCount++; 
 
    if (loadCount === imgs.length) { 
 
    document.getElementById('cover').style.display = 'none'; 
 
    } 
 
}; 
 
    }); 
 
})()

#cover { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: red; 
 
}

<div id="cover">cover - loading</div> 
 
<img data-src="https://upload.wikimedia.org/wikipedia/commons/d/d9/Big_Bear_Valley,_California.jpg"> 
 
<img data-src="https://upload.wikimedia.org/wikipedia/commons/9/92/Big_Sur_Coast_California.JPG">

Answer 2

你可以這樣做以下。首先設置顯示：沒有你的身體在HTML，所以它不會在以下條件下顯示任何內容，然後

$(window).on("load", function() { 
    //show the body like below 
    $("body").fadeIn(500); 
}); 

體{顯示：無; }