I have a one page website in which I use this script to lazy load the images: http://appelsiini.net/projects/lazyload
Now, I also have anchor links on that page, like #footer. When the script is enabled, anchor links pointing to a position below a lazy loaded image break because when the image is loaded, the content gets pushed down.
So somehow the position needs to be recalculated, but I can't wrap my head around the technique behind this. I found a bug report from Mozilla with the exact same problem here: https://bugzilla.mozilla.org/show_bug.cgi?id=718321, but still I am unable to understand how they solved it. Looking at their Git changelog here actually shows how they solved that problem, but because I don't understand the steps necessary I am unable to recreate that.
How do I recalculate the anchor position to make anchor links working again, even with lazy loading enabled?
Ok, so I've had a good read on lazy loading images and I also managed to fix my problem described above, but in the end I didn't use it. Why you ask? Because although lazy loading images has some advantages, there are always many disadvantages - problems with touch devices, older browser & Internet Explorer and of course SEO, because Google's bots won't execute JavaScript or go into <noscript>tags, so all they see are the placeholder images.