加载页面中的所有图像后如何运行 jQuery 代码？

Posted 2023-03-05

【中文标题】加载页面中的所有图像后如何运行 jQuery 代码？

【英文标题】：How to run a jQuery Code after loading all the images in my page?

【发布时间】：2011-04-09 21:46:45

【问题描述】：

【参考方案1】：

$(window).load(function())

【参考方案2】：

检查所有 图像 是否已加载有点复杂，因此除非您迫切需要如此精确，否则检查所有图像和其他所有内容是否已加载要容易得多：

$(window).load(function()  ... );

这利用了 jQuery .load() 方法。

如果您确实需要仅检查特定图像，那么事情会变得有些棘手。我最初想这样做：

$("img").load(function()  ... ); \\ THIS IS INCORRECT!!!!!

然而，上面创建了一个包含所有图像的 jQuery 对象，然后它将function() ... 绑定到这些图像中的每个。所以上面会触发一个函数的次数和页面上的图片一样多！

为了解决这个问题，我们应该检查页面上有多少张图片，并且只在所有图片加载完成后触发一次函数：

$(function()   

      // To keep track of how many images have loaded
    var loaded = 0;

      // Let's retrieve how many images there are
    var numImages = $("img").length;

      // Let's bind a function to the loading of EACH image
    $("img").load(function() 

          // One more image has loaded
        ++loaded;

          // Only if ALL the images have loaded
        if (loaded === numImages) 

              // This will be executed ONCE after all images are loaded.
            function()  ...    
        
    );
);

jsFiddle example

【讨论】：

因为他只是在页面上的所有图像都加载之后才想要它，我认为这不会造成问题。

@Daniel - 即使所有图像都是从浏览器缓存中加载的（比如以前访问过的页面）？我不太确定在这些情况下如何触发 load。

我想是的。仍然会有其他资源供浏览器加载——一旦它们被加载，窗口的加载事件就会被触发。即使每个外部资源都被缓存，我想一旦页面本身完成加载，它仍然会被触发。我还没有听说加载事件在任何有效情况下都不会触发。

旧线程，但我发现这对于检查是否在 ajax 请求后加载所有图像很有用。谢谢！

【参考方案3】：

$(function() 
 var length = $('img').length ;
 var counter = 0;
 $('img').each(function() 
     $(this).load(function()
        counter++;
        if(counter == length) 
           Callback(); //do stuff
        
     );
   );
);

【讨论】：

嘿，我还没有意识到这是多么痛苦。不过，您可以使用 $("img").load() 而不是 $("img").each(function() $(this).load() ) 删除一行 - 请参阅我编辑的答案。

【参考方案4】：

我最近做了类似的事情，但做了不同的事情。

$('img').on('load', function()
    $('img').off('load'); //detaches from load event, so code below only executes once
    // my code to execute
);

【参考方案5】：

不是直接的答案。还是值得参考的。

参考

Run javascript Only After Entire Page Has Loaded jQuery callback on image load (even when the image is cached)

代码

$(window).bind("load", function() 
   // code here
);

【参考方案6】：

@Peter Ajtai 的答案除了在 IE 的缓存图像上有效。要使其与 IE 一起使用，有一个解决方案：https://***.com/a/3877079 或使用imagesLoaded 插件。

【参考方案7】：

对于任何使用 jquery 的人来说，这个小 sn-p 可以解决问题（它确保在运行其中的任何脚本之前加载所有图像）...

$(window).bind("load", function() 
   // code goes here here
);