Isotope + Imagesloaded: not working, should I use window load?

Question

I have a code that sort of works below, it has infinite scroll and Imagesloaded. There is a know issue with Isotope that images overlap due to srcset attribute with Wordpress responsive images in some browsers, but gets corrected on refresh.

I used the fadein jquery animation but it still doesn't work (nothing fades in). On the next set of posts the images shoot to the top and then correct itself.

Code below:

var fit_container = $('.fit-content');
if (fit_container.length > 0) {
 fit_container.isotope({
  layoutMode: 'fitRows',
  itemSelector: '.fit-post'
});

 fit_container.infinitescroll({
  navSelector: ".navigation",
  nextSelector: ".next-post a:first",
  itemSelector: ".fit-post",    
  pixelsFromNavToBottom: Math.round($(window).height() * 0.9),
  bufferPx: Math.round($(window).height() * 0.9),
  loading: {
    img: js_siteurl.template_url+"/css/images/loader.gif",
    msgText: "Loading...",
    finished: undefined,
    finishedMsg: "No more posts found.",
    speed: 'slow'
  }

}, function(newElements) {
  var $newElems = $(newElements);
  console.log('finished');
  $newElems.imagesLoaded(function(){
    $newElems.fadeIn(1000);
    fit_container.isotope('appended', $newElems );
   $('#infscr-loading').detach().appendTo($('.fit-content'));
  });
});
}

score 0 · Accepted Answer · answered Mar 19 '16 at 23:30

I went ahead and used window load to get the resources done first and then before using imagesLoaded I hid the new elements first for fadein to work.

$(window).load(function(){
var fit_container = $('.fit-content');
if (fit_container.length > 0) {
 fit_container.isotope({
  layoutMode: 'fitRows',
  itemSelector: '.fit-post'
});

 fit_container.infinitescroll({
  navSelector: ".navigation",
  nextSelector: ".next-post a:first",
  itemSelector: ".fit-post",    
  pixelsFromNavToBottom: Math.round($(window).height() * 0.9),
  bufferPx: Math.round($(window).height() * 0.9),
  loading: {
    img: js_siteurl.template_url+"/css/images/loader.gif",
    msgText: "Loading...",
    finished: undefined,
    finishedMsg: "No more posts found.",
    speed: 'slow'
  }

}, function(newElements) {
  var $newElems = $(newElements);
  $newElems.hide();
  $newElems.imagesLoaded(function(){
    $newElems.fadeIn(1000);
    fit_container.isotope('appended', $newElems );
   $('#infscr-loading').detach().appendTo($('.fit-content'));
  });
});
} 
})

;

Isotope + Imagesloaded: not working, should I use window load?

1 Answers1