0

我正在尝试创建一个 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>
4

1 回答 1

0

你有没有尝试过：

$("#loadingScreen").delay(3000).fadeOut("slow", function(){
    $('#content').fadeIn("slow");
});
于 2013-01-11T00:29:54.883 回答