If your blog or website containing many images, Lazy Load will be very helpful to you. It can reduce the page loading time of your site. Lazy loader is a jQuery plugin written in JavaScript. It delays loading of images in (long) web pages. Images outside of viewport (visible part of web page) wont be loaded before user scrolls to them. Using lazy load on long web pages containing many large images makes the page load faster. Browser will be in ready state after loading visible images. In some cases it can also help to reduce server load. Lazy Load is a famous plugin for wordpress blogger.
#Steps:
1. Go to
Dashboard ->>
Design ->>;
Edit HTML
2. Search this code (Ctrl + F),
</head>
3. Then, paste the code below, before
</head>
<script charset='utf-8' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<;
self.loaded = true;
})
.attr("src", $(self).attr("original"));
};
});
/* When wanted event is triggered load original image */
/* by triggering appear. */
if ("scroll" != settings.event) {
$(self).bind(settings.event, function(event) {
if (!self.loaded) {
$(self).trigger("appear");
}
});
}
});
/* Force initial check if images should appear. */
$(settings.container).trigger(settings.event);
return this;
};
/* Convenience methods in jQuery namespace. */
/* Use as $.belowthefold(element, {threshold : 100, container : window}) */
$.belowthefold = function(element, settings) {
if (settings.container === undefined || settings.container === window) {
var fold = $(window).height() $(window).scrollTop();
} else {
var fold = $(settings.container).offset().top $(settings.container).height();
}
return fold <= $(element).offset().top - settings.threshold;
};
$.rightoffold = function(element, settings) {
if (settings.container === undefined || settings.container === window) {
var fold = $(window).width() $(window).scrollLeft();
} else {
var fold = $(settings.container).offset().left $(settings.container).width();
}
return fold <= $(element).offset().left - settings.threshold;
};
$.abovethetop = function(element, settings) {
if (settings.container === undefined || settings.container === window) {
var fold = $(window).scrollTop();
} else {
var fold = $(settings.container).offset().top;
}
return fold >= $(element).offset().top settings.threshold $(element).height();
};
$.leftofbegin = function(element, settings) {
if (settings.container === undefined || settings.container === window) {
var fold = $(window).scrollLeft();
} else {
var fold = $(settings.container).offset().left;
}
return fold >= $(element).offset().left settings.threshold $(element).width();
};
/* Custom selectors for your convenience. */
/* Use as $("img:below-the-fold").something() */
$.extend($.expr[':'], {
"below-the-fold" : "$.belowthefold(a, {threshold : 0, container: window})",
"above-the-fold" : "!$.belowthefold(a, {threshold : 0, container: window})",
"right-of-fold" : "$.rightoffold(a, {threshold : 0, container: window})",
"left-of-fold" : "!$.rightoffold(a, {threshold : 0, container: window})"
});
})(jQuery);
//]]>
</script>
<script charset='utf-8' type='text/javascript'>
$(function() {
$(&quot;img&quot;).lazyload({placeholder : &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfRVXmTp5ikwn7UNLqsza79px1CvPaaHnoWQug0hQWqn3g3i69PehRyZBkwRa5HzN_HIdMQE80HLLbUgqa1WhqrFd3omj_g3NO0uYRtd9OnVZn7ZkH7F2Y6QHWEcnu8gPa-Crxckm7j1Y/s1600/grey.gif&quot;,threshold : 200});
});
</script>
4. Save your template.
Refresh your blog to see the result. Finish!
Enjoy boss!
