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

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">

    var img = new Image();

    img.onload = function() {

        i = document.getElementById('image');

        i.removeAttribute('class');

        i.src = img.src;

    };

    img.onerror = function() {

        document.getElementById('image').setAttribute('class', 'loaderror');

    };

    img.src = 'http://path/to/image.png';

</script>

就我而言，有时图像不会加载，因此我处理了onerror事件以更改图像类，使其显示错误的背景图像（而不是浏览器的损坏的图像图标）。