将图像加载到附加元素

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 
});