PINNED POST

[PIN][slideshow]

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

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 

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() {
   $(&quot;img&quot;).lazyload({placeholder : &quot;http://4.bp.blogspot.com/-wRaPvE0Jqrs/USIW4erewNI/AAAAAAAAFNk/TXDOtgYUGlc/s1600/grey.gif&quot;,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


Loading...

6 comments:

  1. I have been searching for ways to improve my blog and I must say this was really helpful. From techzbyte.com

    ReplyDelete
    Replies
    1. We are glad that you like it Olaniyi and we hope to always see you on our site again Thanks

      Delete
  2. Nice articles bro! your tutorials are helpful...
    i rep: http://www.infocity.com.ng

    ReplyDelete
    Replies
    1. Oluwole ibrahim thanks we hope to be written more useful tips that you will always love

      Delete

PAGE LOAD TIME

[PAGE LOAD TIME][grids]

ADSENSE LESSON

[adsense][slideshow]