根据 jQuery 中的垂直滚动值加载具有多个背景的长页面？

Question

我使用的设计是 960 像素宽，约 7000 像素高，在任意点切成五个垂直堆叠的段。 有一个固定放置的侧边栏，可以滚动到每个部分，具体取决于单击的导航链接。 最上面是一堆滑块、透明 PNG、标题和段落，主要以相对的方式定位。

我最终需要做两件事：

1. 在侧边栏中隐藏相应的快速导航链接，直到其相关段的背景图像已加载

2. 根据需要在每个部分中加载（理想情况下淡入）透明 PNG - 用户在两个垂直滚动值之间滚动并停止一秒钟，导致该部分的透明 PNG 然后加载并淡入。

我目前正在使用softscroll.js在单击侧边栏链接时实现平滑的滚动效果（从而滚动到相关的锚点）。 因此，在您滚动时开始加载图像的延迟加载技术将不起作用 - 如果我单击侧边栏导航中的最后一个链接并将我滚动到底部，我不希望底部段之间的每个图像和结果是顶部加载。

虽然我需要尽快弄清楚第 1 点，但我对第二个问题更感兴趣。

当且仅当用户在两个特定的垂直滚动值之间暂停时，如何使用 jQuery 在某个元素内加载图像？

谢谢！

（顺便说一句，请不要使用appelsiini 的lazyload jQuery 插件来回应。开发人员不支持它，并且在现代浏览器中似乎不起作用。谢谢！）

Answer 1

使用scrollTop()检查用户的 position 。 您应该能够在setInterval()回调中执行此操作。

function loadBackground() {
    var userTop = $(window).scrollTop();
    var userBtm = userTop + $(window).height();
    var elemTop = $('#element').scrollTop();
    var elemBtm = elemTop + $('#element').height();

    if ((userBtm >= elemTop) && (userTop <= elemBtm))
    {
        // Load images
    }
}

$('document').ready(function(){
    setInterval(loadBackground,500);
}

（这是未经测试的代码，但你明白了。）

编辑：调整条件，以便如果元素的任何部分在 window 中，它将触发。

Answer 2

对于 Justin 所建议的已经很不错的解决方案，一个稍微更完整的解决方案是使用jQuery Waypoints来管理视口内事件。

如果您使用 iScroll 或可滚动性之类的东西重写移动浏览器上的滚动机制，您可能会遇到问题。 在这种情况下，您需要使用他们的 API 来调查修复。

Answer 3

在侧边栏中隐藏相应的快速导航链接，直到其相关段的背景图像已加载

尚未对其进行测试，但您应该能够通过将几个<img>与背景相同的 src （当然display: none; ）并测试每个图像的 .complete 属性来做到这一点，在一个短的 setInterval 循环上，直到它们都被加载。 不要使用 onload，它在图像上往往不可靠。

根据需要在每个部分中加载（理想情况下淡入）透明 PNG - 用户在两个垂直滚动值之间滚动并停止一秒钟，导致该部分的透明 PNG 然后加载并淡入。

Justin的解决方案应该适用于检测您何时处于给定部分。 只需在执行软滚动之前将标志设置为 false，一旦停止，将标志设置为 true - 然后仅在标志为 true 时将部分标记为活动。

我会通过将它们的src属性指向 1x1 空白 gif 并将它们的data-src属性设置为真实的 src 来“禁用”图像。 然后只需执行以下操作：

$('.selected-section img').each(function () {
    $(this).attr('src', $(this).data('src'));
});

您必须确保将“禁用”图像的大小设置为加载图像后的大小，否则页面会跳动很多。

您可以使用 window.onscroll 事件处理程序来检测您何时滚动，但这通常不是一个好主意。 有关此问题的讨论，请参见： http://ejohn.org/blog/learning-from-twitter/