Anchor Links + Lazy Load Content

I was curious if there was any work around/solution for anchor-linking to content down a long page where lots of content is lazy loaded. The problem is that lazy loaded content has no height until it’s loaded, so the calculated scroll position ends up being incorrect– sometimes by a lot. My thought would be to find a way to have some placeholder by pulling from the image dimensions? That might inherently impossible to do without loading the image, but figured I’d at least ask.

An example: JW.S ⌁ Ledger MP®
Click INDEX (Under the logo) before scrolling, and then click Process to see how it comes up short and lands in no-mans land.

Any help is appreciated.

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Yes, the browser can’t calculate what it can’t see.
You can give all of your image elements sizes so that the layout can be calculated.

I typically do that by setting height and width, or aspect ratio, etc on the style panel, not the image-specific height-width you see on the settings panel.

Alternatively, disable lazy loading on all of your images, which you’ll have to weigh against SEO page load performance.

Another option might be script, but I suspect that would be kludgy, like… scrollTo the target element, then wait 500ms, then do it again, then wait 500ms, then do it again. Jitter-scroll. That might give the browser enough time to lazy load the images and calculate the correct element position.

But… it’s a major kludge, and you’re at the mercy of network & device performance.

1 Like

Ah ok, yea those seem like the options as I’ve come to understand it too. I was hoping there was a script since I have 1000s of images with varying sizes and aspect ratios. The ‘jitter-scroll’ is interesting, but might be a bit odd :sweat_smile: Appreciate the response though!

Not a script, but if you get the width and height onto the images then the browser has what it needs for its positioning calcs.

If the images are in the CMS, you could add a width and height field and then use CMS-bound custom attributes to populate them. They are likely reserved so you’d run a script to change the attribute names after, e.g. img-widthwidth.

Would be super nice if that metadata were accessible directly though- have a look at this wishlist item I created last year, it’s relevant here.

1 Like

Yea, that would be great. I just checked out the wishlist and you definitely got my vote– being able to pull some of that data would be amazing and make life so much easier.