About loading images using masonry.js

Question

recently, I write a project which needs to load items like "pinterest". so i use masonry -- a jquery plugin.

but the problem is, the plugin runs after all the images are loaded, because it needs to calculate the size of the items and reposition them. that leads to a problem is: if the images fail to load, then the plugin will not run or calculate in the wrong way. anybody has experience with it that can give me a help?

var $container = $('#tweetbox');

$container.imagesLoaded( function(){

  $container.masonry({

    itemSelector : '.each_tweet'

  });

  $('.fancy img').each(function(){

    var $this = $(this),

        url = $this.attr('alt');

    $this.attr('src',url);

  });

});

Thank you !

Answer 1

I found the solution: to use lazy load images to load a blank image first. after all images loaded then re-trigger the masonary