有没有办法创建一个加载屏幕，但在它消失之前限制时间？答案

【问题标题】：Is there a way to create a loading screen but cap the time before it fades away?有没有办法创建一个加载屏幕，但在它消失之前限制时间？
【发布时间】：2013-01-11 08:29:54
【问题描述】：

我正在尝试创建一个 HTML 加载屏幕，隐藏大量图像，直到它们至少部分加载。

以下代码行当前有效，但由于图像的大小，我需要一种方法来限制浏览器尝试预加载所花费的时间。

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

为此，我添加了以下内容：

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

我的理由是浏览器会首先尝试加载所有图像，3 秒后，即使图像没有完全加载，加载屏幕也会消失。这样，当第一次访问该站点时，他或她将在加载屏幕上花费最多 3 秒，而在随后的访问中，他或她将花费更少的时间，因为图像将被缓存到他们的计算机上。

单独来说，两组代码都可以工作，但是当我尝试将它们一起使用时，只有第二组代码运行。我究竟做错了什么？谢谢！

标记：

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

【问题讨论】：

你能张贴标记吗？这将有助于我们提供解决方案。

标签： javascript jquery loading

【解决方案1】：

你试过了吗：

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

【讨论】：

不幸的是，我认为这不起作用，但我能够通过简单地编写 if else 语句并让两组代码分别运行来解决它。不过谢谢！