Bild lädt in hängten Element

Question

ich ein Problem habe versucht, ein Bild zu laden, nachdem ein Element als angehängt wurde, wenn ein Thumbnail auf geklickt wurde, wird es /t/-/i/ dann ersetzen lädt in ein angehängten Element durch diesen Code:

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

Allerdings scheint es nicht, als es das Laden Bild nur zur Arbeit zeigt, ist es etwas besonders falsch mit dem Code, da es nicht das Bild in das anhängenden Element nicht geladen ...

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

I denken das ist, was Sie nach:

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

Grundsätzlich sind Sie einen Rückruf an eine Vielzahl von Funktionen, die vorbei Sie eine Funktion nicht akzeptieren. Das obige lädt das Bild im Hintergrund, und wenn es fertig ist, blendet es das Ladebild aus und ersetzt es dann durch das geladene Bild.

Answer 2

geben eine Klasse auf das Bild oder die ID und versuchen Sie unten wie

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

}); 

Da es während der Laufzeit ist das Hinzufügen, brauchen Sie jquery leben verwenden ????

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