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

Question

最流行的浏览器在渲染图像时,会在加载时从上到下逐行显示.

我要求在加载图像时显示等待gif.当图像完全加载时,应该显示它而不是wait 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';