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

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>