2

現在、自分の Web サイトに遅延ロードを実装しようとしています。静的ギャラリーを持つページで遅延読み込みが正常に機能しました。

Web サイトのメイン ポートフォリオには、javascript ライブラリ Isotope を使用してフィルター処理できる画像の大きなリストがあります。

フィルタリングが使用されていない場合、遅延ロードは正常に機能しますが、ページがロードされ、スクロールせずにフィルタリングが使用されている場合、表示されるアイテムは解決されません。ときどき画像が機能することがわかりましたが、ほとんどは機能しません。これを修正する方法について何か提案はありますか?

おそらく、遅延ロードを再トリガーしてリフレッシュまたは再チェックする何かを実行できる必要がありますか?

これは、私が取り組んでいるギャラリーです。ここで、私が抱えている問題を確認できます: http://www.imageworkshop.com/lazyload-portfolio/

誰でも助けることができますか？

4

2 に答える 2

3

フィルタリングされたアイテムがクリックされたときにこのコードを呼び出します。$(window).trigger('scroll');

于 2013-01-03T00:46:51.917 に答える
0

私はacarabottからこの答えを見つけました - https://stackoverflow.com/a/13919010/735369 私はこれを実装しましたが、これはうまくいきました。唯一の問題は、スクロール アクションが発生するまで更新が行われないことです。

同位体のソート/フィルタリング機能を使用する場合は、lazyload の failure_limit を設定し、同位体の onLayout コールバックでイベントをトリガーする必要があります。

jQuery(document).ready(function($) {
var $win = $(window),
    $con = $('#container'),
    $imgs = $("img.lazy");

  $con.isotope({
     onLayout: function() {
        $win.trigger("scroll");
     }
});

$imgs.lazyload({
    failure_limit: Math.max($imgs.length - 1, 0)
 });

説明

ドキュメントによると ( http://www.appelsiini.net/projects/lazyload )

After scrolling page Lazy Load loops though unloaded images. In loop it checks if image has become visible. By default loop is stopped when first image below the fold (not visible) is found. This is based on following assumption. Order of images on page is same as order of images in HTML code. With some layouts assumption this might be wrong.

同位体の並べ替え/フィルター処理されたリストでは、ページの順序が HTML とは明らかに異なるため、failure_limit を調整する必要があります。

ご覧のとおり、jQuery オブジェクトを保存して、その長さ 1 を failure_limit として使用できるようにします。長さが 1 である理由に興味がある場合は、lazyload の update メソッドで次のチェックが行われているためです。

 if (++counter > settings.failure_limit) {
    return false;
 }

他のイベントの遅延ロード

スクロールでレイジーロードをトリガーしない場合は、使用しているイベントの「スクロール」トリガーを交換する必要があります。デモ

http://jsfiddle.net/arthurc/ZnEhn/

于 2013-01-10T02:23:34.297 に答える