1

给定html结构：

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

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

  1. 如果当前正在加载图像并在 div 中插入一个加载图标和
  2. 已完成加载并显示完全加载的图片

有什么提示吗？

4

5 回答 5

3

我会从 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>
于 2012-04-16T20:01:05.380 回答
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>
于 2012-04-16T20:02:47.863 回答
1

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

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

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

于 2012-04-16T19:59:03.537 回答
1

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

这是一个jsFiddle 示例。

于 2012-04-16T19:59:46.393 回答
0

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

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

于 2012-04-16T20:00:21.973 回答