使用.load（）实现JQuery/Javascript图像库的加载程序图像；

我正在使用下面的代码作为图像库，并希望在加载图像时在背景中显示加载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);
            })
        })
    });                                          

$（'ula'）。单击（函数（e）{
e、 预防默认值（）；
var src=$（this.attr（“href”）；
$（#主img img'）。淡出（400，
函数（）{
$（'我放了一个似乎正在工作的JSFIDLE（红色是您的加载图像）。也许您在DOM完全加载之前注册了您的单击？我看到的唯一不同之处是我在Document Ready上注册了它


请注意，图像非常大（4000x4000左右），请稍等片刻，第一个图像不会褪色，因此最初加载需要一段时间。根据您的行为进行必要的调整