Just a speed up trick, if you have lot of images or big images, to allow the browser to render and show the page before load the images you can do a “lazy” loading, that means that you load a marker or empty images with HTML, and with JavaScript/jQuery you update the resources.
HTML:
<img src="/empty.png" data-src="http://domain.com/image.jpg" alt="" width="200" height="70" />
Script:
jQuery(document).ready(function(){
//Change lazy images per real
jQuery("img").each(function() {
var $this = jQuery(this);
var imgsrc = $this.attr('data-src');
if(imgsrc!=''){
$this.attr('src', imgsrc).removeAttr('data-src');
}
});
});
Note: to minimize the in screen time while the image is loading it is recommended to use progressive encode on the images… or a loader… or the combination of both…
AC.