Ajax charge ne marche pas attendre img charger lorsque je tente de calculer la hauteur

Question

Im currentyl travaillant sur http://davidpetersson.nu/madartwork/

Et je veux charger des trucs de messages dans un div sur ma page. Qui fonctionne Kinda.

J'ai un div spécifique et un événement click qui récupère le contenu d'une publication et l'ajax-charge dans le div. Le div est a hauteur 0px jusqu'à ce que je charge, puis je mesure le contenu et animer la hauteur pour correspondre au contenu.

Fonctionne avec du texte, mais lorsque j'essaie de charger un article contenant des images, il arrive que les images ne soient pas complètement chargées lors de la mesure.

Exemple. cliquez sur « Band 6 »

Le script que j'utilise ressemble à ceci:

jQuery(document).ready(function(){ 

    var $mydiv = jQuery('#single-post-container'); 
    $mydiv.css('height', $mydiv.height()); 
    jQuery.ajaxSetup({cache:false}); 


    jQuery(window).resize(function() { 
     jQuery("#single-post-container").wrapInner('<div/>'); 
     var newheight = jQuery('div:first',"#single-post-container").height(); 
     jQuery("#single-post-container").css({height: newheight}); 
    }); 

    jQuery(".view-details").click(function(event123){ 
     event123.preventDefault(); 
     var post_id = jQuery(this).attr("href"); 

     jQuery("#single-post-container").load(post_id + " .post", function(){ 

      jQuery('#single-post-container').wrapInner('<div/>'); 
      var newheight = jQuery('div:first','#single-post-container').height(); 

      //Does sometimes not include the height of the images, since they havnt completely loaded 

      jQuery('#single-post-container').animate({height: newheight}); 

      jQuery('html, body').animate({ 
       scrollTop: jQuery('body').offset().top 
      }, 800); 

     }); 
     return false; 
    }); 
}); 

J'ai essayé de inlcude .imagesLoaded de ce poste jQuery Ajax wait until all images are loaded

Mais je nai réussi à le faire fonctionner.

(jQuery au lieu de $ est utilisé parce que wordpress)

C'est l'un de mes premiers ajax-script-bricolages, donc peut-être des choses vraiment mal, alors soyez gentil :)

Answer 1

Deux choses:

1. Vous pouvez faire jQuery accessablie par $ à l'intérieur du ready state. Il suffit de passer le $ comme premier paramètre de l'intérieur function. Maintenant, vous pouvez utiliser $ à l'intérieur comme vous le savez. C'est encore mieux quand vous voulez réutiliser le code.

2. Vous pouvez suivre le chargement de img dans votre conteneur. Juste enveloppez votre code avec un rappel de chargement, et quand tout est chargé, faites votre travail.

---

jQuery(function($) { 
    var $mydiv = $('#single-post-container'); 
    $mydiv.css('height', $mydiv.height()); 
    $.ajaxSetup({ 
     cache: false 
    }); 

    $(window).resize(function() { 
     $("#single-post-container").wrapInner('<div/>'); 
     var newheight = $('div:first', "#single-post-container").height(); 
     $("#single-post-container").css({ 
      height: newheight 
     }); 
    }); 

    $(".view-details").click(function(event123) { 
     event123.preventDefault(); 
     var post_id = $(this).attr("href"); 

     $("#single-post-container").load(post_id + " .post", function() { 
      $('#single-post-container').wrapInner('<div/>'); 

      var callback = function() { 
       var newheight = $('div:first', '#single-post-container').height(); 

       $('#single-post-container').animate({ 
        height: newheight 
       }); 

       $('html, body').animate({ 
        scrollTop: $('body').offset().top 
       }, 800); 
      } 

      // wait for all images to be loaded 
      var count = $('#single-post-container').find('img').load(function() { 
       if (--count === 0) { 
        callback(); 
       } 
      }).length; 

      // or if no image available 
      if(count === 0) { 
       callback(); 
      } 
     }); 

     return false; 
    }); 
});