Загрузить изображение в добавленный элемент

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

Однако, это не похоже на работу, как это показывает только изображение загрузки, существует ли что-нибудь особенно неправильно с кодом, как он не загружает изображение в приложенном элемент ...

EDIT:

$('.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

дают класс к изображению или идентификатору и попытаться как ниже

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

}); 

Как добавлять во время выполнения, вы должны использовать JQuery жить ????

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