2016-03-19 3 views
0

以下のようなコードがあります。無限のスクロールとImagesloadedがあります。 Isotopeには、一部のブラウザではWordpress対応の画像を持つsrcset属性のためimages overlapという既知の問題がありますが、corrected on refreshを取得します。Isotope + Imagesloaded:動作しません。ウィンドウ負荷を使用する必要がありますか?

私はfadein jqueryアニメーションを使用しましたが、まだ動作しません(何もフェードインしません)。次の一連の投稿では、画像が上に向かって撮影され、次にそれ自体が修正されます。以下

コード:私は先に行って、最初にしimagesLoadedを使用する前に、私は仕事にフェードインするための第1の新しい要素を隠し行われたリソースを取得するには、ウィンドウの負荷を使用

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

答えて

0

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

;

関連する問題