jQuery lazy image loading…

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.

<img src="/empty.png" data-src="http://domain.com/image.jpg" alt="" width="200" height="70" />

//Change lazy images per real
jQuery("img").each(function() {
var $this = jQuery(this);
var imgsrc = $this.attr('data-src');
$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…


This entry was posted in Medium Technical and tagged , , . Bookmark the permalink.

Comments are closed.