Skip to content

Instantly share code, notes, and snippets.

@mayeenulislam

mayeenulislam/enable-lazyload-js

Last active December 8, 2016 02:00
Show Gist options
  • Save mayeenulislam/8fca746230ea540d739b to your computer and use it in GitHub Desktop.
Save mayeenulislam/8fca746230ea540d739b to your computer and use it in GitHub Desktop.
Download ZIP
This is a code to enable jQuery LazyLoad into any DOM. It was made according to the guideline (http://www.appelsiini.net/projects/lazyload) and based on the last update on this github repo (https://github.com/tuupola/jquery_lazyload). It is just the basic, you are free doing your tweaks.
Raw
enable-lazyload-js
jQuery(document).ready(function($) {
var imgs = $('img'); //grabbing all the images of a DOM
imgs.addClass('lazy'); //adding .lazy to all the images
imgs.each(function() {
var img_src = $(this).attr('src'); //grabbing the 'src=""' value of each of the img
$(this).attr('data-original', img_src); //assigning the src value to 'data-original'
$(this).removeAttr('src'); //now deleting the 'src' attribute
});
/**
* ...And here we are initiating our LazyLoad jQuery plugin to all the images
* that has a class '.lazy'
*/
$(function() {
$("img.lazy").lazyload();
});
});
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery LazyLoad Implementation</title>
</head>
<body>
<div class="container">
<!-- PLACE SOME IMAGES IN YOUR /images/ FOLDER FIRST -->
<img src="images/image-1.jpg" alt="Test to load images using jQuery LazyLoad plugin">
<img src="images/image-2.jpg" alt="Test to load images using jQuery LazyLoad plugin">
<img src="images/image-3.jpg" alt="Test to load images using jQuery LazyLoad plugin">
<img src="images/image-4.jpg" alt="Test to load images using jQuery LazyLoad plugin">
<img src="images/image-5.jpg" alt="Test to load images using jQuery LazyLoad plugin">
<img src="images/image-6.jpg" alt="Test to load images using jQuery LazyLoad plugin">
<img src="images/image-7.jpg" alt="Test to load images using jQuery LazyLoad plugin">
<img src="images/image-8.jpg" alt="Test to load images using jQuery LazyLoad plugin">
<img src="images/image-9.jpg" alt="Test to load images using jQuery LazyLoad plugin">
<img src="images/image-10.jpg" alt="Test to load images using jQuery LazyLoad plugin">
<img src="images/image-11.jpg" alt="Test to load images using jQuery LazyLoad plugin">
<img src="images/image-12.jpg" alt="Test to load images using jQuery LazyLoad plugin">
</div>
<!-- jQuery Library first -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- Loading jQuery LazyLoad (minified) from CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>
<!-- Loading our custom JS file -->
<script src="enable-lazyload-js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment