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

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

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

您可以使用jQuery load方法

你可以看看这里:

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

这是解决方案的一种实现

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