HOW TO MAKE A BLOGGER BLOG LOAD FAST WITH LAZY LOADING JQUERY

Hey guys, i know some of you must have been searching on google everyday on how to load your site fast cause Blog load time is part of google factor for ranking a blog, But as much as we love to make our blog fast the major thing is that blogger doesn't give you the power to some certain things on it platform somewhat like Leverage image caching, This is the major problem many bloggers are having it never easy any time you check your page insight using google page insight as a blogger you must definitely see a complaint from the insight highlighting browsing cache as a major problem you need to resolve but many bloggers have look for there way to do this but all to Avail, Well some webmasters have been able to overcome this not like newbie bloggers who are finding it difficult to pass-over it well to cut the story short i will be sharing with you a JQUERY SCRIPT That will minimise the stress on your blog which is more like

It will load images after all the text on your blog have been loaded, In other words all images on your website will have to wait for your text to load and once the text finish loading then the image will start loading inside

SEE DEMO HERE

Once you visit the demo link after loading scroll down to see how images will be loading

Now let install this script to our blogs

STEP 1: Login to your blogger dashboard

STEP 2: Click on Theme or Template

STEP 3: Click on Edit Html

STEP 4: Use ctrl+f to search for </head>

STEP 5: Paste the below code above the </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'>
//<![CDATA[
/*
* Lazy Load - jQuery plugin for lazy loading images
*
* Copyright (c) 2007-2009 Mika Tuupola
*
* Licensed under the MIT license:
* http://www.opensource.org/licenses/mit-license.php
*
* Project home:
* http://www.appelsiini.net/projects/lazyload
*
* Version: 1.5.0
*
*/
(function($) {
$.fn.lazyload = function(options) {
var settings = {
threshold : 0,
failurelimit : 0,
event : "scroll",
effect : "show",
container : window
};

if(options) {
$.extend(settings, options);
}
/* Fire one scroll event per scroll. Not one scroll event per image. */
var elements = this;
if ("scroll" == settings.event) {
$(settings.container).bind("scroll", function(event) {

var counter = 0;
elements.each(function() {
if ($.abovethetop(this, settings) ||
$.leftofbegin(this, settings)) {
/* Nothing. */
} else if (!$.belowthefold(this, settings) &&
!$.rightoffold(this, settings)) {
$(this).trigger("appear");
} else {
if (counter++ > settings.failurelimit) {
return false;
}
}
});
/* Remove image from array so it is not looped next time. */
var temp = $.grep(elements, function(element) {
return !element.loaded;
});
elements = $(temp);
});
}

this.each(function() {
var self = this;

/* Save original only if it is not defined in HTML. */
if (undefined == $(self).attr("original")) {
$(self).attr("original", $(self).attr("src"));
}
if ("scroll" != settings.event ||
undefined == $(self).attr("src") ||
settings.placeholder == $(self).attr("src") ||
($.abovethetop(self, settings) ||
$.leftofbegin(self, settings) ||
$.belowthefold(self, settings) ||
$.rightoffold(self, settings) )) {

if (settings.placeholder) {
$(self).attr("src", settings.placeholder);
} else {
$(self).removeAttr("src");
}
self.loaded = false;
} else {
self.loaded = true;
}

/* When appear is triggered load original image. */
$(self).one("appear", function() {
if (!this.loaded) {
$("<img />")
.bind("load", function() {
$(self)
.hide()
.attr("src", $(self).attr("original"))
[settings.effect](settings.effectspeed);
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() {
$("img").lazyload({placeholder : "http://4.bp.blogspot.com/-wRaPvE0Jqrs/USIW4erewNI/AAAAAAAAFNk/TXDOtgYUGlc/s1600/grey.gif",threshold : 200});
});
</script>

Save your template and you are done HAPPY BLOGGING !!!

NOTE: Hope you don't mind leaving a comment below if you have any query, we want to know our visitor cause we will be given free gift to our potential visitors we don't want you to be left out just comment below so we will be keeping record till date

Thanks

Editor's Room

Do you like this post then you can subscribe for it here SUBSCRIBE HERE so when next we post relatedly to HOW TO MAKE A BLOGGER BLOG LOAD FAST WITH LAZY LOADING JQUERY you will get it directly to your PC so you don't miss out - No email required

MORE ABOUT RICHARD ODDS

==================================================

I am Richard Odds by name a blogger, Social media Expert, Business planner, SEO specialist and a Web developer with the power of creativity i decided to create this blog where i can teach people how to explore this Digital erra and making the goal of archieving three things online which is KNOWLEDGE | POWER | and WEALTH

Join me on Social Media