使用 JavaScript 异步加载图像

发布于 2024-07-27 19:38:55 字数 354 浏览 6 评论 0原文

有没有一种方法可以显示使用 Flickr 生成的动态图像的加载图像？我遇到了一种方法，如 Wacom 社区网站所示，但我无法获得让它工作。有没有比 http://blog.realmofzod.com/asynchronous-image-loading-with-jquery/？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

不疑不惑不回忆 2024-08-03 19:38:55

我刚刚开始工作。 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 处理程序，将图像的源更改为所需的图像。它有你想要的效果。

I just got this working. YMMV:

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

And then replaceImage:

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

blank.gif is just a 1x1 pixel solid gray image. Basically, the idea is that this blank image is loaded and expanded to 75x75 (to preserve layout). That almost immediately fires the onload handler, which changes the image's source to the desired image. It has the effect you desire.

回复收藏 0 原文

我们的影子 2024-08-03 19:38:55

可以用 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');
});

could do it with 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');
});

回复收藏 0 原文

~没有更多了~