Is this a good approach to image Lazy Loading for SEO?
That's a good approach. Another approach you could take is to use the <noscript />
element to store the normal version of the img
tag, which would be indexed by Google, and use JS to create the lazy loading version.
Alternatively, you could use Google's hashbang AJAX conventions combined with HTML5's history API to make bookmark- and index-able page states. This is especially preferable if you're doing some kind of infinite scroll page, as it provides a form of pseudo-pagination—something which most infinite scroll implementations desperately need (::cough:: Google Images ::cough::).
Edit: Using links as placeholders for the images could cause the PR flow from the page to be divided amongst more links, though PR is always conserved unless you use
nofollow
so in theory this would increase the PR of those images for image searches.
If you don't want that, or you want the page to degrade gracefully for non-JS users, you could go the opposite route and start with regular images but using blocking JS to substitute the src
attribute of the images at page load (or even just delete the image elements and store the src
attributes in your lazy loading queue). If you do it correctly, you can get this done before any of the images actually begin downloading.
I have seen images loaded with this pattern:
<img data-src="path/to/image.jpg" class="js-lazy-load" />
get picked up by Google and Google Image Search and others have spotted it too. Since Google now executes javascript on your page, there may be no need to put the actual image into the src attribute. Neglecting a src attribute might lead to a grey border around your image, so probably best to go with something like:
<img src="placeholder.gif" data-src="path/to/image.jpg" class="js-lazy-load" alt="Image alt text here" />
Nb. this doesn't necessarily apply to other search engines.