16

Lazy Loading jqueryプラグインを使用し、次のサイトの指示に従って、Flexsliderで遅延読み込みを機能させようとしています：http： //www.appelsiini.net/projects/lazyload

プラグインスクリプトを読み込んでいますが、コンソールにエラーが表示されません。コンテナやオプションをlazyload関数に渡さずに試しましたが、まだ何もありません。私はこれに何時間も費やします。

$("img.lazy").lazyload({
  effect: "fadeIn",
  container: $(".slides > li")
});

Flexsliderで遅延読み込みを機能させる方法を知っている人はいますか？

4

6 に答える 6

14

スクロール中に遅延読み込みを実装しました。このソリューションは、ここで提案されている他のソリューションと比較して、大きなコレクションに適しています。 初期化中は、最初の5つの画像のみが読み込まれ、その後、アニメーションごとに3つの画像が読み込まれます。

<li>
  <img class="lazy" src="loading-image.jpg" data-src="actual-image.jpg" />
</li>

およびjavascriptコード：

    $('.flexslider').flexslider({
        animation: "slide",
        animationLoop: false,
        controlNav: false,
        init: function (slider) {
            // lazy load
            $("img.lazy").slice(0,5).each(function () {
                var src = $(this).attr("data-src");
                $(this).attr("src", src).removeAttr("data-src").removeClass("lazy");
            });
        },
        before: function (slider) {
            // lazy load
            $("img.lazy").slice(0,3).each(function () {
                var src = $(this).attr("data-src");
                $(this).attr("src", src).removeAttr("data-src").removeClass("lazy");
            });
        }
    });
于 2014-02-05T21:11:49.030 に答える
7

この方法は私にとってはかなりうまく機能しますが、ロードする画像は他の画像と同じサイズである必要があります。私は実際にhttp://imageresizing.net/をmode=padで使用しています

flexsliderに使用しているメインコンテナで、実際の画像を「data-src」属性に配置します

<li>
  <img class="lazy" src="loading-image.jpg" data-src="actual-image.jpg" />
</li>

初期化関数で、「start」コールバックを使用して、読み込み中の画像を実際の画像に置き換え、属性を削除します

$('#slider').flexslider({
    start: function (slider) {
       // lazy load
       $(slider).find("img.lazy").each(function () {
          var src = $(this).attr("data-src");
          $(this).attr("src", src).removeAttr("data-src");
       });
     }
});

これが誰かに役立つことを願っています。

于 2012-10-28T17:35:47.223 に答える
4

Flexslider2とjQuery用の遅延読み込みプラグインを使用して同じことをしようとしています。

このcontainerプロパティは、要素が次のようにスタイル設定されている場合にのみ機能するようです。overflow:scroll;

このコードを使用して、遅延読み込みを機能させることができました。

$("#flexcontainer img.lazy").lazyload({
    failure_limit : 10,
    effect: "fadeIn",
    skip_invisible : false
});

ただし、これは、フレックススライダーがアニメーション化するのではなく、すべてを一度に遅延ロードするだけです。

また、次のコードを使用して、マウスオーバーで動作させることができました。

 $("#flexcontainer img.lazy").lazyload({
     failure_limit : 10,
     effect: "fadeIn",
     event : "mouseover"
 });

ただし、これはタッチデバイスでは機能しません。

重要なのは、独自のカスタムイベントを作成し、コールバックなどのflexsliderコールバックの後にトリガーすることだと思いafterます。

于 2012-09-14T20:56:40.830 に答える
2

代替ソリューションを提供するために-別のオプションは、すでに遅延ロードが組み込まれているレスポンシブスライダーを使用することです。たとえば、ロイヤルスライダー、ここにリンクがあります-> http://dimsemenov.com/plugins/royal-slider //

于 2013-09-27T19:20:50.217 に答える
1

カスタムトリガーイベントを使用してlazyloadを初期化することもできます...

$jQ("img[data-original]").lazyload({
            effect: "fadeIn",
            skip_invisible: false,
            event: "forceLazyLoad"
        });

...次に、このイベントを呼び出して、次のような呼び出しでフレックススライダー内のすべての画像をプリロードします。

$jQ('.flex-viewport').find('img[data-original]').trigger('forceLazyLoad');
于 2013-08-05T16:54:18.003 に答える
0

そこで、実際の画像ページをimageタグのdata-attr属性に追加し、afterイベントファイア時に、activeクラスで画像を検索し、imgsrc属性をdata-attr値に設定しました。

于 2012-09-19T00:58:10.683 に答える