Question

给出html结构：

<div class="image-container">
    <img id="firstslide" src="img/verybig.jpg">
</div>

我想知道是否有简单易行的方法来检查

如果当前正在加载图像并将div插入到加载图标和
已完成加载并显示已满载的图片

有任何提示吗？

Answer 1

我会从CSS中做到这一点，因为将加载器动画图像设置为所选图像的背景：

CSS：

img.loader {
  background: url(loader.gif) 50% 50% no-repeat;
}

HTML：

<div class="image-container">
  <img id="firstslide" class="loader" style="width: 100px; height: 100px;" src="img/verybig.jpg" alt=""/>
</div>

Answer 2

jsFiddle：http://jsfiddle.net/FjfvZ/60/

如果你正在使用jQuery：

<div id="loading">Loading</div>
<img id="image" src="image.png" style="display:none"/>

<script>
    $('#image').load(function()
    {
        $('#loading').hide();
        $(this).show();
    });
</script>

Answer 3

我使用图片预加载器插件：

http://www.farinspace.com/jquery-image-preload-plugin/

这将使你可以控制你想做的任何事情。

Answer 4

你可以使用一个小的加载图像作为背景图像，一旦加载，它将被实际图像覆盖。

这是 jsFiddle example 。

Answer 5

这提供了一个简单的解决方案：

http://www.appelsiini.net/projects/lazyload

如果图像尚未完全加载，最好插入加载程序图标？

5 个答案: