How To Load Images Sequentially?

I'm working on a long scrolling website that features a number of full background hi res images. It's currently taking too long to load since all the images are loaded in parallel

Solution 1:

I would try using a plugin like LazyLoad: http://www.appelsiini.net/projects/lazyload

There is a threshold value that will start to load images a certain number of pixels off screen. That way as visitors start scrolling down, it'll begin loading the next few sections.

Solution 2:

I created a jQuery plugin to achieve this. Check it out! It's a work in progress so you're welcome to comment and suggest! I took a lot from Lazy Load.

https://github.com/mspivak/sequencial_load