有没有一种方法可以创建加载屏幕，但要在消失之前设置时间？

Question

I am trying to create an HTML loading screen, concealing a large number of images until they are at least partially loaded. 我正在尝试创建一个HTML加载屏幕，隐藏大量图像，直到至少部分加载它们为止。

The following lines of code currently work but because of the size of the images, I need a way to cap the amount of time the browser spends trying to preload. 以下代码行当前有效，但是由于图像的大小，我需要一种方法来限制浏览器尝试预加载所花费的时间。

$(window).load(function(){
    $("#loadingScreen").fadeOut("slow");
    $('#content').fadeIn("slow");
});

In trying to do so, I added the following: 为此，我添加了以下内容：

$("#loadingScreen").delay(3000).fadeOut("slow");
$('#content').delay(3000).fadeIn("slow");

My rationale is that the browser will first try to load all the images and after 3 seconds, even if the images are not fully loaded, the loading screen will disappear. 我的理由是浏览器将首先尝试加载所有图像，并且在3秒钟后，即使图像没有完全加载，加载屏幕也会消失。 This way, when one first visit to the site, he or she will spend a maximum of 3 seconds on the loading screen and in subsequent visits, he or she will spend even less time because the images will have been cached onto their computer. 这样，当一个人第一次访问该站点时，他或她将在加载屏幕上花费最多3秒，而在随后的访问中，他或她将花费更少的时间，因为图像将被缓存到其计算机上。

Individually, both sets of code work but when I try to use them together, only the second set of code runs. 单独地，两组代码都可以工作，但是当我尝试一起使用它们时，仅运行第二组代码。 What am I doing wrong? 我究竟做错了什么？ Thanks! 谢谢！

Markup: 标记：

<body>
    <div id="loadingScreen">
        <img src="img/loadingIcon.gif">
    </div>

    <div id="content" style="display: none">
        <img src="img/image1.jpg">
        <img src="img/image2.jpg">
        <img src="img/image3.jpg">
    </div>
</body>

Answer 1

Have you tried: 你有没有尝试过：

$("#loadingScreen").delay(3000).fadeOut("slow", function(){
    $('#content').fadeIn("slow");
});

有没有一种方法可以创建加载屏幕，但要在消失之前设置时间？

问题描述

1 个解决方案

解决方案1
0 2013-01-11 00:29:54

有没有一种方法可以创建加载屏幕，但要在消失之前设置时间？

问题描述

1 个解决方案

解决方案1 0 2013-01-11 00:29:54

解决方案1
0 2013-01-11 00:29:54