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（）

小提琴： http://jsfiddle.net/xM6v9/

Answer 2

如果您只想在页面完全加载之前显示内容，则不需要jQuery：http://jsfiddle.net/ErickPetru/g7D8e/。

说明：您的网页内容位于div display: none内，另一个div显示加载消息/ gif。

您需要将</body>内的所需JS放在<script>内。这种方式只会在它之前加载JS。

Answer 3

我刚刚遇到了类似的问题/问题。由于主页图像轮播中的图像，我的页面加载速度很慢。我的解决方案是异步图像加载。

您将图片标记放在页面中不要填写src。但是把你的src放在一个类标签或其他东西里。使用jquery获取所有src并预加载这些图像并编辑图像，在加载时添加源。这样可以防止页面被图像下载阻止，并加快页面加载速度。

查看http://staticvoid.info/imageLoader/

您也可以尝试延迟加载图片。（仅在视口内加载图像，滚动到外部时将加载图像）

Answer 4

只需使用window.onload

即可

一旦加载了页面上的所有内容，它就会被触发。不需要JQuery。

页面加载栏，直到整个页面加载？

4 个答案:

HTML

的jQuery