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

Question

The design I've been given to work with is 960px wide by around 7000px tall, cut into five vertically-stacked segments at arbitrary points. There's a fixed-placed sidebar that scrolls to each segment, depending on which navigation link is clicked. Atop this are a bunch of sliders, transparent PNGs, headlines and paragraphs, predominantly positioned in a relative fashion.

I need to ultimately do two things:

1. Hide the corresponding quick-nav links in the sidebar until its related segment's background image has loaded

2. Load (and ideally fade in) the transparent PNGs in each section as needed -- the user scrolls between two vertical scroll values and stops for a second, causing that section's transparent PNGs to then load and fade in.

I'm currently using softscroll.js to achieve a smooth scrolling effect for when the sidebar links are clicked (thus scrolling to the related anchors). Thus, lazy loading techniques that begin to load images as you scroll by won't work -- if I click the last link in the sidebar nav and it scrolls me to the bottom, I don't want every image between the bottom segment and the top loading as a result.

While I'll need to figure out point 1 sooner rather than later, I'm more interested in the second question.

How would one use jQuery to load images inside a certain element if and only if the user has paused between two specific vertical scroll values?

Thank you!

(BTW, please don't respond with appelsiini's lazyload jQuery plugin . It's unsupported by the developer and doesn't appear to work in modern browsers. Thanks!)

Answer 1

Check the user's position using scrollTop() . You should be able to do this inside a setInterval() callback.

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

(This is untested code, but you get the idea.)

Edit: Adjusted the conditional so that if any part of the element is in the window it will fire.

Answer 2

A slightly more full fat solution to the already great one suggested by Justin is to use jQuery Waypoints to manage the in viewport events.

You may run into issues if you're rewritting the scroll mechanism on mobile browsers using something like iScroll or scrollability. In which case you'll need to use their APIs to investigate a fix.

Answer 3

Hide the corresponding quick-nav links in the sidebar until its related segment's background image has loaded

Haven't tested it but you should be able to just do this by sticking a couple of <img> s in with the same src as the background (with display: none; of course) and testing the.complete property of each image, on a short setInterval loop, until they're all loaded. Don't use onload, it tends to be unreliable on images.

Load (and ideally fade in) the transparent PNGs in each section as needed -- the user scrolls between two vertical scroll values and stops for a second, causing that section's transparent PNGs to then load and fade in.

Justin 's solution should work for detecting when you're in a given section. Just set a flag to false before you do the softscroll, and true once it stops- and then only mark a section as active when the flag is true.

I would "disable" the images by pointing their src attribute to a 1x1 blank gif, and setting their data-src attribute to the real src. Then just do something like:

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

You'll have to be sure to set the size of the "disabled" images to the size that they'll be once their image has loaded, or else the page will jump around a lot.

You could use the window.onscroll event handler to detect when you're scrolling, but this is generally a bad idea. For discussion on this see: http://ejohn.org/blog/learning-from-twitter/