jQuery的同位素與無限滾動和圖像預加載

Question

我使用jQuery的同位素和無限滾動和希望使用的圖像預加載

我使用的圖像預加載是這樣的：Image preloader

$('.image').preloader({ 
    loader: '/images_/icons/img_pre.gif', 
    fadeIn: 700, 
    delay : 200 
    }); 

它在第一頁完美工作，但不會爲無限滾動的項目啓動，所以我需要把它放在同位素回調的某個位置，但是在哪裏？有任何想法嗎？

這是同位素回調代碼我使用：

// call Isotope as a callback 
function(newElements) { 
    $container.isotope('insert', $(newElements)); 
    $container.isotope({ filter: '*' }); 
} 

Answer 1

有同位素一個loading性質類似，你需要，但只適用於整個下一個頁面，而不是一個具體的img元素：

$container.infinitescroll({ 
    navSelector : '#page_nav', // selector for the paged navigation 
    nextSelector : '#page_nav a', // selector for the NEXT link (to page 2) 
    itemSelector : '.element',  // selector for all items you'll retrieve 
    loading: { 
     finishedMsg: 'No more pages to load.', 
     img: 'http://i.imgur.com/qkKy8.gif' 
     } 
    }, 
    // call Isotope as a callback 
    function(newElements) { 
     $container.isotope('appended', $(newElements)); 
    } 
); 

或許你可以嘗試調用預加載像這樣的東西：

// call Isotope as a callback 
function(newElements) { 
    $container.isotope('insert', $(newElements)); 
    $container.isotope({ filter: '*' }); 

    $('.image').preloader({ 
     loader: '/images_/icons/img_pre.gif', 
     fadeIn: 700, 
     delay : 200 
    }); 
} 

Answer 2

Walter Jr很近，但我已經試過了。他們關鍵的是代碼的順序，預加載程序代碼必須來之前的新元素被加載，所以：

function(newElements) { 

$('.image').preloader({ 
    loader: '/images_/icons/img_pre.gif', 
    fadeIn: 700, 
    delay : 200 
}); 

$container.isotope('insert', $(newElements)); 
$container.isotope({ filter: '*' }); 
}