在加载图像时显示加载gif

我做了一些代码，用户可以从zip上传一些图像。 在下一页，我需要在85 * 85像素帧中分别显示所有图像。

问题是加载所有图像可能需要一些时间。 所以我想在用户等待图像加载时显示加载gif。

我已经将图像的src设置为the loading gifs ，而我创建了一些带有真实源的复选框作为id

 echo ""; echo ""; <input type="hidden" name="aantal" id="aantal" value="" > 

然后我创建了一些javascript来检查图像是否已加载，当它被加载时，它应该替换图像的源。

  var aantal = document.getElementById("aantal").value; for(var i = 0; i < aantal; i++){ var source = document.getElementById("img["+i+"]").value; var img = new Image(); img.onload = function(){ $("#img"+i).attr('src', source); }(); img.src = source; }  

但这并不像我预期的那样工作，我认为只要加载第一个图像就会触发所有图像。 任何想法我做错了什么或如何解决这个问题？

Answer 1

您可以将图像的背景设置为加载gif。 这是一个简单的CSS技巧。 然后你不需要制作一个js脚本。

 .loading { background: transparent url('http://thinkfuture.com/wp-content/uploads/2013/10/loading_spinner.gif') center no-repeat; }