在更改 img 显示 processing.gif 的 src 后，直到真正的 img 加载 [重复]答案

【问题标题】：after changing src of img display processing.gif untill real img loads [duplicate]在更改 img 显示 processing.gif 的 src 后，直到真正的 img 加载 [重复]
【发布时间】：2012-10-11 19:53:19
【问题描述】：

可能重复：
How to show a spinner while loading an image via JavaScript

我有一个 img，下一个 btn 和上一个 btn

下一个按钮将下一张图片加载为

crntSrc=$("img").attr('src');
nextSrc=(crntSrc+1);
$("img").attr('src',nextSrc);

但我想在 nextSrc 完全加载之前显示 process.gif 图像。

【问题讨论】：

类似问题：stackoverflow.com/questions/4635388/…
和stackoverflow.com/q/51352

标签： jquery image

【解决方案1】：

你可以这样做：

function preload(src, cb)
{
    var img = new Image();
    img.load = cb;
    img.src = src;
}

var newImage = "/foo/foo.jpg";

// Function is called after image is loaded into memory.
preload(newImage, function(){
    $("#afterloadimg").attr("src", this.src);
});

【讨论】：

【解决方案2】：

您可以尝试在 css 中将 process.gif 设置为图像的背景：

img{
 background:url('process.gif') no-repeat center;   
}

【讨论】：