javascript - 使用 .load(); 为 JQuery/Javascript Image Gallery 实现 Loader Image

Question

我将下面的代码用于图片库，并希望在加载图片时在后台显示一个加载器 gif，然后在加载图片后将其删除。

执行此操作的最佳方法是什么？

注意:我之前附上了 .fadeIn() 和 .fadeOut() 运气不太好(看起来两者同时出现。

    $('ul a').click(function(e) {
        e.preventDefault();
        var src = $(this).attr("href");
        $('#main-img img').fadeOut(400,
        function() {
            $('<img/>').attr('src', src).load(function() {                  
                $('#main-img img').attr('src', this.src).fadeIn(400);
            })
        })
    });                                          

Answer 1

我整理了一个似乎可以正常工作的 JSFiddle(红色是您的加载图像)。也许您在 DOM 完全加载之前注册了您的点击？我唯一看到的不同是我在 Document Ready 上注册了它。

http://jsfiddle.net/sSt3x/2/

请注意，图像非常大(4000x4000 左右)所以稍等片刻，第一张图像没有褪色，因此最初加载需要一些时间。根据您的行为进行必要的调整。