Lazy Load Images with jQuery

Lazy Load is 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.

Using Lazy Load on long web pages will make the page load faster. In some cases it can also help to reduce server load.

Lazy Load Images with jQuery

Here is a basic sample code for lazy load.


<!DOCTYPE html>
<html lang="en">
<head>
	
	<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
	<script type="text/javascript">
		function elementInViewport(el) {
			var top = el.offsetTop;
			var left = el.offsetLeft;
			var width = el.offsetWidth;
			var height = el.offsetHeight;

			while(el.offsetParent) {
				el = el.offsetParent;
				top += el.offsetTop;
				left += el.offsetLeft;
			}

			return (
				top >= window.pageYOffset &&
				left >= window.pageXOffset &&
				(top + height) <= (window.pageYOffset + window.innerHeight) &&
				(left + width) <= (window.pageXOffset + window.innerWidth)
				);
		}
		 
		function loadimg(){

			$($("img.lazy")).each(function(ind,img){ 
				if (elementInViewport(img)){ 
					var image = new Image();
					image.src = $(img).data("src") ;	
					image.onload=function(){
						$(img).removeClass("lazy")
							.addClass("img")
							.attr("src",image.src);				
					};
				}
			});
		}
		$(document).ready(function(){
			$(document).on( "scroll", function(){
				loadimg();
			} );
		});
	</script>
	<style type="text/css">
		.img{
			 
			border: solid 1px #DDD; 
			width: 150px;
		}
		.lazy{
			display: block;
			float: left;
			border: solid 1px #DDD;
			height: 300px;
			width: 150px;
			background-image: url('spinner.gif');
			background-position: center center;
			background-repeat: no-repeat;
			background-size: 36px 36px;
		}
	</style>
</head>
<body>

	<img src="" data-src="http://example.com/images/4c.jpg" class="lazy" />
	<img src="" data-src="http://example.com/images/6.png" class="lazy" />
	<img src="" data-src="http://example.com/images/5.png" class="lazy" />
	<img src="" data-src="http://example.com/images/7.png" class="lazy" />
	<img src="" data-src="http://example.com/images/4c.jpg" class="lazy" />
	<img src="" data-src="http://example.com/images/6.png" class="lazy" />
	<img src="" data-src="http://example.com/images/5.png" class="lazy" />
	<img src="" data-src="http://example.com/images/7.png" class="lazy" />
	<img src="" data-src="http://example.com/images/4c.jpg" class="lazy" />
	<img src="" data-src="http://example.com/images/6.png" class="lazy" />
	<img src="" data-src="http://example.com/images/5.png" class="lazy" />
	<img src="" data-src="http://example.com/images/7.png" class="lazy" />
	<img src="" data-src="http://example.com/images/4c.jpg" class="lazy" />
	<img src="" data-src="http://example.com/images/6.png" class="lazy" />
	<img src="" data-src="http://example.com/images/5.png" class="lazy" />
	<img src="" data-src="http://example.com/images/7.png" class="lazy" />
	<img src="" data-src="http://example.com/images/4c.jpg" class="lazy" />
	<img src="" data-src="http://example.com/images/6.png" class="lazy" />
	<img src="" data-src="http://example.com/images/5.png" class="lazy" />
	<img src="" data-src="http://example.com/images/7.png" class="lazy" />
	<img src="" data-src="http://example.com/images/4c.jpg" class="lazy" />
	<img src="" data-src="http://example.com/images/6.png" class="lazy" />
	<img src="" data-src="http://example.com/images/5.png" class="lazy" />
	<img src="" data-src="http://example.com/images/7.png" class="lazy" />
	<img src="" data-src="http://example.com/images/4c.jpg" class="lazy" />
	<img src="" data-src="http://example.com/images/6.png" class="lazy" />
	<img src="" data-src="http://example.com/images/5.png" class="lazy" />
	<img src="" data-src="http://example.com/images/7.png" class="lazy" />
	<img src="" data-src="http://example.com/images/4c.jpg" class="lazy" />
	<img src="" data-src="http://example.com/images/6.png" class="lazy" />
	<img src="" data-src="http://example.com/images/5.png" class="lazy" />
	<img src="" data-src="http://example.com/images/7.png" class="lazy" />
	<img src="" data-src="http://example.com/images/4c.jpg" class="lazy" />
	<img src="" data-src="http://example.com/images/6.png" class="lazy" />
	<img src="" data-src="http://example.com/images/5.png" class="lazy" />
	<img src="" data-src="http://example.com/images/7.png" class="lazy" />
	<img src="" data-src="http://example.com/images/4c.jpg" class="lazy" />
	<img src="" data-src="http://example.com/images/6.png" class="lazy" />
	<img src="" data-src="http://example.com/images/5.png" class="lazy" />
	<img src="" data-src="http://example.com/images/7.png" class="lazy" />
</body>
</html>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s