Question

我有一个大图像标题。刷新页面时，标题会闪烁白色然后变为黑色，最后会显示图像。

我真的想解决这个问题，但没有取得任何成功。

Answer 1

首先，让图像的容器元素的背景为黑色是个好主意（这样，在图像没有被显示的时候，至少你不会看到白色），然后您可以应用默认情况下隐藏图像的默认CSS规则。然后，使用load事件，您可以删除该CSS：

＆＃13;

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

＆＃13;

/* 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; }

＆＃13;

<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>

＆＃13;

Answer 2

尝试在＆＃39; .slick-initialized .hero__image＆＃39;上删除fadeIn动画。的CSS。

CFontDialog

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

2 个答案: