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