Image not lazyloading

  • Resolved wprox

    (@wprox)


    7 years, 11 months ago

    Hi Florian,

    Thank you for the great plugin 🙂

    I am trying to use responsive image with the picture element. I am able to get WP to generate srcset for my “source” as well as the img.

    However, the code in the DOM of the one source I’ve added for art direction looks like this:
    <source media=”media query” src=”Desktop-1920-x-631.jpg” sizes=”100vw” class=”wp-image-3″ srcset=”Desktop-1920-x-631.jpg 1920w, Desktop-1920-x-631-300×99.jpg 300w, Desktop-1920-x-631-768×252.jpg 768w, etc”>

    When this media query is true, it loads the right image from source, but does not lazy load it.
    When this media query is false, lazysizes loads the right image from the img section below the source.

    According to lazysizes: The picture element is also supported. Simply add the lazyload class to the img and use data-srcset on your source and the img element.
    The img element is fine with data-sizes and data-srcset, the “data” is not being added to the source.

    Thanks for your help!

Viewing 15 replies - 1 through 15 (of 18 total)
1 2
  • Plugin Author Florian Brinkmann

    (@florianbrinkmann)

    7 years, 11 months ago

    Hey,

    yes, the plugin does not support modifying markup of picture elements currently. I added it to my list for a future release, but cannot say when I will have time to implement it. I will let you know if it is ready for testing 🙂

    Best,
    Florian

    Thread Starter wprox

    (@wprox)

    7 years, 11 months ago

    Thanks for the quick response Florian 🙂

    Any suggestions of code solutions that might take care of this for me, that I can implement along with the plugin, perhaps something I can put into functions.php?

    Or is it way more complicated than that / really needs to be integrated into the overall plugin functionality php?

    I tried to think of different solutions before opening this ticket, like using jquery to change attribute name to data-, but then when I looked at your plugin code, figured I’d follow up with you for better solutions…

    Thanks again 🙂

    Plugin Author Florian Brinkmann

    (@florianbrinkmann)

    7 years, 11 months ago

    Hi wprox,

    I think it is not that difficult to get it working, maybe I can implement it in the next few days.

    If you would like to help, the following would be the way to go, I think: add a check for the source element like it is done for img (https://github.com/florianbrinkmann/lazy-loading-responsive-images/blob/master/src/Plugin.php#L196) and create a new method for modifying its markup, similar to modify_img_markup. There also needs to be a check for the srcset attribute, because the source element could also be part of audio or video elements.

    Best,
    Florian

    Thread Starter wprox

    (@wprox)

    7 years, 11 months ago

    Thanks Florian. Unfortunately, I’m not advanced enough in php / js currently to make those changes with a decent understanding of what I’m doing… Hope to check out some tutorials at some point to have a better sense of what is happening in code like this…

    Plugin Author Florian Brinkmann

    (@florianbrinkmann)

    7 years, 11 months ago

    Okay, no problem 🙂 I will try to implement it this week and will let you know when there is something to test, would be great if you could give it a try then before the release on WordPress.org 🙂

    Best,
    Florian

    Thread Starter wprox

    (@wprox)

    7 years, 11 months ago

    Sounds great Florian, thank you!

    Plugin Author Florian Brinkmann

    (@florianbrinkmann)

    7 years, 11 months ago

    Hi wprox,

    would you give the beta from GitHub a try (https://github.com/florianbrinkmann/lazy-loading-responsive-images/releases/tag/v3.4.0-beta.1 – the lazy-loading-responsive-images.zip)?

    That would be cool.

    Thanks in advance,
    Florian

    Thread Starter wprox

    (@wprox)

    7 years, 11 months ago

    Thank you Florian 🙂

    The data- is appended nicely in source, but couple of questions:

    1. I am getting a <noscript> element PER SOURCE (I have 3 source elements) + another with img. Is it supposed to be like that (4 <noscript> elements) OR just 1 <noscript> element for the entire picture element? When I block js, the img <noscript> is the one that is highlighted in chrome dev tools, NOT the source <noscript> element with the matching media query.

    2. In the img element: in addition to my sizes attribute, it adds a matching data-sizes attribute. I never use data-sizes=”auto”. According to lazysizes github:
    lazySizesConfig.sizesAttr (default: “data-sizes”): The attribute, which should be transformed to sizes. Makes almost only makes sense with the value “auto”. Otherwise the sizes attribute should be used directly.
    I also have a sizes attribute in one of the sources, but the plugin does NOT add a data-sizes in there.

    Thanks again!

    Plugin Author Florian Brinkmann

    (@florianbrinkmann)

    7 years, 11 months ago

    Hey @wprox,

    thanks for testing!

    Mh, yes, wrapping the whole picture into a noscript seems to be the correct way, your are right. I will adjust this.

    To your second point: Oh, did not read this in the docs, thanks for the hint! I will adjust this, so that the plugin checks if there is another value than auto in sizes and then skip the modification of the attribute to data-sizes. And also add this to the method for the source element. Maybe I will not be able to release a new version for testing with all that this week – the thing with wrapping the whole picture might be a little trickier 🙂

    Thanks,
    Florian

    Thread Starter wprox

    (@wprox)

    7 years, 11 months ago

    Thank you Florian 🙂

    Plugin Author Florian Brinkmann

    (@florianbrinkmann)

    7 years, 10 months ago

    Hey @wprox,

    could you give the second beta version a try (https://github.com/florianbrinkmann/lazy-loading-responsive-images/releases/tag/v3.4.0-beta.2)?

    Thanks in advance,
    Florian

    Thread Starter wprox

    (@wprox)

    7 years, 10 months ago

    Thanks Florian!

    The data-sizes is gone, which is good.

    The noscript wrapping around the entire picture element is causing 2 images from the picture element to get downloaded: the first source srcset and the img src. It would be nice if the picture element logic could still be used in noscript, but I’m not sure how to do that…

    Take a look at any of the images on this page, they are using lazysizes:
    https://images.guide/#jpeg-compression-modes

    They just wrap the noscript tag around the img in the picture element…

    Thanks!

    Plugin Author Florian Brinkmann

    (@florianbrinkmann)

    7 years, 10 months ago

    Oh yes, you are right, it downloads two images, thanks for noticing that!

    But if I only wrap the img in a noscript, if JavaScript is disabled I just have the image from the img element as a fallback, not the ones defined in the source elements (because of the data-srcset attributes)…

    I will look into it and try to find a fix!

    Thread Starter wprox

    (@wprox)

    7 years, 10 months ago

    I do have srcset inside my img tag, but like you said, it does not include the images defined in the source elements above.

    Not sure if this is helpful, but looks like he was trying to do something similar:
    https://stackoverflow.com/questions/29145354/dry-lazy-loaded-images-with-noscript-fallback

    Thanks!

    Thread Starter wprox

    (@wprox)

    7 years, 10 months ago

    Hi Florian,

    With the second beta version that I downloaded, I just noticed that WITH js enabled, it automatically downloads 2 images: Index first downloads the src file inside img (not the matching width srcset file inside img), and then lazysizes downloads the correct source image that it should actually download.

    I’m assuming once you fix the code, it should fix this…

Viewing 15 replies - 1 through 15 (of 18 total)
1 2

The topic ‘Image not lazyloading’ is closed to new replies.