將圖像加載到附加元素

Question

我在添加元素後加載圖像時出現問題，因爲縮略圖已被點擊，它將替換/t/至/i/，然後通過此代碼加載到附加元素中：

$('.main-image img').live('click', function() 
{ 
var image_url = $(this).attr('src'); 
var loadurl = image_url.replace(/\/t\//, '/i/'); 

$('.container').slideUp('slow'); 

$('#pop-up').append('<div class="container tcenter"><p id="close-preview" class="link tcenter">Close</p><div class="quick-view"><img src="img/loading.gif" /></div></div>', function() 
{ 
    $('<img />').attr('src', loadurl).load(function() 
    { 
      $('.quick-view').empty(); 
    $(this).appendTo('.quick-view'); 
    }); 
}); 

    // ignore this part - above is what needs helping with 
$('.quick-view').css('line-height', ($('.quick-view').parents().find('.container').height() - 25) + 'px'); 
$('.container:last').css('background', '#FFF'); 
$('.container:last img').css('max-height', $(window).height() * 75/100) 
}); 

但是，它似乎並沒有工作，因爲它只是顯示加載圖像，有什麼特別不好的代碼，因爲它不將圖像加載到附加元素...

編輯：

$('.main-image img').live('click', function() 
{ 
    var image_url = $(this).attr('src'); 
    var loadurl = image_url.replace(/\/t\//, '/i/'); 
    var self = $(this); 

    $('.container').slideUp('slow'); 

    $('#pop-up').append('<div class="container tcenter"><p id="close-preview" class="link tcenter">Close</p><div class="quick-view"><img src="img/loading.gif" /></div></div>', function() 
    { 
     $('<img />').attr('src', loadurl).live('load', function() 
     { 
      self.fadeOut('slow', function() 
      { 
       self.empty(function() 
       { 
        self.appendTo('.quick-view'); 
       }); 
      }); 
     }); 
    }); 
    $('.quick-view').css('line-height', ($('.quick-view').parents().find('.container').height() - 25) + 'px'); 
    $('.container:last').css('background', '#FFF'); 
    $('.container:last img').css('max-height', $(window).height() * 75/100) 
}); 

Answer 1

我認爲這是你追求的：

$('.main-image img').live('click', function() { 
    var loadurl = this.src.replace(/\/t\//, '/i/'); 
    $('.container').slideUp('slow'); 

    $('#pop-up').append('<div class="container tcenter"><p id="close-preview" class="link tcenter">Close</p><div class="quick-view"><img src="img/loading.gif" /></div></div>'); 

    $('<img />').load(function() { 
     var img = this; 
     $('.quick-view img').fadeOut('slow', function() { 
     $(this).replaceWith(img); 
     }); 
    }).attr('src', loadurl); 

    $('.quick-view').css('line-height', ($('.quick-view').closest('.container').height() - 25) + 'px'); 
    $('.container:last').css('background', '#FFF'); 
    $('.container:last img').css('max-height', $(window).height() * 75/100) 
}); 

基本上你傳遞一個回調到許多功能不接受功能。上面的代碼將在後臺加載圖像，並在完成時將其淡出，然後用加載的圖像替換它。

Answer 2

給一個類的圖像或ID，並嘗試像下面

$('#imageId').load(function() { 

}); 

因爲它在運行時添加，你需要使用jQuery的生活????

$('img').live('load', function() 
{ 
    //try live 
});