loading web page images after the page is loaded

Question

In my website (that is for baby names), 40 names are shown in each pages, and each name can have a picture that are uploaded by users. now that number of names with pictures has increased my pages are very slow. by the way images are loaded from CDN and my concern is only for client side page load time.

first I decided to to put a 1x1 empty gif image as src and load actual images after the page load completes

<img src="x.gif" data-src="the-real-image-src.jpg" class="delayed-load" /> 

$(window).load(function () {
    $('.delayed-load').each(function(){
          $(this).attr('src',$(this).data('src'));
    });
});

but later I thought that as Images are being indexed by search engines it will have a bad influence on it. so I decided not to change real srcs and just cancel loading images before they start and retry loadin after page loaded. as I researched canceling image load doesn't prevent browser download te image so this one failed too.

I can add Images after page load too but it has the same problem as the first choice (that page source doesn't contain real image links.

what would you suggest to keep it both search engine friendly and also load images after page completion?

Answer 1

Add a width="<value>" and height="<value>" to your img tags (in pixels). This will allow the page text content to render before the images are fully loaded. No javascript required.

<img src="x.gif" width="42" height="60" data-src="the-real-image-src.jpg" />

Note that I assume either you have the same width and height for each image, or you've stored the metric somewhere you can access it on this load.