如果图像尚未完全加载，最好的方式来插入加载器图标？

给出的HTML结构：如果图像尚未完全加载，最好的方式来插入加载器图标？

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

我不知道是否有一个容易和简单的方法来检查

如果currenly加载图像并插入到DIV加载图标和
已完成加载并显示满载图片

有没有提示？

来源

2012-04-16 Jurudocs

你有透明图像的工作？你知道你的图片大小是多少？一种方法是给每个'img'标签一个背景图片。 – 2012-04-16 19:59:34

@BrianGlaz谢谢你的提问！我有非常大的图像...就像2 MB ...我讨厌它，当这个图像我慢慢地建立起来...相反，我喜欢有一个小图标，只要图像正在加载... – Jurudocs 2012-04-16 20:05:09

的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-16 20:02:47

- ..谢谢！ – Jurudocs 2012-04-16 20:16:46

我尝试为此创建一个小提琴...所以每个人都可以按照 – Jurudocs 2012-04-16 20:19:52

的任何帮助吗？ http://jsfiddle.net/FjfvZ/ – Jurudocs 2012-04-16 20:48:09

我用图片预加载插件：

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

这会给你控制做任何你想做的事情。

来源

2012-04-16 19:59:03

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

这是jsFiddle example。

来源

2012-04-16 19:59:46 j08691

谢谢很多！但我的情况下，HTML图像已经在dom中。我可以隐藏它，然后再次显示它...但是我需要的是事件或者是在图像加载过程中发生的事情...... – Jurudocs 2012-04-16 20:16:03

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

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

来源

2012-04-16 20:00:21 undefined

我会从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-16 20:01:05

只是好奇：除了'50％50％'''不会'中心'也工作？我觉得'50％50％'会将左边界和上边界放置在中心，而不是图像的中心到中心...... – VictorKilo 2012-04-16 20:02:52

这是一样的。我使用'50％50％'，这对我来说更具可读性。 – 2012-04-16 20:04:54

不，这是相同的：http://www.w3.org/TR/CSS21/colors.html#propdef-background-position – 2012-04-16 20:05:21

如果图像尚未完全加载，最好的方式来插入加载器图标？

回答

相关问题