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

【问题标题】：How to display a wait gif until image is fully loaded如何在图像完全加载之前显示等待 gif
【发布时间】：2010-03-23 10:22:59
【问题描述】：

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

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

【问题讨论】：

标签： javascript jquery

【解决方案1】：

你可以使用jQueryload方法

你可以看这里：

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

这是解决方案的一种实现

【讨论】：

【解决方案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';

【讨论】：