Question

是否有方法显示使用Flickr生成的动态图像的加载图像？我遇到了Wacom Community网站上显示的方法，但我无法让它工作。是否有更简单的事情，或者有人比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');
});

使用JavaScript异步加载图像

2 个答案: