Y a-t-il un événement "ready" déclenché lorsqu'un élément jQuery est créé à la volée?

J'essaye d'implémenter quelque chose comme un carrousel de photo dans jQuery. Ce carrousel pourrait être rempli d'images en utilisant un tableau de sources d'images (je fais une requête ajax qui renvoie un json avec ces données) et, une fois rempli, vous pouvez appeler quelques méthodes, previous() et next() pour vous déplacer le carrousel en arrière et en avant respectivement. Le fait est que cette fonctionnalité est déjà implémentée et fonctionne, mais je ne peux pas résoudre un problème sur le processus de redimensionnement. Pour éviter que les images dépassent les limites du conteneur, j'ai une méthode pour créer et redimensionner les images, si nécessaire. En testant cette fonction, j'ai constaté que, parfois, les images ne sont pas redimensionnées comme prévu.Y a-t-il un événement "ready" déclenché lorsqu'un élément jQuery est créé à la volée?

this.getImageResized = function(imageSrc) { 

    var image = $('<img />', {src : imageSrc}); 

    // Container ratio 
    var ratio = this.itemMaxWidth/this.itemMaxHeight; 

    // Target image ratio is WIDER than container ratio 
    if((image[0].width/image[0].height) > ratio) { 
     if(image[0].width > this.itemMaxWidth) { 
      image.css('width', this.itemMaxWidth + 'px'); 
      image.css('height', 'auto'); 
     } 
    // HIGHER 
    } else { 
     if(image[0].height > this.itemMaxHeight) { 
      image.css('width', 'auto'); 
      image.css('height', this.itemMaxHeight + 'px'); 
     } 
    } 

    // Embeds image into a wrapper with item's width and height 
    var wrapper = $('<span style="display : block; float : left; width : ' + this.itemMaxWidth + 'px; height : ' + this.itemMaxHeight + 'px"></span>'); 

    image.appendTo(wrapper); 

    return wrapper; 
};

J'ai utilisé firebug console.log() pour enregistrer l'image [0] .width juste en dessous de la création de l'élément jQuery, découvrant que parfois la valeur est 0.

Je ne suis pas un expert sur jQuery, mais je suppose que lorsque cela arrive (la valeur est 0), c'est parce que l'élément n'est pas prêt. Comment puis-je m'assurer que l'élément est déjà chargé lorsque je demande ses valeurs de largeur et de hauteur?

Est-ce quelque chose comme cela possible?

var image = $('<img />', {src : imageSrc}).ready(function() { 
    // But image[0].width it's not available here! 
});

Nous vous remercions de votre aide!

Source

2010-06-22 Roberto Adarve

copie possible de [événement jQuery pour les images chargées] (http://stackoverflow.com/questions/910727/jquery-event-for-images-loaded) – spender

@spender - S'il vous plaît voir mes commentaires à la réponse de Sarfraz ... this isn ' t la même question, et ce n'est pas la réponse appropriée non plus, cela ne devrait pas être fermé comme un doublon ... parce que, w ell, c'est une question différente. –

@Nick, je ne peux que penser que vous n'avez pas remarqué que Sarfaz utilise l'événement de chargement de fenêtre, mais la réponse dans la question liée utilise l'événement de chargement d'image. Je posterai une réponse pour démontrer, mais cela ne devrait vraiment pas être nécessaire. – spender

Vous voulez utiliser l'événement load dans ce cas, comme celui-ci:

var image = $('<img />', {src : imageSrc}).one('load', function() { 
    // use this.width, etc 
}).each(function() { 
    if(this.complete) $(this).load(); 
});

Le dernier bit déclenche l'événement load dans le cas où cela n'a pas été déclenché déjà ... qui ne se produit pas dans certains navigateurs lors du chargement de l'image à partir du cache, en utilisant .one() pour un feu une seule fois et .complete pour vérifier s'il est chargé.

Source

2010-06-22 21:39:19

Merci beaucoup Nick! Cela fonctionne très bien !!! –

Il n'y a pas de méthode 'one', vous devriez la changer à' on' – kirugan

@kirugan Oui il y a: http://api.jquery.com/one/ Ce n'est pas une faute de frappe. –

Il n'y a pas la plate-forme des moyens compatibles pour voir si un objet DOM est « prêt », voir https://developer.mozilla.org/en/DOM_Events pour des événements spécifiques gecko

Source

2010-06-22 21:41:26 azatoth

Selon la réponse fournie here, j'entrechoquer une démonstration de travail:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script> 
    <script type="text/javascript"> 
    //<![CDATA[ 
    $(window).load(function(){ 
    //window load already fired 
    setTimeout(function(){ 
     var img=$('<img />'); 
     img.appendTo($("body")); 
     img.load(function(){alert("img is "+$(this).width()+"px wide.")}); 
    },5000) //5 secs delay. definitely adding "dinamically" 
     img.attr("src","http://sstatic.net/so/img/sprites.png"); 
    }); 
    //]]> 
    </script> 
</head> 
<body> 

</body> 
</html>

Source

2010-06-22 22:52:59 spender

Quelques choses à corriger ici, cela ne gère pas le cas caché (qui ne déclenche pas 'load' dans tous les navigateurs, voir ma réponse), il devrait simplement être' img.appendTo ("body"), 'et vous devez attacher le gestionnaire 'load' avant de définir la source si vous le faites de cette façon, sinon il ne quittera définitivement pas votre gestionnaire de chargement du cache dans * n'importe quel navigateur, l'événement pourrait se déclencher avant qu'il y ait un gestionnaire. –

Correction de la commande ... Je vais réimplémenter votre réponse pour le reste! ;) – spender

Y a-t-il un événement "ready" déclenché lorsqu'un élément jQuery est créé à la volée?

Répondre

Questions connexes