javascript - 使用 JavaScript 异步加载图像

Question

有没有一种方法可以显示使用 Flickr 生成的动态图像的加载图像？我遇到了一种方法，如Wacom 社区网站上所示，但我无法让它工作。有没有比http://blog.realmofzod.com/asynchronous-image-loading-with-jquery/技术的创始人更简单的东西或者有没有人有更好的解释？

Answer 1

我刚刚得到这个工作。YMMV：

<img src="images/blank.gif" onload="replaceImage(this, 'flickrthumbnailimageurl')"
width="75" height="75" />

然后replaceImage：

function replaceImage(img, replacementImage)
{
    img.onload = null;
    img.src = replacementImage;
}

blank.gif 只是一个 1x1 像素的纯灰色图像。基本上，这个想法是加载此空白图像并将其扩展为 75x75（以保留布局）。这几乎会立即触发 onload 处理程序，它将图像的源更改为所需的图像。它有你想要的效果。

Answer 2

可以用 jquery 做到这一点：

<img src="http://myimages.com/loaderImage.jpg" id="imgIdLoading" />
<img src="http://flickr.com/image.jpg" id="imgId" style="display:none;" />

$('#imgId').load(function(){
    // ... loaded
    $('#imgIdLoading').remove();
    $('#imgId').show();  
}).error(function(){
    // ... not loaded
    $(this).attr('src','/whatever/error.png');
});