如何在图像完全加载之前显示等待gif
最流行的浏览器在渲染图像时,会在加载时从上到下逐行显示。
我要求在加载图像时显示等待gif。 当图像完全加载时,应该显示它而不是等待gif。
一个纯粹的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';