如何在整个页面加载(包括图像)时启动 JS 代码(真实完整)

发布于 2024-08-28 22:11:09 字数 665 浏览 6 评论 0原文

我想在整个页面加载完成后执行脚本。

目前的做法是:

window.onload=document.getElementById('loaded').value=1;

这不太好,因为有些图像仍在加载中,并且页面尚未真正完成加载。我做错了什么?

当然在 Chrome 和 Firefox 中对我来说不起作用。问题是我之后启动了一个代码,该代码返回状态 204,这会阻止未来的加载。但它表明这个 204 状态是在页面完成加载之前返回的。所以我需要在页面真正加载后执行我的代码。

编辑

设置一个页面,

<iframe id="myframe" height=1 width=1></iframe> 
<script type="text/javascript"> 
window.onload=document.getElementById('myframe').src='http://link to a frame braker page';
</script>

当您将上述代码放入页面时,它会进行框架破坏,它会在页面完全加载之前加载 iframe。只需在 iframe 页面中放置一个警报,然后在父页面包含大图像等的较慢服务器上尝试。

I want to execute a script after the whole page has loaded, when it's complete.

The current way is:

window.onload=document.getElementById('loaded').value=1;

Which is not good, as some images are still in load, and the page has not completed loading truly. What I am doing wrong?

Certainly doesn't work for me in Chrome and Firefox. The thing is I launch a code after, that returns status 204, and this blocks future loads. But it seams this 204 status is returned way before the page has finished loading. So I need to execute my code after the page has truly loaded.

EDIT

setup a page, that does framebreaking

<iframe id="myframe" height=1 width=1></iframe> 
<script type="text/javascript"> 
window.onload=document.getElementById('myframe').src='http://link to a frame braker page';
</script>

when you put the above code to a page, it loads the iframe before the page is fully loaded. Simply put an alert in the iframe page, and try out on a slower server where your parent page contains large images etc..

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

高跟鞋的旋律 2024-09-04 22:11:09

window.onload=document.getElementById('已加载').value=1;

你忘了把它变成一个函数。你的意思是:

document.getElementById('loaded').value= 1;
window.onload= 1;

显然,这作为负载检测器并不是很有效。你的意思大概是:

window.onload= function() {
    document.getElementById('loaded').value= '1';
};

window.onload=document.getElementById('loaded').value=1;

You've forgotten to turn that into a function. What you're saying is:

document.getElementById('loaded').value= 1;
window.onload= 1;

Obviously that's not very effective as a load detector. What you meant was probably:

window.onload= function() {
    document.getElementById('loaded').value= '1';
};
骑趴 2024-09-04 22:11:09

window.onload 事件在触发之前应等待图像加载:

加载事件在结束时触发
文档加载过程。在此
点中的所有对象
文档位于 DOM 中,并且所有
图像和子帧已完成
正在加载。

来源:Mozilla 开发中心:window.onload

您可能需要查看以下 Stack Overflow 帖子以进一步阅读:


更新:

您的实现无法正常工作的原因已由 bobince 在另一个答案中。解决方案是使用:

window.onload = function() {
    document.getElementById('loaded').value = '1';
};

The window.onload event should wait for images to load before it is fired:

The load event fires at the end of the
document loading process. At this
point, all of the objects in the
document are in the DOM, and all the
images and sub-frames have finished
loading.

Source: Mozilla Dev Center: window.onload

You may want to check out the following Stack Overflow post for further reading:


UPDATE:

The reason why your implementation is not working has identified by bobince in another answer. The solution is to use:

window.onload = function() {
    document.getElementById('loaded').value = '1';
};
一袭白衣梦中忆 2024-09-04 22:11:09

如果您可以使用 Jquery,请查看 FrameReady 插件。
检查这个所以问题。欲了解更多信息

If you can use Jquery, have a look to FrameReady plugin.
Check this SO question. for further information

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文