Why doesn’t load images from top to bottom as Lazysizes original script does?

I’m not sure I understand. This plugin should behave just like the lazysizes library does when used directly with the same settings. It only rewrites the HTML so the JS library can do it’s job. Or are you referring to the lazysizes JavaScript plugins which extend the functionality of the library?

Best regards,
Patrick Sletvold

Oh well not sure why then.. What happens is that the image is displayed after it has been completely downloaded, on the other hand it should be progressively loading the image form top to bottom as soon as each part is downloaded, like in this picture https://drive.google.com/open?id=1BqW4xpuxs3_XCYptDS8eAdMPFOgo2H9q

• This reply was modified 4 years, 10 months ago by snippet24.

I see what you mean now. I’m seeing the same here, not sure how it can be fixed. I think it would mostly be useful for progressive images, where the whole image is rendered in low quality first, but then increasingly higher quality.

Supposedly it happens when an image’s source is changed, causing the browser to continue showing the last image until the new one is ready. Which in most cases would be what you want, though not always in the case of lazy loading. There’s a progressive plugin for lazysizes, but it seems to require using the LQIP pattern, which this plugin does not support, at least not right now.

So I’m not too sure what to do about this, really. Currently it doesn’t seem solvable, and it’s not very high priority to fix either, since most users (of both this plugin and the lazysizes library) seem fine with the current behaviour. If I do implement LQIP in the future, I will of course attempt to offer an option for the progressive plugin.

Best regards,
Patrick Sletvold

The odd thing is I used vanilla lazysizes script on tomastestart.cl and seems to load as I would like to (progressively) unless I’m doing something wrong there.
Kind Regards

Looking at that page it seems like your images (at least the one with the computer/phone etc at the top, didn’t look at any others) only have a data-src, but no src. While this technically works, and avoids the issue above, because there is no changing from one image to the next, it may cause some issues (it’s technically not valid HTML, since the img tag has no src-attribute). One of the issues is that the image is shown as a broken image icon until it loads, though you can solve this with CSS. This plugin instead solves it by placing a tiny transparent image in the src attribute to avoid any issues caused by a missing src attribute. I could maybe make it an option, to instead load CSS to hide the broken icon and skip adding a src, I’ll see how doable it is. Let me know if that’d be useful to you.

Best regards,
Patrick Sletvold

Here’s the code of the image seems like it has data-src and src..

<img class="img-fluid-custom justify-content-end lazyloaded" data-src="https://tomastestart.cl/wp-content/themes/tomastestart/img/imagen-jumbotronv2.png" alt="Creación de Sitios Web con Excelencia, ética y Pasión" src="https://tomastestart.cl/wp-content/themes/tomastestart/img/imagen-jumbotronv2.png">

Kind regards

It does, but as you can see in the classes, it has the lazyloaded class, which means lazysizes already processed it. If you use view source in the browser, it shows the source as it was sent from the server, which gives the following code (note the lack of src):

<img class="img-fluid-custom justify-content-end lazyload" data-src="https://tomastestart.cl/wp-content/themes/tomastestart/img/imagen-jumbotronv2.png" alt="Creación de Sitios Web con Excelencia, ética y Pasión">

Best regards,
Patrick Sletvold

That said, I need to do some more testing to see if my theory is correct. If it is, I’ll implement an option for it in the plugin.

Best regards,
Patrick Sletvold

After doing some tests, I’ve confirmed that this is how it works, and have implemented it in the plugin, to be included in version 1.3.0. It’s not going to come out quite yet as I have other stuff to implement first, but if you’d like to use the functionality you can download an early version here.

Best regards,
Patrick Sletvold

Great ?? Thank you so much!!
Leaving a 5 stars review ??
Kind regards