Drawbacks of JQuery Lazy Load Plugin For Posts and Images

Lazy Load For blogger blogsJquery and CSS3 has enabled front end developers and even designers to create amazing effects but unless you check the compatibility of the code, never play with such plugins and tools because there are still people who don't use JavaScript in their browsers and your blog will look no less than a mess to them. This effects both your readership and blog pageviews. We are observing a growing trend of Jquery implementation on both Blogger and Wordpress blogs. A Famous known plugin is Lazy Load for images (inspired from Yahoo plugin) and Lazy Load for blogger posts (Also called infinite scrolling). Lazy load for images delays loading of images in long web pages and makes the page load faster, on the other hand Infinite Scrolling plugin for Blogger keeps on loading posts as you scroll down the page just like you scroll down to load more tweets in twitter.

Note: Jquery is a library of JavaScript which is a simplified version JavaScript. It simplfies calling complex functions and saves time.

Most of MBT readers often complain why we don't publish such plugins and why we don't write tutorials on blogger Dynamic Views. The answer is simple, we are very careful when we suggest widgets and resources to our readers and we will never encourage them to apply a script on their blog that may cause harm to them in one way or the other. Even a Google employee himself commented on our post when we openly discouraged readers not to apply Dynamic views unless they are willing to accept its pitfalls behind the attractive AJAX look.

One of the bitter truth is that blogs using Dynamic views don't even load if JavaScript is disabled on a page! Imagine those thousands of views that you might be loosing because of using a Jquery script that does not take care of what-to-do if-JavaScript disabled scenarios. Today I will talk from development perspective and I really recommend that you read and understand this post clearly and clear your doubts.

How to view your blog by disabling JavaScript?

In order to check if your blog at least is loadable and provides fair interface to your visitors with JavaScript-disabled browsers, I will guide you by 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 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 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:

Turn Off JavaScript in chrome

   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 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 was clever enough to set conditional statements for JavaScript Disabled browsers, all your images will display just fine else your 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 your stylesheet also add an extra div section for your object and control its behaviour using JQuery. Follow this Psedudo code:

If JavaScript Supported

Do this

Else

If JavaScript not supported

Do this

Now you would wonder how to 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 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.

An Honest Advice:

The number of internet users are turning into publishers at a fastest rate, therefore you must be careful when applying a tutorial to your blog and extra careful when the tutorial talks of Jquery and SEO. I am observing baseless SEO tips coming from new bloggers that causes more harm to blogs at long term then a short term relief. Almost every new blogger has started sharing his own ideas of SEO and writing codes. This is surely encouraging but on the other side incorrect knowledge has caused several blogs to be hit by Google penalties such as Panda and Penguin. Be extra careful whom you read and follow. I am here for any help you may need and wish to hear your views on this topic. Wish you good health and peace buddies. :)

The same problem is seen with latest GooglePlus comments Plugin!

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

10 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. Nice job Mustafa Sir, Sir can we convert any javascript widget into jquery language. Mean if there is any widget already prepared in javascript then can we shifted to make the same widget in jquery. because we like jquery due to blog loading speed.

    What is the basic difference between javascript and jquery. ? how can we use them for specific work.

    Can we use them for same problem. Can we solve any problem with both of them. Thanks and hope for earlier reply.

    ReplyDelete
  2. Hi Mohammad.
    Nice Tip for Bloggers. But i was looking on your Blog and observed that you also started using more JQuery and Scripts on your blog. Now as you got free i suppose that you'll do something for it.
    With Regards.

    ReplyDelete
  3. AM
    Yup you are right...good
    readers experiences are
    the most important factor
    for a blog to grow and grow
    faster...these plug-ins are
    great, but without the
    conditional plug-in being
    added, it might get u into
    trouble...so use it wisely...I
    would rather suggest to
    encourage ur readers in
    any possible way to enable
    javascript on their
    browser...it may work...
    With regards,
    Aditya from
    TechStake-Technology
    News Blog

    ReplyDelete
  4. did u post any article on lazy load plugin for blogger . Bloggerology

    ReplyDelete
  5. I was going to implement infinate scrolling to my blogger blog, thanks for this wonderfull post. It saved my blog

    ReplyDelete
  6. This comment has been removed by the author.

    ReplyDelete
  7. Thats Great .. I have been
    surfing online greater
    than 3 hours these days,
    but I never found any
    fascinating article like
    yours. It’s beautiful value
    sufficient for me. In my
    view, if all webmasters
    and bloggers made just
    right content as you
    probably did, the net will
    be much more helpful
    than ever before.

    Regards,
    Samandar Nichari

    ReplyDelete
  8. You saved me from a big time trouble. Had started using Advanced lazy load plugin on my wordpress site. And it doesn't display images on turning off javascript! Wish to ask this though, is it possible for you to write a tutorial on how to alter the code for non-developers so that they can apply the "If no javascript" condition easily? Otherwise i will have to disable the plugin for now. Depends on your answer.

    Thanks
    Harsh

    ReplyDelete
  9. Hello Mohammad helpful information as usual but wouldn't you agree with me just like the way you felt the need to have a responsive theme, template for blogger with the changing time and devices used currently, the same way jQuery or scripts should go hand in hand? Or would you suggest all of us to keep away and discourage the usages of such scripts and wait until a long time or sometime in future when all devices are by default have scripts enabled to surf the net, website or a blog?

    And all of this just because you're loosing a few page views?

    On top of that you have a solution to it, use conditions. And what are you doing? Simply posting the problems caused due to using scripts, and posting a possible solution to it but not the real tutorial where a newbie can understand and implement it on their blog. Or do the new blogger have to wait for the final tutorial until you want to post the problem with the solution?

    I mean you've talked about a problem and its possible solution but you are not keen on posting a tutorial and applying this possible (condition) solution to this problem which is equal to problem solved and just waiting for your tutorial and why would that be?

    My earlier comments never got published and I hope the same to happen this time so taking screen shots this time around.

    Thank you Mustafa

    ReplyDelete