如何降低图像加载的显着性？

我有一个大的图像标题。当页面刷新时，页眉闪烁白色，然后变黑，然后显示图像。如何降低图像加载的显着性？

我真的想删除这个问题，但一直没有成功。

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

如何降低图像加载的显着性？

回答

相关问题