Simple jQuery lazy load example

jquery lazy load example and demo

In this tutorial, we are loading 10 images using jQuery lazy load example which will load the images in the background and show them while the page is scrolling by the user. This jQuery lazy load concept will help to improve page performance which will help your website to load faster.

Below is the code used for jQuery lazy load example, Download and demo links are available at the end of this article.

<html>
<head>
<title>Simple gallery lightbox example </title>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div id="mainContainer">
	<div class="sidebar"></div>
	
	<div class="lazyImages marginTop50px">
		<img data-src="images/img1.jpg" class="lazy" alt="jQuery Lazy Load image1" />
		<img data-src="images/img2.jpg" class="lazy" alt="jQuery Lazy Load image2" />
		<img data-src="images/img3.jpg" class="lazy" alt="jQuery Lazy Load image3" />
		<img data-src="images/img4.jpg" class="lazy" alt="jQuery Lazy Load image4" />
		<img data-src="images/img5.jpg" class="lazy" alt="jQuery Lazy Load image5" />
		<img data-src="images/img6.jpg" class="lazy" alt="jQuery Lazy Load image6" />
		<img data-src="images/img7.jpg" class="lazy" alt="jQuery Lazy Load image7" />
		<img data-src="images/img8.jpg" class="lazy" alt="jQuery Lazy Load image8" />
		<img data-src="images/img9.jpg" class="lazy" alt="jQuery Lazy Load image9" />
		<img data-src="images/img10.jpg" class="lazy" alt="jQuery Lazy Load image10" />
	</div>
</div>
<script type="text/javascript">
$(function() {
	 $('.lazy').lazy();
});

</script>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<!-- cdnjs -->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.4/jquery.lazy.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.4/jquery.lazy.plugins.min.js"></script>
</body>
</html>

Download / Demo

You may also like...