web-dev-qa-db-ja.com

Flexsliderでの遅延読み込み

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

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

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

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

jqueryjquery-pluginslazy-loadingflexslider
16
Encore PTL

そこで、実際の画像ページをimageタグのdata-attr属性に追加し、after event fireで、activeクラスの画像を見つけて、imgsrc属性をdata-に設定しました。属性値。

0
Encore PTL

スクロール中に遅延読み込みを実装しました。このソリューションは、ここで提案する他のソリューションと比較して、大きなコレクションに適しています。初期化中に、最初の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");
            });
        }
    });
13
Roman Podlinov

この方法は私にとってはかなりうまく機能しますが、ロードする画像は他の画像と同じサイズである必要があります。私は実際に http://imageresizing.net/ with 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");
       });
     }
});

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

7
Tommy W

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

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

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

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

ただし、これは、flexsliderがアニメーション化するのではなく、すべてを一度に遅延ロードするだけです。

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

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

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

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

4
alexandria757

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

2
uknowit2

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

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

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

$jQ('.flex-viewport').find('img[data-original]').trigger('forceLazyLoad');
1
Carlos A. Cabrera