Question

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

所以不知何故，这个位置需要重新计算，但我不能围绕这个技术。我在这里找到了一个来自Mozilla的错误报告，问题完全相同：https://bugzilla.mozilla.org/show_bug.cgi?id=718321，但我仍然无法理解他们是如何解决的。看看他们的Git更改日志here实际上显示了他们如何解决这个问题，但由于我不理解必要的步骤，我无法重新创建它。

如果重新计算锚位置以使锚链接再次起作用，即使启用了延迟加载，也是如此？

Answer 1

这是一个使用我自己的jQuery动画工作的实现。

<强> HTML

<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的参考。

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

Answer 2

好的，所以我对延迟加载图像有一个很好的阅读，我也设法解决了上面描述的问题，但最后我没有使用它。你为什么问？因为尽管延迟加载图像具有一些优点，但总有许多缺点 - 触摸设备，旧浏览器和设备的问题。 Internet Explorer，当然还有SEO，因为Google的机器人不会执行JavaScript或进入<noscript>标签，所以他们看到的只是占位符图像。

Answer 3

我将要求您详细说明如何修复问题（在您选择不使用它之前），因为我必须使用延迟加载。不过我已经为自己找到了解决方案。鉴于我的网站是一个寻呼机/线性体验（http://thomasgrist.tumblr.com/），它只是一次又一次地跳到下一个锚点我只需要提前加载一定量（在视口中可见）我可以使用阈值在lazyload插件中设置：http://www.appelsiini.net/projects/lazyload（无论如何，谢谢你，让我走在正确的道路上）

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

3 个答案: