slick_slider中的懶惰加載圖像未被CDN使用

我遇到了滑塊問題。我們使用我們非常喜歡的Slick slider ..但是我們注意到通過開發工具，我們的CDN中只有我們滑塊中的第一個圖像被使用。雖然沒有被使用的CDNslick_slider中的懶惰加載圖像未被CDN使用

其使用懶加載功能其他我們使用wpengine.com來承載我們的WordPress網站。他們在我們的安裝中內置了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 - 如果你打CTRL +該鏈接F上而求索「懶」，你可以看到他們是如何引用它GitHub的頁面

0123上

我的問題是，那些relyig上數據懶形象=「懶加載未使用」我們CDN。但是，如果我只是將它們更改爲src =「」並保存，當我檢查開發工具時，它顯示它們全部由加載CDN。

任何人都可以想到一個相對簡單的解決方案，允許我使用延遲加載和CDN爲我的slick slider圖像？

感謝

來源

2017-06-17 Patrick

海它的工作對我來說...請檢查代碼，並檢查這個例子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>

來源

2017-08-11 10:34:15

slick_slider中的懶惰加載圖像未被CDN使用

回答

相關問題