是否可以延迟页面呈现,直到图像下载完毕,以防止在绘制页面时加载图像?
干杯!
最佳答案
您可以在图像上使用 onload
来检测它何时加载。
var img = new Image();
img.src = "http://www.mind-coder.com/example.jpg";
img.onload = function() { alert("Height: " + this.height); }
下面的完整示例,它是做什么的:
一个名为 cover 的
div
,在所有图片下载完成之前覆盖您的页面(可能会显示一条消息,例如请加载)。JS 脚本(这里不需要普通的 jQuery)搜索页面中的所有图像并使用存储在
data-src
中的src
路径加载它们每张图片。onload
在加载图像时执行,loadCount
变量跟踪加载了多少图像并检查页面中的总数。当加载的图像数量与页面中的图像数量相同时,隐藏封面并显示您的页面。
(function() {
var loadCount = 0;
var imgs = document.querySelectorAll('img');
imgs.forEach(function(img) {
img.src = img.dataset.src;
img.onload = function() {
loadCount++;
if (loadCount === imgs.length) {
document.getElementById('cover').style.display = 'none';
}
};
});
})()
#cover {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: red;
}
<div id="cover">cover - loading</div>
<img data-src="https://upload.wikimedia.org/wikipedia/commons/d/d9/Big_Bear_Valley,_California.jpg">
<img data-src="https://upload.wikimedia.org/wikipedia/commons/9/92/Big_Sur_Coast_California.JPG">
关于javascript - 延迟页面呈现,直到下载图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39844242/