JQuery Lazy Load Plugin For images and posts

Again with new post !!!  Now its time write another great post of JQuery Lazy Load Plugin for images,recently response is too awesome for the post, now again back to post.

How to view yours blog by disabling JavaScript?

In order to check if yousr blog at least is a loadable and provides fair interface to your visitors with JavaScript-disabled browsers, I will guide you by a giving several examples. Lets take an example of the Gmail blog which uses the Jquery Easy Load effect and also runs on a Dynamic Theme.

What did you observe?

You observed a lazy loading effect as you kept on scrolling down. The posts kept on loading infinitely. Interesting isn't it? But now lets viist to the same blog with JavaScript enabled.

Disable JavaScript:

For simplicity I am assuming you are using Google Chrome Browser. Following these steps to disable JavaScript in chrome.

1. Go To the Settings
2. Click Advanced Settings
3. Click Content settings under Privacy
4. Then inside the popup window you will find an option to turn Off  JavaScript as shown in the image below:

   5. Hit the Done button

Now visit the same Gmail blog again. Refresh the page and tell me what do you see?

You see a blank page! This explains everything to you. In Custom Blogger templates which are using Infinite Scrolling effect and if JavaScript is disabled by user then only the first post or the second post will display and the remaining posts wont even show up on your homepage . Consequences are such that you lose precious Page Views.

What would you see on blogs where Image Lazy load effect is used?

You will see only first image or second image being displayed the other image wont event appear. If the plugin developer wasa  clever enough to set conditional statements for JavaScript Disabled browsers, all your images will display just fine else yours readers would be lost with no image being displayed.

When and How to use JQuery???

With all that being said, we leave the decision on you whether you wish to use this trending Loading effect for your blogger posts/image or not, but at least this explains now why we don't write tutorials on such tools.

You can surely add Jquery to add some cool effects to your blog design as long as the object using it loads fine even if JavaScript is disabled. Normally you can use JavaScript to create widgets like Recent comments, Popular Posts, Related Posts etc. because even if they don't load, they will at least not return a blank Page or effect your pageviews.

If you are developer then I recommend to add conditions to how your code may react in case of No JavaScript support. Instead of using just the display:none property in yours stylesheet also add an extra div section for your object and control its behaviour using JQuery. Follow this Psedudo code:

If JavaScript SupportedDo thisElseIf JavaScript not supportedDo this

Now you would wonder how to the check whether a browser supports JavaScript or not. If a browser supports it then it will surely execute the code else it wont. So if you don't want a div section to display when Jquery is supported simply add a display:none property to it using Jquery AddClass() function. This Jquery function won't execute if JavaScript is disabled and thus the div section will show up correctly on screen  but this div section will not display if Javascript is enabled because the Addclass() function will execute and hide it on screen. That's how I personally handle this problem. You can surely apply different logics.

Share your view one the comments.