javascript - 如何防止浏览器绘制的 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)
}

---

因为我在这个例子中使用了不透明度属性，所以您甚至可以为显示的图像设置动画。

CSS:

#image {
    transition: opacity .5s;
}