当我向 DOM 添加新图像时，有时我可以看到图像从上到下绘制。是否有一种简单的 javascript 技术或事件处理程序可以用来使完整图像仅在浏览器完成绘制/渲染后显示？
您可以使用 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;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句