如何在图片完全加载之前显示等待图标

Question

大多数流行的浏览器在加载图片时，会按照自上而下逐行显示。

我有一个要求，在图片加载时应该显示等待动画。 当图片完全加载后，应该显示图片而不是等待动画。

- Dimitris Baltas

Answer 1

一个纯Javascript的解决方案是：

var realImage = document.getElementById('realImageId');
var loadingImage = document.getElementById('loadingImage');
loadingImage.style.display = 'inline';
realImage.style.display = 'none';

// Create new image
var imgPreloader = new Image();
// define onload (= image loaded)
imgPreloader.onload = function () {
    realImage.src = imgPreloader.src;
    realImage.style.display = 'inline';
    loadingImage.style.display = 'none';
};
// set image source
imgPreloader.src = 'path/to/imagefile';

- Residuum

Answer 2

您可以使用jQuery的load方法。

您可以在这里查看：

http://jqueryfordesigners.com/image-loading/

这是一种解决方案的实现。

- fl00r