图像延迟加载会破坏锚链接

Question

我有一个一页网站，在其中使用此脚本来延迟加载图像： http: //appelsiini.net/projects/lazyload
现在，我还在该页面上有锚链接，例如#footer. 启用脚本后，指向延迟加载图像下方位置的锚链接会中断，因为加载图像时，内容会被下推。

因此，不知何故，位置需要重新计算，但我无法理解这背后的技术。我发现 Mozilla 的错误报告存在完全相同的问题：https://bugzilla.mozilla.org/show_bug.cgi? id=718321，但我仍然无法理解他们是如何解决它的。在这里查看他们的 Git 更改日志实际上显示了他们如何解决该问题，但因为我不了解必要的步骤，所以无法重新创建该问题。

即使启用了延迟加载，如何重新计算锚点位置以使锚点链接再次工作？

Answer 1

这是使用我自己的 jQuery 动画的实现。

超文本标记语言

<a href="#myDestinationAnchor" class="someClassName">Location</a>

JavaScript

   // When the user clicks on an anchor with a class name "someClassName"...
$('body').on('click', 'a.someClassName', function(e) {

    // Get the hash. In this example, "#myDestinationAnchor".
    var targetSelector = this.hash;
    var $target = $(targetSelector);

    // Animate the scroll to the destination...
    $('html, body').animate(
        {
            scrollTop: $target.offset().top // Scroll to this location.
        }, {
            // Set the duration long enough to allow time
            // to lazy load the elements.
            duration: 2000,

            // At each animation step, check whether the target has moved.
            step: function( now, fx ) {

                // Where is the target now located on the page?
                // i.e. its location will change as images etc. are lazy loaded
                var newOffset = $target.offset().top;

                // If where we were originally planning to scroll to is not
                // the same as the new offset (newOffset) then change where
                // the animation is scrolling to (fx.end).
                if(fx.end !== newOffset)
                    fx.end = newOffset;
            }
        }
    );
});

jQuery Animate的参考。

PS 我正在使用jQuery Lazy插件进行延迟加载。对这个插件没有特别的依赖（据我所知），但我想我会提到它。