4

bxslider (またはスライド/画像の動的な数を可能にするコントロールのような任意のスライダー)に画像を遅延読み込みしたい。画像を遅延ロードするために遅延ロードを使用していますが、スライダー内の画像が遅延ロードされていません。すべての画像がページと共にロードされています:|。ここに私のコードがあります、

<link href="jquery.bxslider.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="jquery.bxslider.js"></script>
    <script src="jquery.lazyload.js"></script>
    <script type="text/javascript" charset="utf-8">
    $(function() {

    $(":not(#hcontainer) img.lazy").lazyload({
        effect: "fadeIn"
      });

      $("img.lazy").lazyload({
        effect: "fadeIn",
        container: $("#hcontainer")
      });

    $('.bxslider').bxSlider({
      minSlides: 1,
      maxSlides: 3,
      slideWidth: 170,
      slideMargin: 10,
      pager: true
    });

    });
      </script>

    <style type="text/css">
    #hcontainer {
        height: 250px;
        overflow: hidden;
    }
    #inner_container {
          width: 900px;
        }
    </style>



    <div id="vcontainer">
      <div id="hcontainer">
        <div id="inner_container">
    <ul class="bxslider">
          <li><img class="lazy" src="1.jpg" data-original="1.jpg" alt="BMW M1 Hood"></li>   
    <li>      <img class="lazy" src="2.jpg" data-original="2.jpg" alt="BMW M1 Side"></li>
        <li>  <img class="lazy" src="3.jpg" data-original="3.jpg"  alt="Viper 1"></li>
        <li>  <img class="lazy" src="4.jpg" data-original="4.jpg" alt="Viper Corner"></li>
        <li>  <img class="lazy" src="5.jpg" data-original="5.jpg" alt="BMW M3 GT"></li>
        <li>  <img class="lazy" src="6.jpg" data-original="6.jpg" alt="Corvette Pitstop"></li>
    </ul>

        </div>
      </div>
      <br/>
      <img class="lazy img-responsive" data-original="2.jpg" width="465" height="574" alt="BMW M1 Side">
      <br/>
      <img class="lazy img-responsive" data-original="3.jpg" width="465" height="574" alt="Viper 1">
      <br/>
      <img class="lazy img-responsive" data-original="4.jpg" width="465" height="574" alt="Viper Corner">
      <br/>
      <img class="lazy img-responsive" data-original="5.jpg" width="465" height="574" alt="BMW M3 GT">
      <br/>
      <img class="lazy img-responsive" data-original="6.jpg" width="465" height="574" alt="Corvette Pitstop">
      <br/>
    </div>

私は何を間違っていますか？

ps遅延読み込みがサポートされていれば、他のスライダー コントロールを使用することもできます。

4

2 に答える 2

4

lazySizesを試すことをお勧めします。lazysizes は可視性の変化を自動的に検出するため、JS コードを記述してスライダーと統合する必要はありません。

必要なことは、 に置き換えsrc、data-srcクラス lazyload を画像に追加し、lazysizes スクリプトをページに追加することだけです。

<img data-src="image.jpg" class="lazyload" />

ここではいくつかの例を示します。

また、画像を強制的にプリロードしたい場合は、単純に class を追加してlazypreloadください。

于 2015-07-27T18:31:09.350 に答える