joaojeronimo/lazyLoad.html

## lazyLoad.html
<html>
	<head>
  		<title>lazyLoad Example</title>
	</head>
	<body>
		<img class="lazy" data-src="myImage.png" alt="My image" />

		<script src="path/to/jQuery.js"></script>
		<script src="path/to/lazyLoad.js" ></script>
		<script>
			$('img.lazy').lazyLoad();
		</script>
	</body>
</html>

## lazyLoad.js
/*
  Instructions:
    1) apply the class "lazy" to your images;
    2) Instead of the "src" attribute, define the image source with "data-src";
    3) When you want to load your images, most likely after the document is ready, execute $('img.lazy').lazyLoad()
*/

(function($){
  $.fn.lazyLoad = function() {
    this.each(function (index) {
      var src = $(this).attr('data-src');
      if (src !== undefined) {
        $(this).attr('src', src);
      }
    });
  };
})(jQuery);
	<html>
	<head>
	<title>lazyLoad Example</title>
	</head>
	<body>
	<img class="lazy" data-src="myImage.png" alt="My image" />

	<script src="path/to/jQuery.js"></script>
	<script src="path/to/lazyLoad.js" ></script>
	<script>
	$('img.lazy').lazyLoad();
	</script>
	</body>
	</html>
	/*
	Instructions:
	1) apply the class "lazy" to your images;
	2) Instead of the "src" attribute, define the image source with "data-src";
	3) When you want to load your images, most likely after the document is ready, execute $('img.lazy').lazyLoad()
	*/

	(function($){
	$.fn.lazyLoad = function() {
	this.each(function (index) {
	var src = $(this).attr('data-src');
	if (src !== undefined) {
	$(this).attr('src', src);
	}
	});
	};
	})(jQuery);