HTML 背景图加载事件 OnLoad

Question

4

我有一个简单的HTML页面，里面包含一些JavaScript。JavaScript在body的onLoad中启动。body还有一个背景图像。在背景图像加载之前，JavaScript就已经启动了。是否有一种方法让body的onLoad等待body背景图片加载完成再启动？

<body background="http://xxx.com/xxx.jpeg" id="myBody" onload="pageLoaded()">

- jcmitch

1

使用window.onload代替body.onload，如下所述： https://dev59.com/BHNA5IYBdhLWcg3wQ7cw - Mike Guthrie

4个回答

2

你可以尝试一下。

jQuery(window).load(function() {
     //your code here
});

jQuery(document).ready(function() {
     //your code here
 });

但我不认为它会考虑背景图片的加载。一种更有效的方法是使用这个 jQuery 插件：

您可以像这样调用jQuery函数：

jQuery('body').waitForImages(function() {
    //your code here
});

希望这能对你有所帮助 :)

- Sabari

您需要启用waitForAll选项，以便插件考虑背景图像。 - alex

1

<script>
$(document).ready(pageLoaded)
</script>

- Francois

我认为你想要使用 $(document).load(pageLoaded); http://api.jquery.com/load-event/。这会将一个函数附加到页面上的图片和其他元素加载完成时触发的事件上。 - dangerChihuahua007

1

或者在没有使用jQuery的情况下监听DOM准备就绪

- tkone

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Starx · Accepted Answer

如果您想确保脚本在所有图像加载完成后启动，请使用：

$(window).load(function() {
//.......................
});

这个事件只会在所有脚本、CSS、JS和图片都加载完毕后触发，不像$(document).ready();。