通过 jQuery 加载图像

Question

我们在不同的块中有图片和链接。

当链接被点击时，它的href属性放到图片的src。

我想做什么：

If image is not already loaded (not cached) {
    fadeOut previous image {
        fadeIn loader {
            load image (when animation of loader ends) {
                fadeOut loader {
                    fadeIn image
                }
            }
        }
    }
} else (if image is cached, do not show loader) {
    fadeOut previous image {
        fadeIn new image
    }
}

这是我所拥有的：http://jsfiddle.net/EvXJr/13/

第一部分有效，不知道如何编写第二部分 (else)。

请帮忙。

Answer 1

如果页面上没有具有此类 id 的元素，则肮脏的方法是为加载的图像分配 id - 显示加载器，否则只是动画图像。

示例： html:

<div id="container">
   <a href="http://www.site.com/image.png" id="smid1"></a>
   <a href="http://www.site.com/image.png" id="smid2"></a>
</div>

js:

$('#container').delegate('a', 'click', function () {
   var sel_id = this.id;
   if (!document.getElementById('img_' + this.id)) {
      //create image with  id  like: sel_id = 'img_' + this.id
   } else {
      //just show image
   }
});

Answer 2

您为什么不使用已加载的 javascript 数组跟踪已加载的 HREF，如果可以在加载的数组中找到您的 HREF，只需取出与加载程序相关的函数。

Answer 3

无法加载 jsfiddle，但如果我理解正确，我只需将保存图像的元素的背景图像设置为加载 gif，那么您不必担心加载器的淡入和淡出。如果图像已被缓存，它将加载得如此之快，您将永远看不到加载 gif。如果它不是并且需要一段时间来加载，用户将看到加载 gif，并且使用图像下方的功能将在加载后很好地淡入。

如果您想在图像加载后执行某个功能，请使用

$("img").load(function(){
    //do stuff once image has loaded.
    //for example
    $(this).fadeIn("slow");
});