html data-lazy not displaying image (with slick)-CodePudding

Why my images are not displaying ? I dont see any images when I am using img data-lazy.

code:


                  <section >
                    <img data-lazy="img/s500/1.jpg" alt="Logo"  />
                    <img data-lazy="img/s500/2.jpg" alt="Logo"  />
                    <img data-lazy="img/s500/3.jpg" alt="Logo"  />
                    <img data-lazy="img/s500/4.jpg" alt="Logo"  />
                    <img data-lazy="img/s500/5.jpg" alt="Logo"  />
                    <img data-lazy="img/s500/6.jpg" alt="Logo"  />
                    <img data-lazy="img/s500/7.jpg" alt="Logo"  />
                    <img data-lazy="img/s500/8.jpg" alt="Logo"  />
                    <img data-lazy="img/s500/9.jpg" alt="Logo"  />
                    <img data-lazy="img/s500/10.jpg" alt="Logo"  />
                    <img data-lazy="img/s500/11.jpg" alt="Logo"  />
                    <img data-lazy="img/s500/12.jpg" alt="Logo"  />
                    <img data-lazy="img/s500/13.jpg" alt="Logo"  />
                    <img data-lazy="img/s500/14.jpg" alt="Logo"  />
                    <img data-lazy="img/s500/15.jpg" alt="Logo"  />
                    <img data-lazy="img/s500/16.jpg" alt="Logo"  />
                    <img data-lazy="img/s500/17.jpg" alt="Logo"  />
                    <img data-lazy="img/s500/18.jpg" alt="Logo"  />
                    <img data-lazy="img/s500/19.jpg" alt="Logo"  />
                    <img data-lazy="img/s500/20.jpg" alt="Logo"  />
                    <img data-lazy="img/s500/21.jpg" alt="Logo"  />
                    <img data-lazy="img/s500/22.jpg" alt="Logo"  />
                    <img data-lazy="img/s500/23.jpg" alt="Logo"  />
                  </section>

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="slick/slick.min.js"></script>
    <script>
      // Slider
      $(document).ready(function(){
      
        $('.col-car').slick({
          lazyLoad: 'ondemand',
        });

        $(document).on('beforeChange', '.col-car', function(event, slick, currentSlide, nextSlide){
        var nextSlide = slick.$slides.get(nextSlide);
        var $slideSoureSets = $(nextSlide).find('source');
        $($slideSoureSets).each(function () {
            $(this).attr('srcset', $(this).data('lazy'));
        });
            console.log(nextSlide);
        });

    });
    </script>

When I remove the data-lazy attribute and add src then its work but its not loading lazy. So what I am doing wrong ?

I get this console log when I swipe an image:

<img data-lazy="img/s500/5.jpg" alt="Logo"  data-slick-index="4" aria-hidden="false" tabindex="-1" style="width: 400px;">

CodePudding user response：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section >
                    <img data-lazy="img/s500/1.jpg" alt="Logo"  />
                    <img data-lazy="img/s500/2.jpg" alt="Logo"  />
                    <img data-lazy="img/s500/3.jpg" alt="Logo"  />
                    <img data-lazy="img/s500/4.jpg" alt="Logo"  />
                    <img data-lazy="img/s500/5.jpg" alt="Logo"  />
                    <img data-lazy="img/s500/6.jpg" alt="Logo"  />
                    <img data-lazy="img/s500/7.jpg" alt="Logo"  />
                    <img data-lazy="img/s500/8.jpg" alt="Logo"  />
                    <img data-lazy="img/s500/9.jpg" alt="Logo"  />
                    <img data-lazy="img/s500/10.jpg" alt="Logo"  />
                    <img data-lazy="img/s500/11.jpg" alt="Logo"  />
                    <img data-lazy="img/s500/12.jpg" alt="Logo"  />
                    <img data-lazy="img/s500/13.jpg" alt="Logo"  />
                    <img data-lazy="img/s500/14.jpg" alt="Logo"  />
                    <img data-lazy="img/s500/15.jpg" alt="Logo"  />
                    <img data-lazy="img/s500/16.jpg" alt="Logo"  />
                    <img data-lazy="img/s500/17.jpg" alt="Logo"  />
                    <img data-lazy="img/s500/18.jpg" alt="Logo"  />
                    <img data-lazy="img/s500/19.jpg" alt="Logo"  />
                    <img data-lazy="img/s500/20.jpg" alt="Logo"  />
                    <img data-lazy="img/s500/21.jpg" alt="Logo"  />
                    <img data-lazy="img/s500/22.jpg" alt="Logo"  />
                    <img data-lazy="img/s500/23.jpg" alt="Logo"  />
                  </section>

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="slick/slick.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js" type="text/javascript"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="lazy-load.js"></script>
<link href="lazy-slide.css">
    <script>
      // Slider
      $(document).ready(function(){
      
        $('.col-car').slick({
          lazyLoad: 'ondemand',
        });

        $(document).on('beforeChange', '.col-car', function(event, slick, currentSlide, nextSlide){
        var nextSlide = slick.$slides.get(nextSlide);
        var $slideSoureSets = $(nextSlide).find('source');
        $($slideSoureSets).each(function () {
            $(this).attr('srcset', $(this).data('lazy'));
        });
            console.log(nextSlide);
        });

    });
    </script>

strong text

CodePudding user response：

I solved it by wrapped all images with a section like:

<section>
 <img .../>
</section>