Isotope + ImagesLoaded: funktioniert nicht, sollte ich Fensterlast verwenden?

Question

Ich habe einen Code, der unten funktioniert, hat unendlich scroll und Imagesloaded. Es gibt ein Problem mit Isotope, dass images overlap aufgrund srcset Attribut mit Wordpress responsive Bilder in einigen Browsern, aber corrected on refresh.

Ich benutzte die Fadein Jquery Animation, aber es funktioniert immer noch nicht (nichts verblasst). Bei den nächsten Posts schießen die Bilder nach oben und korrigieren sich dann selbst.

-Code unten:

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')); 
    }); 
}); 
} 

Answer 1

Ich ging weiter und verwendet Fenster laden die Ressourcen zu erledigen und dann vor imagesLoaded mit versteckte ich die neuen Elemente zuerst an die Arbeit fadein.

$(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')); 
    }); 
}); 
} 
}) 

;