加载图像时使用 jQuery .load 函数答案

【问题标题】：Using jQuery .load function when images are loaded加载图像时使用 jQuery .load 函数
【发布时间】：2018-02-01 17:29:25
【问题描述】：

我想在页面上加载所有图像时使用 jQuery .load 函数运行一些代码。

jQuery("img").load(function () {
    //run some code
});

现在代码运行了，但我的问题是，代码是在页面上的所有图像都加载后运行，还是在第一个图像元素加载时运行。

我知道我可以使用 jQuery $(document).ready 函数或 `$(window).load 函数，但是这会在所有内容加载时触发。我希望代码在加载图像元素时以及在页脚中的所有脚本加载之前运行。

有人愿意分享他们对此事的专家意见吗？

【问题讨论】：

【解决方案1】：

我猜你应该使用窗口的加载功能而不是img的：

$(window).on('load', function() { // makes sure the whole site is loaded 
  console.log("Everything loaded");
})

编辑：这里有一个预加载器的工作示例： https://codepen.io/niklausgerber/pen/MKrVdQ

【讨论】：

嗨曼努埃尔，感谢您的帮助。这不是我要问的，我已经编辑了我的问题。我不知道我是否在一个页面上有 40 张图片，我使用 jQuery("img").load(function () { //run some code }); 将在加载第一个图像元素时或加载最后一个元素后运行代码
使用该代码，我认为代码将在网页中的每个图像加载时执行。一张图片，一次代码执行。
是的，这就是我正在努力解决的问题。如果它在第一个 img 元素上触发，那么它将在所有元素上触发。只是不确定：/

【解决方案2】：

而不是图像使用窗口来了解页面的每个元素是否完全加载。

JQUERY

$(window).on('load', function() { 
 // do this
});

或

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

【讨论】：

嗨，贝拉，感谢您的帮助。我试图避免这种方法，因为有时来自外部源（即另一个网站）的脚本加载速度非常慢并且挂起。所以我要运行的脚本必须等待，这提供了一个糟糕的用户体验
@Web Dev Guy - 呵呵，别担心 :)