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

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.