2

jquery isotope と無限スクロールを使用しており、画像プリローダーを使用したい

私が使用している画像プリローダーはこれです: Image preloader

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

ページ 1 では完全に機能しますが、無限にスクロールされたアイテムに対して起動しないため、これをアイソトープ コールバック内のどこかに配置する必要がありますが、どこでしょうか? 何か案は?

これは私が使用する同位体コールバック コードです。

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

2 に答える 2

1

ウォルター Jr. が近くにいましたが、私はすでにそれを試していました。重要なのはコードの順序です。プリローダー コードは、新しい要素が読み込まれる前に来る必要があるため、次のようになります。

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 に答える