logo标签列表

直到整个页面加载完成再显示页面加载进度条？

jquery
5

可能是重复问题：
运行脚本时的加载条

您好，我有一个包含很多图片的页面，想知道是否有一种方法可以延迟显示这些图片，直到整个页面加载完毕，例如使用jQuery制作一个加载条？非常感谢您的帮助。

4个回答
10

使用jQuery很容易实现这个功能。使用window.load事件来确定所有图像都已加载完毕，然后显示内容:

HTML

<html>
<body>
   <div id="loading"></div>

   <div id="container">
       <img src="http://www.playirishlottery.co.uk/wp-content/uploads/image-2.jpg"/>
   </div>

</body>
</html>

jQuery

$(window).load(function() {
    //show();
});


function show() {
    $('#loading').hide();
    $('#container').fadeIn();
};

setTimeout(show, 3000);
在上面的示例中，我使用了setTimeout来进行演示。实际上，您需要删除它并取消注释在.load函数中的show()。 Fiddle: http://jsfiddle.net/xM6v9/
3
如果您只想在页面完全加载之前显示某些内容，那么不需要使用jQuery：http://jsfiddle.net/ErickPetru/g7D8e/。
解释：您的页面内容将位于一个具有“display: none”的
中，并显示加载消息/gif的另一个
。
您需要将所需的JS放置在附近的
1

我刚遇到了一个类似的问题/问题。 我的页面由于主页图片轮播中的图像而加载非常缓慢。 对我来说解决方案是异步图像加载。

在页面中放置图像标签，但不要填充src。 而是将您的src放在类标签或其他位置。 使用jquery获取所有src并预加载这些图像并编辑图像，在它们加载时添加源。 这将防止页面被图像下载阻塞并加快页面加载速度。

看一下http://staticvoid.info/imageLoader/

您还可以尝试延迟加载图像（仅在视口内加载图像，当滚动到时才会加载视口之外的图像）

0

只需使用window.onload

它会在页面上的所有内容加载完成后触发一次。无需使用JQuery。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接