banner
banner
banner
banner

HOW TO MAKE A BLOGGER BLOG LOAD FAST WITH LAZY LOADING JQUERY

89
banner

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
0


Related Articles & Comments

  • banner

Leave a Comment

Your email address will not be published. Required fields are marked *

Join our feeds to automatically receive the latest headlines, news, and information formatted for your club's website or news reader.

Social connect:
[apsl-login-lite login_text='']