イメージローディングの顕著さを減らす方法は？

Question

大きな画像ヘッダーがあります。ページがリフレッシュされると、ヘッダーが白く点滅してから黒くなり、最後に画像が表示されます。

私は本当にこの問題を取り除きたいと思いますが、成功しませんでした。

Answer 1

最初に、画像のコンテナ要素の背景を黒色にすることをお勧めします（画像が表示されない時間帯に白が表示されないようにしてください）。イメージがデフォルトで非表示になっているデフォルトのCSSルールを適用できます。その後、loadイベントを使用して、あなたはそのCSS削除することができます。

// Get reference to the image element 
 
var img = document.querySelector("#img"); 
 

 
// Set up an event handler for when the image is fully loaded that removes 
 
// the hidden class, thus revealing the image: 
 
img.addEventListener("load", function(){ 
 
    img.classList.remove("hidden"); 
 
});

/* Set the size of the container to the size of the image and 
 
    set its background color to black.      */ 
 
#container { 
 
    height:2000px; 
 
    width:2000px; 
 
    background-color:#000; 
 
} 
 

 
.hidden { visibility:hidden; }

<div id="container"> 
 
    <img src="http://imgsrc.hubblesite.org/hvi/uploads/image_file/image_attachment/29911/STSCI-H-p1706a-m2000x2000.png" id="img" class="hidden"> 
 
</div>

Answer 2

'を.slick初期化.hero__image' CSSのフェードインアニメーションを退治してみます。

.slick-initialized .hero__image{opacity:1;-webkit-animation:fadeIn 1s cubic-bezier(0.44, 0.13, 0.48, 0.87);-moz-animation:fadeIn 1s cubic-bezier(0.44, 0.13, 0.48, 0.87);-o-animation:fadeIn 1s cubic-bezier(0.44, 0.13, 0.48, 0.87);animation:fadeIn 1s cubic-bezier(0.44, 0.13, 0.48, 0.87)}