当加载和呈现 html 中的图像时，是否有类似准备好的事件？答案

【问题标题】：Is there something like a ready event when an image in html is loaded and rendered?当加载和呈现 html 中的图像时，是否有类似准备好的事件？
【发布时间】：2011-11-24 22:08:28
【问题描述】：

我正在为 iPad 创建一个 webview 应用程序，并希望在加载和渲染索引文件和一组图像之前显示一个启动画面。

我希望在加载和渲染所有图像时此启动画面消失 - 这样用户就不会看到非缓存图像的典型图像加载和渲染。

浏览器中是否有我可以捕捉到的用于图像渲染的事件，或者是否有任何 Javascript 插件可以做到这一点？

【问题讨论】：

来自jQuery ready() docs：“只有在图像等所有资产都被完全接收后才会触发此事件。”...似乎$(document).ready() 应该可以解决问题:)
在同一个文档上，它实际上说在处理图像时使用 load() 。不过还是谢谢你把我指向这个页面！

标签： javascript jquery html

【解决方案1】：

有两个事件监听器 DOMContentLoaded 和 load。当所有文件从所有资源（包括广告和图像）完成加载时，会触发 load 事件。图片是在下载过程中呈现的，所以这应该是您要查找的内容。

见demo here

【讨论】：

【解决方案2】：

我给你写出来：

loadedImages = 0;
timesChecked = 0;
checkInterval = 500;
maxLoadTime = 10000; // in miliseconds
window.onload = function() {
  for (var i = 0; i < document.getElementsByName('img').length; i++) {
    document.getElementsByName('img')[i].onload = function() {
      loadedImages++;
    }
  }
  intervalID = setInterval("checkSplash()", checkInterval);
}

function checkSplash() {
  timesChecked++;
  if (loadedImages >= document.getElementsByName('img').length || timesChecked * checkInterval >= maxLoadTime) {
    clearInterval(intervalID);
    // hide splash screen
  }
}

享受:)

~~其实很简单： <img src=".." onload="alert('image 1 is loaded!')" />~~

【讨论】：

这实际上是一个非常糟糕的主意，因为当您输入错误的单个图像 url 时，访问者将无法通过启动画面。你可以做一个计时器，或者在一段时间后关闭启动屏幕，即使不是所有内容都加载（由于服务器问题或不正确的 url）
这适用于单个图像，我的页面有多个图像，我需要知道每个人何时加载:)
我做了一个完整的解决方案，希望你喜欢

【解决方案3】：

您可以将.load() 添加到每个图像，然后通过声明一个变量来检查所有图像何时加载。

【讨论】：