如何降低圖像加載的顯着性？

我有一個大的圖像標題。當頁面刷新時，頁眉閃爍白色，然後變黑，然後顯示圖像。如何降低圖像加載的顯着性？

我真的想刪除這個問題，但一直沒有成功。

2017-03-06 S. Miller

你可以加載低分辨率圖像，然後，一旦它被裝載 – Anirudha

@AmericanSlime而嘗試下面提出的解決方案具有更高分辨率的圖像替換它，它去掉了圖像頭。 –

鏈接到該網站： https://shop-gohrvst.myshopify.com/ –

首先，將圖像的容器元素的背景設置爲黑色（以便在圖像未顯示時至少不會看到白色）是一個好主意，然後您可以應用默認情況下隱藏圖像的默認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>

來源

2017-03-06 19:05:11

此外，爲了說明這一點，請嘗試查看是否可以更多地壓縮圖像或以其他方式減少文件的使用，以便加快速度。 – dman2306

@ dman2306這當然是一個好主意，但仍然無法解決問題，多次刷新很快就會發生。 –

我試圖測試一下，但是它將圖像頭部完全留空。 –

儘量擺脫對 '.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)}

來源

2017-03-06 19:15:48

如何降低圖像加載的顯着性？

回答

相關問題