Javascript 如何整合lazyload&；你们在一起吗？

我想在中惰性地加载图像（或任何类似滑块的控件，它允许动态的幻灯片/图像数量）。我使用lazyload延迟加载图像，但滑块中的图像没有延迟加载。所有图像都将加载以下页面：|。这是我的密码

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

$（函数（）{
$（“：not（#hcontainer）img.lazy”）.lazyload({
效果：“法丹”
});
$（“img.lazy”）.lazyload({
效果：“法登”，
容器：$（“容器”）
});
$（'.bxslider'）.bxslider({
米斯利德斯：1，
maxSlides:3，
滑动宽度：170，
幻灯片摘要：10，
寻呼机：对
});
});
#H容器{
高度：250px；
溢出：隐藏；
}
#内胆{
宽度：900px；
}

我做错了什么

---

p.s.如果其他滑块控件支持lazyloading，我愿意使用它。

我建议您试试。lazysizes会自动检测可见性的变化，因此无需编写任何JS代码即可将其与滑块集成

您需要做的一切就是将

src

替换为

datasrc

，将类lazyload添加到图像中，并将lazysizes脚本添加到页面中

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

以下是一些例子：

如果您想强制预加载图像，只需添加类

lazypreload

即可使用以下代码：

<div class="slider">
  <div>
    <img src="http://placekitten.com/400/200">
  </div>
  <div>
    <img class="lazy" src="http://www.llbean.com/images/spacer.gif" data-src="http://placekitten.com/450/200">
  </div>
  <div>
    <img class="lazy" src="http://www.llbean.com/images/spacer.gif" data-src="http://placekitten.com/500/200">
  </div>
</div>

$(function(){

    // create an options object to store your slider settings
    var slider_config = {
        mode: 'horizontal', // place all slider options here
        onSlideBefore: function($slideElement, oldIndex, newIndex){
            var $lazy = $slideElement.find(".lazy")
            var $load = $lazy.attr("data-src");
            $lazy.attr("src",$load).removeClass("lazy");
        }
    }
    // init the slider with your options
    var slider = $('.slider').bxSlider(slider_config);
});

$（函数（）{
//创建选项对象以存储滑块设置
变量滑块\u配置={
模式：'水平'，//将所有滑块选项放在此处
onSlideBefore:函数（$slideElement、oldIndex、newIndex）{
var$lazy=$slideElement.find（“.lazy”）
var$load=$lazy.attr（“数据src”）；
$lazy.attr（“src”），$load.removeClass（“lazy”）；
}
}
//使用您的选项初始化滑块
var slider=$（'.slider'）.bxSlider（slider\u config）；
});

您仍然有使用src属性的图像。要使layloading正常工作，您需要删除所有src属性。如果我删除了

src

，那么bxslider没有加载图像：|您能制作一个js提琴让我们玩一下吗？我不知道，如何上传bxslider和layload脚本：|。您可以共享一个文件主机，我可以在其中上载这些文件并将其添加到JSFIDLE吗？我为您创建了这个JSFIDLE。我做了一些修改，我认为它应该可以工作。基本上，我删除了所有的src属性和$（“：not（#hcontainer）img.lazy”）调用以及第二个lazyload调用的container属性。很好！你能帮我添加触摸刷事件吗？我的意思是，我使用bxslider是因为它隐式地处理移动触摸事件。我们可以在这里做同样的事情吗？lazySizes也可以使用开箱即用的bxSlider。这些例子只是例子。因此，只需将bxSlider与lazySizes和done一起使用即可。尽管我认为flickity是目前最好的幻灯片之一。