Anchors don’t work

Hey,

could you provide links to both pages – yours and the one where it works like expected? ??

Thanks
Florian

Thanks Florian!

My page is private.

Works perfectly on: https://images.guide/ goto “Table of Contents”, pull down arrow, test links to sections towards bottom of page, so fast and lazy loading all images

Anything they’re doing on that page / I would need to add on top of your plugin to get that?

Thank you ??

Hi,

do you have some smooth scroll plugin or something like that active? So that the jump to the anchor is not a jump but a smooth scrolling? If so, that is the problem. Without smooth scrolling it should work.

Best Regards,
Florian

Thanks Florian, I did have smooth scrolling enabled in my Divi theme, but disabling it made no difference. With that feature enabled, the anchors work just fine without the lazyload plugin. Seems to be lazyload related.

I am also noticing that the plugin is causing me to have BOTH data-src and src- which I don’t think I’m supposed to have right, just the data-…

So, my img tags look like this:
img data-sizes= data-srcset= data-src= sizes= srcset= src=

Help???

That is correct that you have both attributes. The script handles that – without a src you would not see an image ??

Without having a look at the actual page where the problem exists, I can only guess the reason. Are there images very near above the anchor link? If so, maybe the script loads these images although they are not in the viewport, because it also loads images that are near the current viewport (see the lazySizesConfig.expand option for that). You could try to set it to 0, but then you would need to live with images that only start loading when in viewport.

Thanks Florian!

So seeing this in my DOM html in Inspect after loading the page is correct:

img alt="alt text." width="1920" height="1600" class="alignleft size-full wp-image-3 lazyloaded" data-sizes=“(max-width: 1920px) 1080px, 80vw” data-srcset=“https://domain.com/a.jpg 1920w, https://domain.com/a.jpg-300×250.jpg 300w, https://domain.com/a.jpg-768×640.jpg 768w, https://domain.com/a.jpg-1024×853.jpg 1024w, https://domain.com/a.jpg 1080w” data-src=“https://domain.com/a.jpg” sizes=“(max-width: 1920px) 1080px, 80vw” srcset=“https://domain.com/a.jpg 1920w, https://domain.com/a.jpg-300×250.jpg 300w, https://domain.com/a.jpg-768×640.jpg 768w, https://domain.com/a.jpg-1024×853.jpg 1024w, https://domain.com/a.jpg 1080w” src=“https://domain.com/a.jpg” /

I thought once the data- was applied, the original srcset, src, sizes were supposed to disappear. I thought that was what you were doing in your old blog post:
img->setAttribute( ‘data-sizes’, $sizes_attr );
img->setAttribute( ‘data-srcset’, $srcset );
img->removeAttribute( ‘sizes’ );
img->removeAttribute( ‘srcset’ );

Thanks again!!!

• This reply was modified 6 years, 9 months ago by wprox.

Thanks Florian!

1. I checked the lazysizes demo soon after sending the last reply, so that is indeed the way it’s supposed to look. Couldn’t remove that reply, but all good there!

2. Great suggestion regarding the lazysizesconfig.expand. I spent some time looking at that. Unfortunately as a relative WP newbie, not sure exactly in what format or where to put that in a wordpress-friendly way in my child theme. Could you please guide me on that?

Thanks again ??

According to the lazysizes docs, this should work:

window.lazySizesConfig = window.lazySizesConfig || {};
window.lazySizesConfig.expand = 0;

You need to include it before the lazysizes script, so the easiest way to do that would be including it into the head as a small inline script. The following code in the functions.php (or similar) of your child theme should do exactly that:

function themeslug_add_lazysizes_config() { ?>
	<script>
		window.lazySizesConfig = window.lazySizesConfig || {};
		window.lazySizesConfig.expand = 0;
	</script>
<?php }

add_action( 'wp_head', 'themeslug_add_lazysizes_config' );

Hope that helps!
Florian

• This reply was modified 6 years, 9 months ago by Florian Brinkmann.

Thanks so much Florian!!!

I’m testing the <noscript> that the plugin generates and getting this issue that I found described on a blog (below). Basically I see the noscript image PLUS a little gray empty section below it that is from the lazy load image. The blog provides a non-WP solution, which I tried to just put into the WP code structure you gave me above, to put in functions.php, but it’s not working, unless you have a better solution???

When JavaScript is disabled you will still have the leftovers from the image which will be lazy loaded. In your <head> you can add some CSS to hide this. It’s the most reliable way to do so.

<noscript>
<style>
.image.loading { display: none; }
</style>
</noscript>

Thanks again ??

Yes, you are right, the images does not get correctly hidden if JS is disabled. I released a new version just now that should fix that – would you give it a try and test if it works for you?

Thanks
Florian

Thanks so much Florian, the images look good now ??

Did you use the solution I pasted above?

Why didn’t this code below that I put in functions.php work? I’m finding similar noscript type code recommended on some blogs for updating css on script / noscript elements, so I would really like to at least know how to get it into wordpress…

function some_function_name() { ?>
<noscript>
<style>
.image.loading { display: none; }
</style>
</noscript>
<?php }

add_action( ‘wp_head’, ‘some_function_name’ );

Thanks again ??

Hi,

no, I use a solution with a class I add via JS and only display the images if that class is present. The solution that you posted does not work because the classes are not correct – it should be img.lazyload.

I have to admit that I did not notice the noscript element in the solution before, that is very clever – maybe I will use that in a future update ??

Best regards,
Florian

Thanks Florian! That solution came from https://iamsteve.me/blog/entry/nice-and-easy-lazy-loading-with-lazysizes-js

Thanks, will keep that in mind ??

I will set this topic to ?resolved? for now – if the issue should not be resolved yet, feel free to just add a comment here ??

Best regards,
Florian

Thanks Florian.

Just noticed same error still showing on ipad pro portrait in Google Inspect with no js: gray area below <noscript> img, coming from img. Once I delete the img element in DOM, it looks fine.