gpt4 book ai didi

javascript - 预加载页面

转载 作者:行者123 更新时间:2023-12-02 20:29:52 26 4
gpt4 key购买 nike

我想创建整个页面的预加载器。

<body>
<div id="preload-content">Please wait</div>
<div id="body-container" style="background-image:url(very-big-image-file.jpg);">
// page contents goes here
</div>
</body>

现在我的#body-container中有一个巨大的图像。我使用 jQuery,当我使用 .ready() 函数时,页面会出现,但图像仍在加载。

$("body").ready(function() {
$("#preload-content").delay(500).fadeOut(400, function() {
$("#body-container").fadeIn(200);
$("body").css("background-color","#fff").css("color","#000");
});
});

$(document).ready() 也不起作用。我想在所有图像、插件、脚本、CSS 文件成功加载后显示#body-container!那么...我该怎么做呢。

最佳答案

你可以试试。

        $("body").ready(function() {

// Create a image object
var bgImage = new Image();

// bind loading event
$(bgImage).bind("onload",function(){

// Set the background css
$("#body-container").css('background-image','url(very-big-image-file.jpg)');

// Fade your preloader content
$("#preload-content").delay(500).fadeOut(400, function() {
$("#body-container").fadeIn(200);
$("body").css("background-color","#fff").css("color","#000");
});
});

//Start loading your image
bgImage.src = "very-big-image-file.jpg";

});

对一些拼写错误表示歉意。但概念就是这样的。

关于javascript - 预加载页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4343856/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com