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

Question

我被赋予的设计是960 at宽约7000 at高，在任意点切割成五个垂直叠加段。有一个固定放置的侧边栏，滚动到每个段，取决于哪个导航链接被点击。上面是一堆滑块，透明的PNG，标题和段落，主要是以相对的方式定位。

我最终需要做两件事：

1. 在侧边栏中隐藏相应的快速导航链接，直到其相关片段的背景图像加载为止。
2. 根据需要加载(理想情况下是淡入)每个区段中的透明PNGs -用户在两个垂直滚动值之间滚动并停止一秒钟，从而导致该区段的透明PNG加载和淡入。

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

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

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

谢谢!

(顺便说一句，请不要用[医] appelsiini's lazyload jQuery插件回复。它不受开发人员的支持，在现代浏览器中似乎不起作用。谢谢！)

Answer 1

对于Justin建议的已经很棒的解决方案，一个稍微完整的解决方案是使用jQuery路点来管理in事件。

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

Answer 2

使用scrollTop()检查用户的位置。您应该能够在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);
}

(这是未经测试的代码，但您可以理解。)

编辑：调整了条件，以便如果元素的任何部分在窗口中，它就会触发。

Answer 3

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

还没有对其进行测试，但是您应该能够这样做，只需将两个<img>与背景使用相同的src (当然是用display: none; )，并在一个简短的setInterval循环上测试每个图像的.complete属性，直到它们全部加载。不要使用载，它往往是不可靠的图像。

根据需要加载(理想情况下是淡入)每个区段中的透明PNGs -用户在两个垂直滚动值之间滚动并停止一秒钟，从而导致该区段的透明PNG加载和淡入。

Justin的解决方案应该适用于在给定区域中检测。只需在做软滚动之前将一个标志设置为false，当它停止时设置为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/