jQuery - 能够更改 IMG 源，并显示加载器，直到浏览器加载图像

Question

我有一个框架，里面有图像标签，就像一个照片库

<div id="frame">
 <img src="yahoo.com/logo.gif" id="photo" />
</div>

使用 jQuery，我将动态地将 img src 更改为不同的图像 URL。由于图像尺寸不同，这会导致框架高度跳跃。当浏览器加载图像时，它还会导致闪烁。这是一次糟糕的经历。

我想知道是否可能的是，每当 img src 更改时，jQuery 都会显示默认加载器，然后一旦图像完全加载，则显示图像并删除加载器.

有什么建议吗？希望有插件？谢谢

Answer 1

你可以尝试这样的事情:

$('#frame > img').after('<img src="loading.jpg" />') // some preloaded "loading" image
                 .hide()
                 .attr('src','/some/new/value.jpg')
                 .one('load', function() {
                    $(this).fadeIn().next().remove();
                 });

• after()^(docs)插入“正在加载”图像的方法(应预加载)
• hide()^(docs)隐藏当前图像的方法
• attr()^(docs)更改src
的方法
• one()^(docs)绑定(bind)加载事件的方法，该事件在图像加载后将被删除
• fadeIn()^(docs)图像加载后提供良好的淡入淡出效果的方法
• next()^(docs)获取“正在加载”图像的方法
• remove()^(docs)删除“正在加载”图像的方法