当加载和渲染html中的图像时，是否存在类似就绪事件的内容？

Question

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

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

浏览器中是否有用于完成图像渲染的事件我可以捕获，或者是否有任何可以执行此操作的Javascript插件？

Answer 1

有两个事件侦听器DOMContentLoaded和load。所有文件从所有资源（包括广告和图片）加载完成后，会触发加载事件。图像在下载过程中呈现，因此这应该是您正在寻找的。

请参阅demo here

Answer 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!')" />

Answer 3

您可以为每个图像添加.load()，然后只需通过声明变量来检查所有图像的加载时间。