How to avoid loading all images when a html page is loaded in browser?

Question

My web page include a lot of img tags, but when it is initially displayed, most of the imgs are hidden. I want to load the imgs only when user shows the intention to view them, otherwise the page could generate too much network traffic.

I know I could insert the img tags into the DOM on the fly with javascript. But that way I lose the benefit of search engine indexing these images, I want the search engine bots to see these imgs.

Is there a way to keep the DOM structure unchanged, while loading the imgs only when needed?

Answer 1

You could try lazy loading: Lazy Load delays loading of images in long web pages. Images outside of viewport are not loaded until user scrolls to them. This is opposite of image preloading.

demo: http://www.appelsiini.net/projects/lazyload/enabled_timeout.html

http://www.appelsiini.net/projects/lazyload
https://github.com/tuupola/jquery_lazyload
http://luis-almeida.github.io/unveil/

Answer 2

What you could do, is put all the images in a <noscript> tag, so browsers without JavaScript, and thus search engines, can see them.

You can then add the images in using JavaScript manually, for those who do have it.