使用 jquery：为正在加载的每个图像显示一个 ajax 加载 gif，直到该独立图像完全加载答案

【问题标题】：Using jquery: Show an ajax-loading gif for each image being loaded until the that indivisual image is loaded fully使用 jquery：为正在加载的每个图像显示一个 ajax 加载 gif，直到该独立图像完全加载
【发布时间】：2012-03-23 11:07:44
【问题描述】：

使用 jquery 如何显示加载 gif 直到图像完全加载，然后删除加载 gif 并显示实际图像。这应该在页面内的所有图像上独立发生。这是一个例子：

http://jwt.com/

这是我的尝试，但似乎不起作用：

HTML

<div class="thumbnail"><a href="#" class="boxImage ajaxloader"><img src="...image-one..." /></a></div>
<div class="thumbnail"><a href="#" class="boxImage ajaxloader"><img src="...image-two..." /></a></div>
<div class="thumbnail"><a href="#" class="boxImage ajaxloader"><img src="...image-three..." /></a></div>

CSS

.ajaxloader{ background: transparent url(..ajax-loader.gif...) no-repeat scroll center center;

    $('a.boxImage img').one("load", function(){
         $(this).parent().removeClass('ajax-loader');
     }).each(function(){
         //covering the case images loading from cache
         if(this.complete){
            $(this).trigger("load");
            $(this).parent().removeClass('ajax-loader');
         }
    });

另一个问题...上述方法（例如，在解决问题后）是否允许一次仅加载一个图像，还是允许浏览器对图像发出多个请求并尽可能多地并行加载.

【问题讨论】：

标签： jquery

【解决方案1】：

不确定它是否会起作用，但这是您已有的更好的版本：

$('a.boxImage img').on("load", function(){//Note: .on() not .one()
     $(this).parent().removeClass('ajax-loader');
 }).each(function(){
     //covering the case images loading from cache
     if(this.complete){
        $(this).trigger("load");
        //No need to repeat the code; triggering the load handler does the job.
     }
});

您可能会遇到浏览器（取决于设置）在加载动画上（部分）显示图像占位符的问题。出于这个原因，最好使用一个额外的<img> 元素（每个缩略图一个）。从加载动画显示并隐藏真实图像开始，然后当真实图像的加载事件触发时，隐藏动画并显示真实图像。

$('a.boxImage img.real').on("load", function(){
    $(this).show().siblings('img.loading').hide();
 }).each(function(){
     //covering the case images loading from cache
     if(this.complete){
        $(this).trigger("load");
     }
});

您还需要确保容器和/或加载图像的大小与缩略图的大小相同，以便在发生切换时大小不会发生变化。你可能已经在我看不到的 CSS 中这样做了。

【讨论】：