如何防止浏览者对img的绘画可见？

Question

当我向DOM中添加新图像时，有时我可以看到图像是从上到下绘制的。 是否有一种简单的JavaScript技术或事件处理程序，我可以使用它来使完整图像仅在浏览器完成绘画/渲染后才显示？

Answer 1

您可以使用JavaScript隐藏图像，直到完全加载为止。

HTML：

<img id="image" src="...">

JavaScript的：

var image = document.querySelector('#image');

image.style.opacity = '0'; //set opacity to 0 (fully transparent)

image.onload = function(){ //when image is loaded, execute function
    image.style.opacity = '1'; //set opacity to 1 (fully visible)
}

---

因为在此示例中使用了opacity属性，所以您甚至可以为显示的图像设置动画。

CSS：

#image {
    transition: opacity .5s;
}