page-scroll-to-id icon indicating copy to clipboard operation
page-scroll-to-id copied to clipboard

Lazy Image Loading

Open davefmoore opened this issue 8 years ago • 1 comments

Have you ran into any situations where the page has lazy image loading and the scroll doesn't calculate the correct positioning (obviously)... Do you know any solutions for this? window.onscroll true = recalculate?

davefmoore avatar Nov 01 '16 15:11 davefmoore

The issue you describe is not specific to "Page scroll to id" (the same problem will happen if you disable "Page scroll to id" and let the page jump to an anchor point).

If your image placeholders don't have a height set, then when each image is loaded, the page length increases. Each time the page length increases, all elements that are positioned before the last loaded image, will have a different top position.

So when you click a "Page scroll to id" enabled link, the script calculates the position to scroll to but this position has changed (while the page scrolls) simply because an image has loaded.

The standard solution is to have a height set for you image placeholders.

Another solution would be to use plugin's scrollTo method in your lazy-loading script but this would require extra coding in order to avoid other issues.

In general, when you have lazy-loading without a height set for each image placeholder and anchor links on the same page, you'll have this issue regardless of using "Page scroll to id" or not.

malihu avatar Nov 01 '16 16:11 malihu