jQuery—能够更改IMG源，并在浏览器加载图像之前显示加载程序

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

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

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

我想知道的是，无论何时更改imgsrc，jQuery都会显示一个默认加载程序，然后在图像完全加载后，显示图像并删除加载程序

---

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

您可以尝试以下方式：

$('#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();
                 });

$（'#frame>img'）。在（''）之后//一些预加载的“加载”图像
.hide（）
.attr（'src'，'/some/new/value.jpg'））
.1（'加载'，函数（））{
$（this.fadeIn（）.next（）.remove（）；
});

• 插入“加载”图像的方法（应预加载）
• 隐藏当前图像的方法
• 更改

  src

• 绑定加载事件的方法，该事件将在加载映像后删除
• 加载图像后提供良好淡入效果的方法
• 获取“加载”图像的方法
• 删除“正在加载”图像的方法

---

您可能可以预加载图像，如下所述：

如果您不想让

帧

div在高度上跳跃，则需要在div上设置一个适合所有图像大小的固定高度