使用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(); 
    }); 
});