イメージがダウンロードされるまでの遅延ページレンダリング

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

体{表示：まず、ディスプレイ設定なしに、 }