如何判断$(window).load()/window.onload事件已经触发？

Question

我有一个脚本是通过另一个脚本动态插入的。该脚本中的代码被包裹在 $(window).load() 事件中，因为它需要页面上所有的图片都加载完成。在某些浏览器中，它可以正常工作，但在其他浏览器中似乎无法触发，因为页面已经在代码运行时加载完成了。

是否有任何方法可以检查并查看页面是否已经加载完成 - 可以使用jQuery或JavaScript？（包括图像）

在这种情况下，我无法访问原始文档的 onload 事件（除非通过加载的脚本进行修改 - 但这似乎会带来相同的问题）。

任何想法/解决方案/建议将不胜感激！

- DismissedAsDrone

Answer 1

你可以尝试设置一个处理程序，通过超时调用来检查图像是否可用。在load事件处理程序中清除定时器，这样如果先出现了加载事件，定时器就不会触发。如果属性不可用，则加载事件尚未发生，你知道你的处理程序最终将被调用。如果它们是可用的，那么你知道加载事件发生在你的处理程序之前，你可以简单地继续进行。

伪代码

 var timer = null;
 $(function() {
    $(window).load( function() {
        if (timer) {
           clearTimeout(timer);
           timer = null;
        }
        process();
    });
    timer = setTimeout( function() {
        if (checkAvailable())
           process();
        }
    }, 10*1000 ); // waits 10 seconds before checking
 });

 function checkAvailable()
 {
     var available = true;
     $('img').each( function() {
         try {
             if (this.height == 0) {
                available = false;
                return false;
             }
         }
         catch (e) {
             available = false;
             return false;
         }
      });
      return available;
  }

  function process() {
      ... do the real work here
  }

- tvanfosson

---

这基本上实现了我想要做的事情。只是稍微调整了一下，以短时间间隔触发计时器，而不是等待10秒钟。谢谢！ - DismissedAsDrone

Answer 2

我写了一个插件，可能会有一些用处：http://plugins.jquery.com/project/window-loaded。

- Holden Waterhouse

---

酷！如果我使用.load()方法获取内容，并且如果需要加载图像，那么$.windowLoaded(/*dostuff*/)会在新图像加载后执行回调吗？ - trusktr

我通过简单地使用addEventListener将函数添加到window.onload，并为每个调用jquery的.load()方法设置一个变量以便在后续添加到window.onload时检测到来解决了这个问题... 如果这有意义的话... - trusktr

Answer 3

大家应该看一下这个：

http://web.enavu.com/daily-tip/daily-tip-difference-between-document-ready-and-window-load-in-jquery/

该链接介绍了jQuery中document ready和window load的区别，可以加深对IT技术的理解。

- alessioalex

Answer 4

如果你使用$(document).ready而不是$(window).load，我认为你的问题将会解决-请参阅jquery文档。

- TML

---

以下是文档中的代码片段： 简而言之，这是一个可靠的替代方案，可以取代使用 window.onload ... 您的绑定函数将在 DOM 准备好读取和操作时立即调用，这正是 99.99% 的 JavaScript 代码需要运行的时间。 - TML

$(document).ready会在DOM就绪时触发，但不会等待图片加载完成（如果我没有理解错的话）。在这种情况下，我需要等待图片加载完成后才能读取它们的属性。 - DismissedAsDrone

Answer 5

不知道这是否是你想要的，但你尝试过了吗？

$(document).ready(function(){
    ...
});

http://docs.jquery.com/Events/ready#fn

- GreenieMeanie