使用JQuery加载外部图像库

Question

我创建了一个通过Twitter图像托管服务拉入的图像库，并且我想在显示之前显示加载图形，但逻辑似乎无法使我受益。我试图按照以下方式进行：

<ul> 
    <li> 
     <div class="holder loading"> 
     </div> 
    </li> 
    <li> 
     <div class="holder loading"> 
     </div> 
    </li> 
    <li>...</li> 
    <li>...</li> 
</ul> 

哪里有“加载”类设置为动画微调器，因为它是背景图像。

JQuery的：

$('.holder').each(function(){ 
    var imgsrc = 'http://example.com/imgsrc'; 
var img = new Image(); 
    $(img).load(function() { 
     $(this).hide(); 
     $(this).parent('.holder').removeClass('loading'); 
     $(this).parent().append(this); 
     $(this).fadeIn(); 
}) 
.error(function() { 
}).attr('src', imgsrc); 
}); 

这是不工作 - 我不知道该逻辑是正确的，如何从img.load嵌套函数内部访问“持有人”。构建这个图库的最佳方式是什么，以便图像只有在被加载后才能显示？

Answer 1

对于初学者来说，你是不是在这里引用的网址：

var imgsrc = http://example.com/imgsrc; 

应该是：

var imgsrc = 'http://example.com/imgsrc'; 

试试这个：

$('.holder').each(function(){ 
    var imgsrc = 'http://example.com/imgsrc'; 
    var $img = $('<img />', {src: imgsrc}); 
    $($img).load(function() { 
     $(this).hide(); 
     $(this).parent('.holder').removeClass('loading'); 
     $(this).parent().append(this); 
     $(this).fadeIn(); 
    }); 
}); 

我认为问题是，负载事件被绑定到图像没有任何src attribu te（我可能是错的，请让我知道它是怎么回事:)

Answer 2

所以经过很多困惑和搜索后，我想通了 - 从嵌套函数访问持有人，我必须为它创建一个持有人：

$('.holder').each(function(){ 
    var holder = $(this); 
    var imgsrc = 'http://example.com/imgsrc'; 
    var $img = $('<img />', {src: imgsrc}); 
    $($img).load(function() { 
     $(this).hide(); 
     holder.removeClass('loading'); 
     holder.append(this); 
     $(this).fadeIn(); 
    }); 
});