如何在图像完全加载之前显示等待gif

Question

大多数流行的浏览器在渲染图像时会在加载时从上到下逐行显示。

我要求在加载图像时显示等待gif。 当图像完全加载时，应该显示它而不是等待gif。

Answer 1

您可以使用jQuery load方法

你可以看一下：

  

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

这是解决方案的一个实现

Answer 2

纯粹的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';