What's new

How To Reduce PageLoading Time in Blogger By Adding JQuery Lazy Load Plugin

DE_Light

Moderator
How To Reduce PageLoading Time in Blogger By Adding JQuery Lazy Load Plugin

JQuery Lazy Load Plugin.png


This post will explain to you howto add JQuery Lazy Load Plugin toyour blogger blog or any other website easily.
If you have a blogor website containing many images, this tricks will be very helpful to you. It can reduce the page loading time of your site. You can see more details about this JQuery Lazy Load Plugin.

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.

How To Reduce Page Loading Time in Blogger By Adding JQuery Lazy Load Plugin?

STEPS TO FOLLOW BELOW

1. Go to your Blogger Dashboard > Template > Edit HTML .

2. Search (Ctrl  F) for </head> Tag.

3.Copy below code and paste it just before the </head> tag .


Code:
<script src='http://beautifulbloggerwidgets.googlecode.com/files/lazyload-min.js' type='text/javascript'/><script charset='utf-8' type='text/javascript'>$(function() {$(&quot;img&quot;).lazyload({placeholder :&quot;http://beautifulbloggerwidgets.googlecode.com/files/grey.gif&quot;,threshold : 200});});</script>

Note : You can download java script files from here if you want to host above files yourself.
4. Now save your template and you are done.Refresh your site to see the result.

Source: Click here!
 
You can also reduce your blog page speed by compressing your css codes...
 
dspacedude said:
You can also reduce your blog page speed by compressing your css codes...

quite right, but dats a long job, for high class bloggers that blog about big images on their blog. The jquerry codes does it with easy for them. Thanks for dat method too.
 
Yahh This is really great concept here, i have gone through the code where you have use JavaScript as well as JQuery but i am little bit confused with "lazyload", Is it predefined method ?
 
cisprakash said:
Yahh This is really great concept here, i have gone through the code where you have use JavaScript as well as JQuery but i am little bit confused with "lazyload", Is it predefined method ?
have you resolved it?
 
cisprakash said:
Yahh This is really great concept here, i have gone through the code where you have use JavaScript as well as JQuery but i am little bit confused with "lazyload", Is it predefined method ?


Just explain were you are confused? So i can let you in. And remember, before you can do it, you must have a little knowledge of HTML Editting before you can do it. You can use the above link to learn it and also learn about tags, etc.






 
DE_Light said:
cisprakash said:
Yahh This is really great concept here, i have gone through the code where you have use JavaScript as well as JQuery but i am little bit confused with "lazyload", Is it predefined method ?


Just explain were you are confused? So i can let you in. And remember, before you can do it, you must have a little knowledge of HTML Editting before you can do it. You can use the above link to learn it and also learn about tags, etc.

Well i am having a knowledge of HTML, CSS, Java Script, JQuery but i am little bit confused with "lazyload", Is it predefined method ?
 
Top