下载实际图像时如何显示加载图像

Question

有时，图像需要一些时间才能在浏览器中呈现。我想在下载实际图像时显示忙碌图像，并且在下载图像时，请删除忙碌图像并应显示实际图像。我该如何使用JQuery或任何JavaScript？

Answer 1

我使用与@Sarfraz发布的技术类似的技术，除了隐藏元素之外，我只是操纵要加载的图像的类。<style type="text/css">.loading { background-image: url(loading.gif); }.loaderror { background-image: url(loaderror.gif); }</style>...<img id="image" class="loading" />...<script type="text/javascript">&nbsp; &nbsp; var img = new Image();&nbsp; &nbsp; img.onload = function() {&nbsp; &nbsp; &nbsp; &nbsp; i = document.getElementById('image');&nbsp; &nbsp; &nbsp; &nbsp; i.removeAttribute('class');&nbsp; &nbsp; &nbsp; &nbsp; i.src = img.src;&nbsp; &nbsp; };&nbsp; &nbsp; img.onerror = function() {&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('image').setAttribute('class', 'loaderror');&nbsp; &nbsp; };&nbsp; &nbsp; img.src = 'http://path/to/image.png';</script>就我而言，有时图像不会加载，因此我处理了onerror事件以更改图像类，使其显示错误的背景图像（而不是浏览器的损坏的图像图标）。