slick_sliderのレイジーロードイメージがCDNによって使用されていません

Question

私のスライダに問題があります。私たちは非常に好きなSlick sliderを使用します。しかし、私たちはdevツールを使って、私たちのスライダの最初のイメージだけが私たちのCDNによって使用されていることに気付きました。遅延ロード機能を使用している他は

This is how the cdn works

CDN

で使用されていない間に私たちは、WordPressのサイトをホストするためにwpengine.comを使用しています。彼らは私たちのインストールに組み込まれているmax-cdnを持っています。サイトで使用している、またはメディアライブラリにアップロードしているすべての画像は、開発ツールで見ると「CDN」リンクです。

だから、私たちのheader.phpの中で、私たちはこのようなスライダーのHTMLがあります。

<section class="lazy fade single-item slider" style="max-height:324px; 
overflow:hidden;"> 
    <a class="slide-link" href="#"> 
     <div> 
      <img src="/images/img1.jpg"> 
     </div> 
    </a> 
    <a class="slide-link laz-slide" href="#"> 
     <div> 
      <img data-lazy="/images/img2.jpg"> 
     </div> 
    </a> 
    <a class="slide-link laz-slide" href="#"> 
     <div> 
      <img data-lazy="/images/img3.jpg"> 
     </div> 
    </a> 
</section> 

をあなたは他の画像はデータ遅延を使用している間、最初のイメージタグがSRC =「」を使用していることがわかります=「」

この遅延ロード機能をslick sliderに組み込まれています - あなたがそのリンク上 fをはCtrl +を押すと検索すると、「怠惰な」あなたはgithubのページに、彼らはそれを参照する方法を見ることができます

私の問題は、data-lazy = ""をレイジーローディングに使用しているイメージが、CDNで使用されていないことです。しかし、単にsrc = ""に変更して保存すると、devツールでチェックすると、すべてが読み込まれていることが表示されます。CDN

誰でも私のslick sliderイメージに遅延ロードとCDNの両方を使用できる比較的単純なソリューションを考えてもらえますか？

おかげ

Answer 1

ハイその私のために働いて...この例CODEPEN

$(document).on('ready', function() { 
 
     $(".regular").slick({ 
 
     lazyLoad: 'ondemand', 
 
     infinite: true, 
 
     slidesToShow: 3, 
 
     slidesToScroll: 1 
 
     }); 
 
     
 
    });

.slider { 
 
     width: 50%; 
 
     margin: 100px auto; 
 
    } 
 

 
    .slick-slide { 
 
     margin: 0px 20px; 
 
    } 
 

 
    .slick-slide img { 
 
     width: 100%; 
 
    } 
 

 
    .slick-prev:before, 
 
    .slick-next:before { 
 
     color: black !important; 
 
    }

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css" rel="stylesheet"/> 
 
<script src="https://code.jquery.com/jquery-2.1.1.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script> 
 
<section class="regular slider"> 
 
    <div> 
 
     <img data-lazy="http://placehold.it/400x400?text=1"> 
 
    </div> 
 
    <div> 
 
     <img data-lazy="http://placehold.it/400x400?text=2"> 
 
    </div> 
 
    <div> 
 
     <img data-lazy="http://placehold.it/400x400?text=3"> 
 
    </div> 
 
    <div> 
 
     <img data-lazy="http://placehold.it/400x400?text=4"> 
 
    </div> 
 
    <div> 
 
     <img data-lazy="http://placehold.it/400x400?text=5"> 
 
    </div> 
 
    <div> 
 
     <img data-lazy="http://placehold.it/400x400?text=6"> 
 
    </div> 
 
    <div> 
 
     <img data-lazy="http://placehold.it/400x400?text=7"> 
 
    </div> 
 
    <div> 
 
     <img data-lazy="http://placehold.it/400x400?text=8"> 
 
    </div> 
 
    <div> 
 
     <img data-lazy="http://placehold.it/400x400?text=9"> 
 
    </div> 
 
    <div> 
 
     <img data-lazy="http://placehold.it/400x400?text=10"> 
 
    </div> 
 
    </section>

を、コードをチェックし、確認してください