Images Not Lazy Loading

  • Resolved Anonymous User 14978628

    (@anonymized-14978628)


    5 years, 10 months ago

    Hi, This is the only lazy load plugin I have tried that doesn’t lazy load my images.

    I read the faq, but i’m not sure how to modify that with my theme.

    I need a lazy load plugin that works with the picture element, as all the others except for one, do not support this element.

    I am having trouble with the Extra/Divi theme by Elegant Themes. Do you know how to make your plugin compatible with this theme?

    I have found references to wp_get_attachment_image in several places in my theme.

    How do you recommend changing it to get_lazysizes_html( wp_get_attachment_image($id) as you suggest?

    Is there any reason this plugin doesn’t natively support wp_get_attachment_image?

    Like I said, this is the only lazy load plugin (and i tried them all) that didn’t work on my images.

    So it seems like this will limit the audience and uptake of this plugin, as many people will try it, see it doesn’t work, and then delete it.

    Which is a shame as if it does the same thing as the lazysizes plugin on github, then this is one of the best lazy load plugins available.

    Please make it more compatible so more people can benefit from it.

    Thanks

Viewing 15 replies - 31 through 45 (of 69 total)
1 2 3 4 5
  • Plugin Author Patrick Sletvold

    (@16patsle)

    5 years, 8 months ago

    I think I have fixed the issue now, will try to get a new beta out tomorrow.

    Plugin Author Patrick Sletvold

    (@16patsle)

    5 years, 8 months ago

    Hi @martychc23 ,
    According to my testing, the plugin should now work on the Extra theme. I’ve released version 0.5.1, could you test that? Does it work now, or if not, has anything changed?

    Thanks,
    Patrick Sletvold

    dutze

    (@dutze)

    5 years, 8 months ago

    Hi there 🙂

    I’m back and I tested version 0.5.1, but it seems like, it still doesn’t support the picture element – at least in my specific case.

    It should work, if I just change the “src”-attributes to “data-src”-attributes (and so on), right? Or have I missed something else?

    Thank you for your hard work, Patrick! 🙂

    PS: I’m using the theme “Astra”, but I don’t think it has something to do with that…

    • This reply was modified 5 years, 8 months ago by dutze.
    Plugin Author Patrick Sletvold

    (@16patsle)

    5 years, 8 months ago

    Hi @dutze, thanks,
    As far as I know, the picture element support should be working, could you send me an example of the html that causes it not to work so I can check if there’s a problem in the transforming code? Does normal images lazy load fine? And is the picture element inside post/page content, or another place?

    If you want to transform it manually, you need to change src to data-src, add a “lazyload” class, and in the cases of img tags also add a placeholder src. In v0.5.1 I added some logic to prevent transforming already lazy-loadable tags, so this should work fine.

    – Patrick Sletvold

    dutze

    (@dutze)

    5 years, 8 months ago

    Hi 🙂

    I changed back the “data-src” to “src” now and didn’t add a “lazyload” class on my picture tags – and the lazyloading of the (normal) picture elements works fine in Google Chrome (data-src and the “lazyload” class is added automatically onload by your plugin, right?) – but in Safari Browser (on an iPad) the images in the picture tags stay invisible…

    So these picture tags I described above are generated through a shortcode plugin on normal page- and also on post-content.

    But then I have another type of picture elements – these are generated in two steps:
    1) The shortcode generates some html
    2) My own custom Javascript generates more html from the html from 1) (It adds the source and the image tags and so on)

    These picture elements are ignored by your plugin and therefore they load on page load – but I want them to also be lazyloaded. Maybe the problem here is, that my Javascript from step 2) described above is running after your plugin? Do you have any tips for that, how I can change the “running order” of my custom javascript?

    I hope, everything was understandable, I can also give you some html code, if it’s needed. If something is unclear, just ask 🙂

    Plugin Author Patrick Sletvold

    (@16patsle)

    5 years, 8 months ago

    Hi,
    I’ll answer your questions one by one.

    data-src and the “lazyload” class is added automatically onload by your plugin, right?
    Sort of. The plugin transforms the page/post content right before the server sends it to your browser for viewing.

    Maybe the problem here is, that my Javascript from step 2) described above is running after your plugin?
    Most likely. Anything added via javascript will not be prepared for lazyload by the plugin, since the plugin transforms the content on the server. Though the lazysizes JS library that actually does the lazy loading will pick up any elements added to the page (using javascript) after it has loaded, and start the lazy loading process.

    To clarify, the lazy load process is in two parts:

    1. Prepare for lazy load. This is done on the server. Involves changing src to data-src (so the browser won’t start loading the image immediately) and adding a lazyload class.
    2. Do the actual lazy loading. This is done using the lazysizes JS library in your browser. Images with the lazyload class that are either visible on the screen, or just outside the viewport, will be loaded.

    Do you have any tips for that, how I can change the “running order” of my custom javascript?
    Since the transforming is done server side, the javascript will always run after it is done. This basically means you have to prepare the images for loading yourself. Just make sure it has a lazyload class and a data-src attribute, and the lazysizes javascript should notice it, and lazy load it when appropriate.

    Regarding the issue with Safari on iOS, could you send me the a HTML snippet where the issue exists, so I can see if I can reproduce?

    dutze

    (@dutze)

    5 years, 8 months ago

    Okay thank you again for clarifying how the plugin works and so on – I changed my own Javascript now (it sets the data-src attribute and the lazyload class) and it works now (My problem was that I added the lazyload class to the picture element instead of the img-element inside of the picture element ^^).

    The Safari problem affects every single picture element – it doesn’t matter if it’s on a page or a post. The normal images which are not lazyloaded (only post thumbnails in my case) and the background-images are still being displayed in Safari Mobile. I can send you a HTML snippet, but I think it has more to do with Safari itself, maybe?

    And I noticed another “bug” in your plugin (version 0.5.1) – some of the post content (whole parts of the html) are being duplicated before siteload. It really seems to be because of your plugin, because this duplication problem isn’t there, when I’ve disabled your plugin. Maybe there’s something wrong in the “replace code” of your plugin 🙂

    Thank you again, hopefully we can also fix these last problems! 🙂

    Plugin Author Patrick Sletvold

    (@16patsle)

    5 years, 8 months ago

    My problem was that I added the lazyload class to the picture element instead of the img-element inside of the picture element

    That sounds reasonable. I should probably mention that the source elements should have their srcset turned into data-scrset (and then you also need lazyload on the picture element I think).

    I’ll look into the lazy loading issues on Safari, would be great if you could still send me a HTML snippet, so I have somewhere to start reproducing.

    Regarding the duplication bug, that does seem pretty serious. Did you notice it before 0.5.1 or is it a new regression? Do you have any other plugins that might interfere? When thinking about it, this actually reminds me of an issue I stumbled upon during development of 0.5.1, but I can’t remember the specifics. Anyway, I’ll look into it.

    – Patrick Sletvold

    Thread Starter Anonymous User 14978628

    (@anonymized-14978628)

    5 years, 8 months ago

    Hi Patrick,

    Apologies for not getting back to you sooner, I have only been able to test this now.

    Lazy loading appears to be functioning correctly with my theme.

    The only issue is that images don’t lazy load when i’m using the picture element which i use with the following responsive images plugin:

    https://wordpress.org/plugins/responsify-wp/

    It works with the image tag, but not with the picture element.

    dutze

    (@dutze)

    5 years, 8 months ago

    Hi Patrick 🙂

    I tested a bit and here are my findings so far:

    The “safari problem” is different than I thought at first – the picture elements seem to load (almost – more on that below) fine on posts, but on pages I noticed the following problem on Chrome Mobile (Android) and Safari Mobile:

    If there’s only one picture element on the page, it won’t be displayed (maybe because it doesn’t get loaded). As soon as I add one or more picture elements to the page (it can be the same picture element as the first one), the images get loaded and displayed correctly. And when I then delete the added picture elements again, the single picture element is displayed correctly too (it’s loaded from the browser cache).

    Maybe it helps you to know that I’m using the Gutenberg Editor. And here’s the HTML of one of those picture elements (after loading the site on Chrome Desktop) which have been transformed by your plugin:

    <picture class="portrait-large lazyloaded">
      	<source type="image/webp" media="(max-width: 767px) and (min-width: 360px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 767px) and (min-width: 360px) and (min-resolution: 3dppx)" data-srcset="imageurl-600.webp" srcset="imageurl-600.webp">
      	<source type="image/jpeg" media="(max-width: 767px) and (min-width: 360px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 767px) and (min-width: 360px) and (min-resolution: 3dppx)" data-srcset="imageurl-600.jpg" srcset="imageurl-600.jpg">
      	<source type="image/webp" media="(max-width: 767px) and (min-width: 375px) and (-webkit-min-device-pixel-ratio: 2), (max-width: 767px) and (max-width: 375px) and (min-resolution: 2dppx)" data-srcset="imageurl-400.webp" srcset="imageurl-400.webp">
      	<source type="image/jpeg" media="(max-width: 767px) and (min-width: 375px) and (-webkit-min-device-pixel-ratio: 2), (max-width: 767px) and (max-width: 375px) and (min-resolution: 2dppx)" data-srcset="imageurl-400.jpg" srcset="imageurl-400.jpg">
      	<source type="image/webp" media="(max-width: 767px) and (-webkit-min-device-pixel-ratio: 1), (max-width: 767px) and (min-resolution: 1dppx), (max-width: 767px) and (max-width: 374px) and (-webkit-min-device-pixel-ratio: 2), (max-width: 767px) and (max-width: 374px) and (min-resolution: 2dppx)" data-srcset="imageurl-350.webp" srcset="imageurl-350.webp">
      	<source type="image/jpeg" media="(max-width: 767px) and (-webkit-min-device-pixel-ratio: 1), (max-width: 767px) and (min-resolution: 1dppx), (max-width: 767px) and (max-width: 374px) and (-webkit-min-device-pixel-ratio: 2), (max-width: 767px) and (max-width: 374px) and (min-resolution: 2dppx)" data-srcset="imageurl-350.jpg" srcset="imageurl-350.jpg">
      	<source type="image/webp" media="(min-width: 768px) and (-webkit-min-device-pixel-ratio: 2), (min-width: 768px) and (min-resolution: 2dppx)" data-srcset="imageurl-600.webp" srcset="imageurl-600.webp">
      	<source type="image/jpeg" media="(min-width: 768px) and (-webkit-min-device-pixel-ratio: 2), (min-width: 768px) and (min-resolution: 2dppx)" data-srcset="imageurl-600.jpg" srcset="imageurl-600.jpg">
      	<source type="image/webp" media="(min-width: 768px)" data-srcset="imageurl-300.webp" srcset="imageurl-300.webp">
      	<source type="image/jpeg" media="(min-width: 768px)" data-srcset="imageurl-300.jpg" srcset="imageurl-300.jpg">
      	<img src="imageurl-300.jpg" alt="Image" data-src="imageurl-300.jpg" class=" lazyloaded">
	</picture>

    (I changed the image URLs for better readability)

    And then there’s also the mentioned “duplication bug”, which I also did some tests with. These are my findings for now:

    As soon as there at least 3 picture elements on the page or post, some parts of the HTML will be duplicated. I noticed a different behaviour between posts and pages – I will explain it with 5 picture elements per page/post:

    1) On pages the picture elements 2,3,4 and 5 and the directly following content (I think only paragraphs in my case) will be duplicated as a whole after all 5 picture elements. So the picture order looks like this: 1,2,3,4,5,2,3,4,5 (instead of just 1,2,3,4,5).

    2) On posts almost the same happens – here only the picture elements 3,4,5 are duplicated. So here the picture order looks like this: 1,2,3,4,5,3,4,5 (instead of just 1,2,3,4,5).

    The picture elements I add with my custom Javascript are obviously not affected by this duplication bug.

    So, I hope this was helpful for you – if you have more questions, just ask 🙂

    dutze

    (@dutze)

    5 years, 8 months ago

    Hi Patrick,

    do you have any news on the bugs from above yet?

    Have a nice day!

    Plugin Author Patrick Sletvold

    (@16patsle)

    5 years, 8 months ago

    Hi,

    Sorry, I have been busy fixing something on another project of mine, so I haven’t looked too much into the bugs yet. Though I’m fairly certain I know what part of the code is responsible. Sorry for all the delays, I’ll keep you updated.

    – Patrick Sletvold

    dutze

    (@dutze)

    5 years, 8 months ago

    Yeah ok no problem! I just wanted to ask, how it’s going 🙂

    Plugin Author Patrick Sletvold

    (@16patsle)

    5 years, 8 months ago

    Hey everyone, just a quick update. I’m currently working on reproducing these last issues, so hopefully not too long until they’re fixed.

    Plugin Author Patrick Sletvold

    (@16patsle)

    5 years, 8 months ago

    Currently working on checking compatibility with the responsify-wp plugin. I’m able to reproduce the duplication bug at least with that plugin set to the picture option.

Viewing 15 replies - 31 through 45 (of 69 total)
1 2 3 4 5
  • The topic ‘Images Not Lazy Loading’ is closed to new replies.