Efficient jQuery or HTML5 image slider

Question

I have a friend that is making a portfolio site. He has some high res images that he would like to display. There will be multiple projects on one page, and several images per project. Because of this, he would like to reduce load time as much as possible, and also conserve system memory usage. That being said, he's afraid that a conventional jQuery slider will eat up too much memory if it's called multiple times on the same page. Also, to load all of the images at initialization is just not an option as this would create long load times. Does anyone know of any image sliders, either jQuery or HTML5, or both that can help with this?

Answer 1

before spending time searching for a good jQuery slider...

...start from the basis:

1. start following general web design best practices like theese
2. keep your web page under 100 KB and load fast ? (the more is less the more is better)
3. use CDN (Content Delivery Network) to store HD images.
4. load HD images only on-demand, do not preload them.
5. use compressed , converted (avoid png) and resized images to fit the slider container.
6. do not scale images with CSS or inline CSS. (neither server side)
7. make use of the Lazy loading design pattern. (if as you say there are lots of images and the page is going to be very long)