2

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

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

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

4

3 回答 3

4

这是一个使用我自己的 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的参考。

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

于 2018-02-06T22:15:06.127 回答
0

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

于 2013-01-07T23:26:45.577 回答
0

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

于 2013-01-08T20:52:01.430 回答