Skip to main content

How To Add JQuery Lazy Load Plugin to Blogger(Make Your Blog Load 300% Faster)

How To Add JQuery Lazy Load Plugin to BloggerI wrote this article most especially for those blogs that load very slow due to images uploaded to their blogs, simple code and script that is effective for most of our blogs.

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 loading, also known as dynamic function loading , is a mode that allows a developer to specify what components of a program should not be loaded into storage by default when a program is started. Ordinarily, the system loader automatically loads the initial program and all of its dependent components at the same time. In lazy loading, dependents are only loaded as they are specifically requested. Lazy loading can be used to improve the performance of a program if most of the dependent components are never actually used

To add JQuery Lazy Load Plugin to your blogger blog or any other website follow the steps given below:
1.Login to your blogger dashboard--> layout- -> Edit HTML
2.Scroll down to where you see </head> tag .
3.Copy below code and paste it just before the </head> tag .
<!-- lazy load start www.blogs911.com -->
<script type='text/javascript'>//<![CDATA[
(function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(b){a.extend(c,b)}var d=this;if("scroll"==c.event){a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger("appear")}else{if(e++>c.failurelimit){return false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"))}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr("src",c.placeholder)}else{a(b).removeAttr("src")}b.loaded=false}else{b.loaded=true}a(b).one("appear",function(){if(!this.loaded){a("<img />").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.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);$(function(){$("img").lazyload({placeholder:"http://i22.servimg.com/u/f22/15/42/72/40/grey10.gif",effect:"fadeIn",threshold:"-50"})})//]]></script>
<!-- lazy load end www.blogs911.com -->
4.Now save your template and you are done.Refresh your site to see the result.
Do you have any experience using Lazyload? I have it installed in this blog and so far it has some improvements compare to what it is before placing the code.

Comments

Post a Comment

Popular posts from this blog

How to Use Facebook, Disqus and Blogger Comment tab Together in Blogger Blogs

As writers of  blogs, we all are aware of the importance of comments. While it is true that some blogs/websites tend to disable comments entirely, those are special instances where the websites do not essentially require comments. However, in general, comments form an integral part of any blog, be it a personal one or a magazine site. After all, what good is any info unless it provokes a healthy discussion?

All blogging platforms (including WordPress) come with native support for some sort of comment mechanism which seems to suffice for most bloggers. But sometimes, users may require some dedicated or specialized comment mechanism. This is where third-party commenting systems come in handy. In this article, we will take a look at some of the major third-party commenting mechanisms

Disqus
Disqus is a mature comment management system and perhaps the most used amongst bloggers and website owners. Introduced back in 2007, it is currently serving more than 750,000 websites. According to a …

High PageRank Do-Follow Forums List (606)

Besides from getting your answers to unanswerable queries, the good thing of do-follow forums is to create a good back links through their High Page rank pages on Google, creating your pointing to your site makes your blog grows faster in ranking,

Now a days it is very hard to find do-follow link website because they are making their site as no-follow, like the wiki, it is before a do-follow site but since many SEO experts use wiki as spam they control it and made it no-follow, so now I am giving you a list of do-follow and high ranking sites that you can use to make your blog popular.

Its your tactics on how to create your links on this site, but remember not to spam cause Google might hit you. :)

Here are the list enjoy

ForumPR1http://www.addthis.com/forum92http://chronicle.com/forums/83http://forums.myspace.com/84http://forum.joomla.org85http://forums.cpanel.net86http://forum.siteground.com87http://c7y-bb.phparchitect.com88http://forum.meebo.com89http://forums.mysql.com/710http://f…

FIXED! Adsense Ads not Showing in Homepage of Blogs or Website

Problem Solved! have you experience your Adsense ads not showing on homepage? Ads are showing on other pages except for homepage, well just this week I had a hard time figuring out why my ads are not showing in homepage.

I have another blog that is using Adsense ads. After a day of fixing almost all my template errors still the Adsense ads are not showing so I tried to search for it on internet.

Some forums will tell you that it is about updating your privacy policy pages, well I did that also but there's no effect.

The solution is very simple just navigate to blogger setting or wordpress seo settings. I'm focusing on blogger since my blog is in blogger platform.




Go to Blogger settings ->> Search Preferences->> Enable search description. Click yes then put your sites description and save. That's it! reload and see the magic :D