Question

我有一个从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";       
}

我想要的是在加载时显示加载动画gif。一旦他们完成所有装载然后淡入他们。我已经到处搜索，无法找到任何有效的东西。

非常感谢！

Answer 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!");
  });
}

Answer 2

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

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

Answer 3

将事件处理程序附加到元素并检查加载的事件。

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

Answer 4

通过CSS类

<div id="loadingImg" class="Img">

使用Jquery，一旦加载了图像，您就可以用HTML替换<div id="loadingImg">。
可以使用replaceWith()功能

jquery在完成所有加载后加载多个图像

4 个答案: