0
A
回答
1
您可以使用图像上的onload
来检测它何时加载。
var img = new Image();
img.src = "http://www.mind-coder.com/example.jpg";
img.onload = function() { alert("Height: " + this.height); }
完整的示例,它有什么作用:
一个
div
叫盖,盖你的页面下载所有图像之前(可能显示像请加载消息)。JS脚本(在这里需要香草没有jQuery)搜索页面中的所有图像,并使用
src
存储在data-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">
0
你可以这样做以下。首先设置显示:没有你的身体在HTML,所以它不会在以下条件下显示任何内容,然后
$(window).on("load", function() {
//show the body like below
$("body").fadeIn(500);
});
体{显示:无; }
+1
这很好,很简单,如果OP已将“jQuery”标签放在他们的问题上,我会投它... – nnnnnn
相关问题
- 1. ItemsSource渲染延迟
- 2. 预渲染HTML页面到图像
- 3. 延迟网页的初始渲染
- 4. FBML元素渲染延迟
- 5. 引导CDN渲染延迟
- 6. SDL2不会延迟渲染
- 7. 反应延迟渲染
- 8. 推迟或延迟在单个页面上加载大图像
- 9. 延迟视图渲染不起作用
- 10. 延迟加载页面,直到收到AJAX呼叫
- 11. 页面不渲染,直到BackgroundWorker.RunWorkerAsync完成
- 12. 直到Javascript变量可用时延迟渲染身体
- 13. 阻止css资源。这会导致渲染页面延迟
- 14. 延迟加载Silverlight页面
- 15. jquery页面加载延迟
- 16. PJAX延迟页面加载
- 17. 延迟加载jsp页面?
- 18. 延迟加载动态画面图像
- 19. 延迟显示页面,直到一切都加载
- 20. 延迟哇动画,直到页面加载
- 21. 延迟导航到下一个页面
- 22. 推迟阵营渲染,直到请求
- 23. Rails 3:页面渲染预览图像
- 24. 在渲染页面中渲染页面
- 25. 砌体运行迟了页面渲染
- 26. 延迟加载UICollectionView图像
- 27. Javascript延迟图像加载
- 28. ajax加载图像延迟?
- 29. 延迟加载PhotoLibrary图像
- 30. HttpWebRequest图像加载延迟
如果其中一个图像根本不加载(错误的URL或其他东西)会怎么样? – nnnnnn
@nnnnnn感谢评论好点(+1),这个脚本只显示OP的基本概念,并未指定该场景。顺便说一下,可以使用'img.onerror'检测图像加载是否存在问题,并决定如何处理,例如:显示错误消息,或者即使一页或更多页面没有加载也显示页面成功了(但我因为悲伤取决于OP的使用案例)。 – GibboK