I have a webpage that waits for images to be loaded until they are visible in the viewport of the browser (lazyload). The dimensions of images are unknown. On the top of the webpage I have a link that jumps to an anchor on the bottom of the page. When a user presses the link the browsers scrolls to the wrong position of the webpage. I assume this is because the images are loaded in the browser and this changes the height of the page. In other words the position of the anchor changes after the link is link is clicked. Is there anyway to solve this paradox.
-
Can you not calculate scroll position on the click event?– Alex GillJul 11, 2016 at 12:51
-
@AlexGill I am not sure what you mean. The current scholl position seems irrelevant to me. Mayby you can exlpain a little more why this could help.– NebuJul 11, 2016 at 12:58
-
I have exactly the same problem on my WordPress site page. Did you find a way out?– ー PupSoZeyDe ーDec 17, 2021 at 11:24
-
1@pupsozeyde I am not using WordPress but in general: Disable lazyloading images when jumping to the anchor. Then enable lazyloading again but rotate the direction it is viewing. Normal lazyload: img pos <= scroll pos then load img. Rotated lazy load: img pos >= scroll pos then load img.– NebuDec 17, 2021 at 22:19
Add a comment
|
1 Answer
What you could do, is append a link and a div after the images are fully loaded.
For example: If the images are loaded, you could:
$("#someDiv").append("<a href='#SomeOtherDiv'></a>");
$("#someDivAtTheBottomOfThePage").append("<div id='#JumpToThis'></div>");
-
2Hmm. The images are loaded after the user has scrolled down. But i need to jump to an anchor position before the images are loaded. When the images are loaded there is no need todo anything.– NebuJul 12, 2016 at 7:30