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分配给已加载的图像 - show loader，否则只是动画图像。

实施例： 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

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

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

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

Answer 3

为什么不跟踪已加载的javascript数组加载的HREF，如果在加载的数组中找到HREF，只需取出与加载器相关的函数。

通过jQuery加载图像

3 个答案: