代码之家  ›  专栏  ›  技术社区  ›  Pentium10

如何在整个页面加载包括图像的情况下启动JS代码(完成时为实)

  •  4
  • Pentium10  · 技术社区  · 15 年前

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

    目前的方法是:

    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页面中放置一个警报,然后在速度较慢的服务器上尝试,在该服务器上,您的父页面包含大型图像等。

    3 回复  |  直到 15 年前
        1
  •  4
  •   bobince    15 年前

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

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

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

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

    window.onload= function() {
        document.getElementById('loaded').value= '1';
    };
    
        2
  •  4
  •   Community CDub    8 年前

    这个 window.onload 事件应等待图像加载后再激发:

    加载事件在 文件加载过程。在这里 点,中的所有对象 文档在DOM中,并且 所有的 图像和子帧已完成 加载。

    资料来源: Mozilla Dev Center: window.onload

    您可能希望签出以下堆栈溢出日志以进一步读取:


    更新:

    您的实现不起作用的原因已经通过 bobince in another answer . 解决方案是使用:

    window.onload = function() {
        document.getElementById('loaded').value = '1';
    };
    
        3
  •  -1
  •   Community CDub    8 年前

    如果可以使用jquery,请查看 FrameReady 插件。
    检查 this 所以问题是。更多信息