如何防止浏览者对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;
}