jquery在完成加载后加载多个图像答案

【问题标题】：jquery load multiple images after they have all finished loadingjquery在完成加载后加载多个图像
【发布时间】：2014-03-06 21:28:35
【问题描述】：

我有一个从 onclick 事件中调用的函数例如

<a href="#" onclick="changeImages()">load new</a>

这个函数基本上改变了 5 个相互叠加的图像：

    function changeImages(){
    document.getElementById("ins5").src="image5.png";
    document.getElementById("ins4").src="image4.png";
    document.getElementById("ins3").src="image3.png";
    document.getElementById("ins2").src="image2.png";
    document.getElementById("ins1").src="image1.png";       
}

我想要的是在它们全部加载时显示一个 LOADING 动画 gif。一旦它们全部完成加载，然后将它们淡入。我到处搜索，找不到任何有用的东西。

非常感谢！

【问题讨论】：

这没有加载器 gif，但它有一个加载图像的侦听器，您可以将淡入淡出应用到 cirkuit.net/projects/jquery/onImagesLoad
太棒了！！！这个例子正是我一直在寻找的：）谢谢！

标签： jquery

【解决方案1】：

使用 jQuery。您可以将 .load 参数附加为回调函数。

function changeImages(){
  $("#ins5").prop('src','image5.png');
  $("#ins4").prop('src','image4.png');
  $("#ins3").prop('src','image3.png');
  $("#ins2").prop('src','image2.png');
  $("#ins1").prop('src','image1.png');
  $("#ins5, #ins4, #ins3, #ins2, #ins1").load(function(){
    //This is ourcallback. Once our images have loaded, we display an alert
    alert("loaded!");
  });
}

【讨论】：

这是一种享受...但在图像缓存后停止工作。
是的。这就是预期的功能。

【解决方案2】：

查看图像 JavaScript 对象。 (http://www.w3schools.com/jsref/dom_obj_image.asp) 它有一些方法可供您轮询以查看它们是否已完成加载。使用 setTimeout 函数，您可以遍历所有 Image 对象，检查它们是否完成并向用户显示状态。

或者您可以复制并粘贴网络上可用的数百万个脚本之一。像这样：Progress image while page is loaded

【讨论】：

【解决方案3】：

为元素附加一个事件处理程序并检查加载的事件。

http://api.jquery.com/load/

【讨论】：

【解决方案4】：

使用通过 CSS 类加载图像放置 <div id="loadingImg" class="Img">
使用 Jquery，一旦加载图像，您就可以将 <div id="loadingImg"> 替换为您的 HTML。
可以使用replaceWith()函数替换现有的div

【讨论】：