在jQuery中加载一个基于垂直滚动值的具有多个背景的长页面

Loading a long page with multiple backgrounds based on vertical scroll value in jQuery?

本文关键字：背景 滚动 加载 jQuery 一个 于垂直 垂直      更新时间：2023-09-26

我得到的设计是960px宽，约7000px高，在任意点切割成五个垂直堆叠的部分。有一个固定位置的侧边栏，可以滚动到每个段，这取决于单击了哪个导航链接。在这上面是一堆滑动条，透明的png，标题和段落，主要以相对的方式定位。

我最终需要做两件事:

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

  2. 根据需要在每个部分加载(并理想地淡入)透明png -用户在两个垂直滚动值之间滚动并停止一秒钟，导致该部分的透明png然后加载并淡入

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

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

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

谢谢!

(顺便说一句，请不要响应appelsiini的懒惰加载jQuery插件。它不受开发人员的支持，在现代浏览器中似乎也不起作用。谢谢!)

Justin建议的一个更全面的解决方案是使用jQuery Waypoints来管理viewport事件。

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

使用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);
}

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

Edit:调整了条件，如果元素的任何部分在窗口中，它将触发

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

还没有测试过，但你应该能够通过粘贴一对<img> s与相同的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'));
});

你必须确保将"禁用"图片的大小设置为图片加载后的大小，否则页面会跳来跳去。

你可以使用窗口。Onscroll事件处理程序来检测您何时在滚动，但这通常是一个坏主意。有关这方面的讨论请参见:http://ejohn.org/blog/learning-from-twitter/

相关文章：