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使用

回答

相关问题