Images Not Lazy Loading

Ah ok, that’s good to hear! But just to clarify this: I don’t use any plugin like the responsify-wp – the only thing I’m using is the Shortcoder plugin and my own Javascript to build the picture elements ??

If you need more testing or info from me, just let me know ??

Yes, I was aware you don’t use that plugin, though I’m fairly certain it’s causing the same issue as you have with regards to the duplication. I’m still not sure what’s causing it, but I have made decent progress towards finding the source.

Good news, I think I have found and fixed the bug causing the duplication. It was due to a small error in one of the regular expressions that I didn’t discover because I apparently never tested with more than one picture element. With each picture element, the others later on in the document would transform too, causing the duplication. I can put out another beta for you to test as soon as possible. Thanks for your patience.

Version 0.5.2-beta should be free of duplication bugs, though let me know if that turns out not to be the case. I have yet to look into the other issues you folks mentioned, like the safari issue (probably going to be the next thing I look into, if it’s still a problem).

• This reply was modified 5 years, 7 months ago by Patrick Sletvold.

Great! I tested 0.5.2-beta and the duplication bug really seems to be solved. If I notice something different in the future, I will let you know.

The safari issue is still there, I think nothing has changed there (I only tested it very quickly). To remind you again: I use an old iPad – the problem may disappear on newer devices or the Safari desktop version – but I haven’t tested this.

I’m really thankful for your work, great stuff!

Hi, Testing with picture element and responsify wp, images are still not lazy loading with the new beta.

Hi @martychc23. Just to clarify, you are using the responsify-wp plugin in picture mode to transform the images to use picture elements? In that case, have you tried if disabling the picturefill option in the responsify-wp settings changes anything. I noticed some weird results at one point and turning that option off seemed to help. If that is indeed the case for you, I’ll see if I can fix the issue with it turned on. I’ll investigate more, and at the very least see if I can figure out where the weird behavior is coming from.

Hi Patrick, yes i’m using the responsify-wp plugin. Picturefill is turned off.

Just a heads up, I have a few days now where I’ll probably be able to work on fixing these issues.

@martychc23 lazyloading worked with responsify-wp off, right? So it’s probably a compatibility issue with that plugin. It would be great if you could test if you get the same issue when using another theme along with responsify-wp too, though I’d understand if that’s not feasible to do.

Thanks,
Patrick Sletvold

Hey Patrick,

Lazy load worked without the Responsify WP plugin, but i need that plugin to use the picture element. I don’t know how to use the picture element without it unfortunately. The same issue occurs with other themes also.

Thanks, just needed to confirm that, so I know what to look for. I’ll look into it today.

Hey Patrick ??

I’ve noticed another “bug”, maybe you could also look into that:

Your plugin generates “noscript” tags after every picture tag. And sometimes even after every source tag inside of the picture tags. The noscript tags contain *something* like the preceding HTML, but it’s the original HTML (not transformed by your plugin).

Here’s an example – the first code is the original HTML, when I disable your plugin:

<picture class="39" id="250" style="height: 250px;">
	<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)" srcset="m3.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)" srcset="m3.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)" srcset="m2.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)" srcset="m2.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)" srcset="m1.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)" srcset="m1.jpg">
    <source type="image/webp" media="(min-width: 768px)" srcset="d1.webp">
    <source type="image/jpeg" media="(min-width: 768px)" srcset="d1.jpg">
    <img alt="Alt" src="d1.jpg">
</picture>

And this is the HTML, when your plugin is activated:

<picture class="39" id="250" style="height: 250px;">
    <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="m3.webp" srcset="m3.webp">
	<noscript><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)" srcset="m3.webp"></noscript>
    <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="m3.jpg" srcset="m3.jpg">
	<noscript><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)" srcset="m3.jpg"></noscript>
    <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="m2.webp" srcset="m2.webp">
	<noscript><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)" srcset="m2.webp"></noscript>
    <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="m2.jpg" srcset="m2.jpg">
	<noscript><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)" srcset="m2.jpg"></noscript>
    <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="m1.webp" srcset="m1.webp">
	<noscript><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)" srcset="m1.webp"></noscript>
    <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="m1.jpg" srcset="m1.jpg">
	<noscript><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)" srcset="m1.jpg"></noscript>
    <source type="image/webp" media="(min-width: 768px)" data-srcset="d1.webp" srcset="d1.webp">
	<noscript><source type="image/webp" media="(min-width: 768px)" srcset="d1.webp"></noscript>
    <source type="image/jpeg" media="(min-width: 768px)" data-srcset="d1.jpg" srcset="d1.jpg">
	<noscript><source type="image/jpeg" media="(min-width: 768px)" srcset="d1.jpg"></noscript>
    <img src="d1.jpg" alt="Alt" data-src="d1.jpg" class=" lazyloaded">
	<noscript><img alt="Alt" src="d1.jpg"></noscript>
</picture>
<noscript>
	<picture class="39" id="250">
        <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)" srcset="m3.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)" srcset="m3.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)" srcset="m2.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)" srcset="m2.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)" srcset="m1.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)" srcset="m1.jpg">
        <source type="image/webp" media="(min-width: 768px)" srcset="d1.webp">
        <source type="image/jpeg" media="(min-width: 768px)" srcset="d1.jpg">
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="Alt" data-src="d1.jpg" class="lazyload">
		<noscript><img alt="Alt" src="d1.jpg">
</noscript>

I hope, this helps. If you need more info or tests, just let me know.

Have a great day! ??

The noscript tags after the picture tags are to have a fallback when js is disabled, but they shouldn’t be generated for the source tags. I’ll have a look at that. I’ll probably add a toggle to disable the noscript tags while I’m at it.

Yeah that would be great! ??

The noscript after the picture is supposed to be untouched, but I see now that the image in there has been transformed as well. I’ll add that to my list.