Support » Plugin: Lazy Loader » Anchors don’t work

  • Resolved wprox

    (@wprox)



    Hi Florian,

    Thanks for this cool plugin, just getting started…

    I have a table of contents at the top of my page with anchor links to sections throughout the long page.

    With this plugin, the anchor links are not working right: the link takes you somewhere above that anchor, probably because it’s trying to load all the images in between???

    I looked at another site’s long page with a table of contents and many images that uses lazysizes.js, and I was able to click their anchor links no problem. Those links would FLY right to the correct section, skipping many images on the way, to far bottom of the page in lightening speed! I was hoping that was a lazysizes.js thing, but not getting that with your plugin…

    Help?

    Thanks a lot!!! πŸ™‚

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

    (@florianbrinkmann)

    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 πŸ™‚

    Plugin Author Florian Brinkmann

    (@florianbrinkmann)

    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???

    Plugin Author Florian Brinkmann

    (@florianbrinkmann)

    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 9 months, 3 weeks 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 πŸ™‚

    Plugin Author Florian Brinkmann

    (@florianbrinkmann)

    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

    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 πŸ™‚

    Plugin Author Florian Brinkmann

    (@florianbrinkmann)

    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 πŸ™‚

    Plugin Author Florian Brinkmann

    (@florianbrinkmann)

    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

    Plugin Author Florian Brinkmann

    (@florianbrinkmann)

    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.

Viewing 15 replies - 1 through 15 (of 20 total)
  • The topic ‘Anchors don’t work’ is closed to new replies.