CDN 未使用 slick_slider 中的延迟加载图像

Question

我的滑块有问题。我们使用了我们非常喜欢的Slick slider。但是我们通过开发工具注意到我们的 CDN 只使用了我们滑块中的第一个图像。而其他使用延迟加载功能的 CDN 并未使用

This is how the cdn works

我们使用 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="" 而其他图像使用 data-lazy=""

slick slider 内置了这个延迟加载功能 - 如果您在该链接上点击 ctrl+f 并搜索“延迟”，您可以在 github 页面上看到他们如何引用它

我的问题是我们的 CDN 没有使用依赖 data-lazy="" 进行延迟加载的图像。但是，如果我只是将它们更改为 src="" 并保存，当我签入开发工具时，它会显示它们全部由 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="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg">
</div>
<div>
  <img data-lazy="https://image.shutterstock.com/image-photo/mountains-under-mist-morning-amazing-260nw-1725825019.jpg">
</div>
<div>
  <img data-lazy="https://images.ctfassets.net/hrltx12pl8hq/3MbF54EhWUhsXunc5Keueb/60774fbbff86e6bf6776f1e17a8016b4/04-nature_721703848.jpg?fit=fill&w=480&h=270">
</div>
<div>
  <img data-lazy="https://www.readree.com/wp-content/uploads/2021/01/Search-Engines-That-Search-for-Duplicate-images.jpg">
</div>
<div>
  <img data-lazy="https://www.readree.com/wp-content/uploads/2021/01/Search-Engines-That-Search-for-Duplicate-images.jpg">
</div>
<div>
  <img data-lazy="https://vinusimages.co/wp-content/uploads/2018/10/EG7A2390.jpgA_.jpg">
</div>
  <div>
  <img data-lazy="https://thumbs.dreamstime.com/b/environment-earth-day-hands-trees-growing-seedlings-bokeh-green-background-female-hand-holding-tree-nature-field-gra-130247647.jpg">
</div>
  <div>
  <img data-lazy="https://static.toiimg.com/thumb/msid-54559212,width-748,height-499,resizemode=4,imgsize-307081/.jpg">
</div>
  <div>
  <img data-lazy="https://st.depositphotos.com/1428083/2946/i/600/depositphotos_29460297-stock-photo-bird-cage.jpg">
</div>
  <div>
  <img data-lazy="https://www.whatsappimages.in/wp-content/uploads/2021/01/Boys-Feeling-Very-Sad-Images-Pics-Downlaod.jpg">
</div>
  </section>

Answer 2

在 IMG SRC 中添加“data-lazy”，它适用于延迟加载图像。