2

我正在使用 jquery isotope 和无限滚动并想使用图像预加载器

我正在使用的图像预加载器是这样的：图像预加载器

$('.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: '*' });
}
4

2 回答 2

1

小沃尔特很接近，但我已经试过了。它们的关键是代码的顺序，预加载器代码必须在加载新元素之前出现，所以：

function( newElements ) {

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

$container.isotope( 'insert', $( newElements ) ); 
$container.isotope({ filter: '*' });
}
于 2012-12-16T22:58:31.570 回答
0

同位素中有一个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 
    });
}
于 2012-12-14T11:51:11.807 回答