2010-12-01 31 views
0

Je rencontre un problème lors du chargement d'une image après l'ajout d'un élément car une vignette a été cliquée. Elle va remplacer /t/ par /i/ puis la charger dans un élément ajouté par ce code:Charger l'image dans l'élément ajouté

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

Cependant, il ne semble pas fonctionner, car il montre que l'image de chargement, est-il quelque chose de mal avec le code particulier car il ne charge pas l'image dans l'élément annexe ...

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

une chance de vivre ??? – kobe

Répondre

2

Je pense c'est ce que vous êtes après:

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

vous êtes essentiellement passer un rappel à de nombreuses fonctions qui n'acceptent pas une fonction. Ce qui précède charge l'image en arrière-plan, et quand il est fini, il estompe l'image du chargeur puis la remplace par celle chargée.

+0

Très bien. Aidé avec mon problème, merci Nick! – MacMac

0

donnent une classe à l'image ou l'identifiant et essayer comme ci-dessous

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

}); 

Comme il ajoute au moment de l'exécution, vous devez utiliser jquery vivre ????

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

Mis à jour le code, ne fonctionne toujours pas, j'ai peur. – MacMac