Vanilla-lazyload: Empty src attribute link to image.

Created on 1 Sep 2017 · 6Comments · Source: verlok/vanilla-lazyload

I using lazyload in my Laravel app.

@foreach($products as $product) 
        <div class="pic">
            <img data-src="/storage/{{$product->image}}" data-srcset="/storage/{{$product->image}} 200w, /storage/{{$product->image}} 400w"
sizes="(min-width: 20em) 35vw, 100vw" alt="">
        </div>
@endforeach

Typical, its only like:

<img src="/storage/{{$product->image}}">

Using it show like:

<img data-src="/storage/products/August2017/rpO6OvnpxRPqn3GoxErq.png" data-srcset="/storage/products/August2017/rpO6OvnpxRPqn3GoxErq.png 200w, /storage/products/August2017/rpO6OvnpxRPqn3GoxErq.png 400w" sizes="(min-width: 20em) 35vw, 100vw" alt="" class="loading" data-was-processed="true">]

I test with the same image on both 200w and 400w.

It generates class loading and data-was-processed=true, but I can't find src attribute like I run the demo from lazydoad.

And đon't have any image show on my HTML page.

Source

vanloc0301

Most helpful comment

When you solved, please close this issue

verlok on 2 Sep 2017

🎉1 👍1

All 6 comments

Thanks for reporting this issue.
Can you report the JavaScript code you're using?

verlok on 1 Sep 2017

I follow at #Responsive images - srcset and sizes from Readme.md:

Full code (Laravel blade template include CSS and JS file):

<head>
        <style>
                img:not([src]):not([srcset]) {
            visibility: hidden;
        }
    </style>
</head>
<body>
@foreach($products as $product) 
        <div class="pic">
            <img data-src="/storage/{{$product->image}}" data-srcset="/storage/{{$product->image}} 200w,
                                     /storage/{{$product->image}} 400w" sizes="200px" alt="">
        </div>
@endforeach
<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/9.0.1/lazyload.min.js"></script>

<script>
        var myLazyLoad = new LazyLoad();
</script>

</body>

I think lazyload is working because it auto generate: class="loading" and data-was-processed="true" when I run my project.

I tested on master\demos\with_srcset_sizes.html. When running this file, it auto generates element has src attribute have URL to image same with data-src. In my project don't have this attribute and don't show any image.

vanloc0301 on 2 Sep 2017

From the description on LazyLoad:

LazyLoad is a fast, lightweight and flexible script to allow you enhance performance on your website by loading images only as they enter (or are about to enter) the viewport or a scrollable area, with best support to the img srcset attribute and to the progressive JPEG image format.

My image is .png file. Is that the problem?

vanloc0301 on 2 Sep 2017

I got the problem: you are using version 9.0.1 instead of 10.0.1, and you're using the default options from version 10.
Just use the newest version and it will work.

verlok on 2 Sep 2017

👍1

When you solved, please close this issue

verlok on 2 Sep 2017

🎉1 👍1

@verlok sorry, I'm not online about 1 weeks. It's working. Thank you very much.

vanloc0301 on 8 Sep 2017

Was this page helpful?

0 / 5 - 0 ratings