0

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?

NeoWang
  • 13,687
  • 19
  • 61
  • 112
  • Search engines are supposed to see the same thing as your real users. – Nathan H Mar 09 '14 at 10:12
  • @NathanH Exactly, the user can see all the images if he wants to, but search engine cannot, because it doesn't run javascript. – NeoWang Mar 09 '14 at 10:14
  • You could add the images inside a noscript tag, for search engines, and load them in with JavaScript for browsers that do support JavaScript. – Jeroen Mar 09 '14 at 10:25

2 Answers2

2

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/

JohanVdR
  • 2,768
  • 1
  • 11
  • 15
  • This does use JavaScript however. I'm not sure if this is safe for search engines. – Jeroen Mar 09 '14 at 11:36
  • 1
    http://stackoverflow.com/questions/5440998/would-lazy-loading-img-src-negatively-impact-seo if you're dealing with mission-critical content, you'll always want to make sure there's a non-javascript way to access it. – JohanVdR Mar 09 '14 at 12:02
  • http://webmasters.stackexchange.com/questions/26190/is-this-a-good-approach-to-image-lazy-loading-for-seo – JohanVdR Mar 09 '14 at 12:18
1

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.

Jeroen
  • 11,661
  • 11
  • 46
  • 92