Comment évaluer le code dans la chaîne ou simuler la fonction de rappel?

Question

ajouter dynamiquement une image sur ma page:

<div class="simple_overlay" id="overlay"> 
    <img src="" /> 
</div> 

<script type="text/javascript"> 
$(function() { 
    $("a[rel]").overlay({ 
     var source = this.getTrigger().attr('href'); 
     this.getOverlay().find("img").attr({'src': source}); 
    }); 
}); 
</script> 

Maintenant, je dois obtenir la largeur de la nouvelle image et calculer margin-left lui correspondant. Les méthodes natives de jQuery Tools ne fonctionnent pas, car lorsque la superposition est en cours de chargement, l'image n'a pas encore été chargée et le conteneur #overlay width est 0. Y at-il une option pour émuler le rappel sur cette chaîne, donc je peux utiliser width() juste après attr() a évalué ?

Answer 1

Utilisez les images load event (à ne pas confondre avec window.load), comme ceci:

$("a[rel]").overlay({ 
    var source = this.getTrigger().attr('href'); 
    this.getOverlay().find("img").one('load', function() { 
     //run your code here, the image is loaded and is "this" 
    }).each(function() { 
     if (this.complete) $(this).load(); //trigger load, handles from cache cases 
    }).attr({'src': source}); 
}); 

Il utilise .one() pour exécuter votre code une seule fois. L'événement load se déclenche quand image est chargé ... mais cela ne se déclenche pas toujours lors du chargement du cache (en fonction du navigateur), ce qui est la .each(). Si le navigateur l'a chargé à partir du cache et a déclenché l'événement ... c'est correct aussi, le .one() gère cela, le code s'exécute toujours une fois dans tous les cas :)