Hiệu ứng tải ảnh khi cuộn trang cho Blogger

Lazy Load là một Plugin jQuery sử dụng cho việc load hình ảnh trên trang web. Thay vì load toàn bộ hình ảnh một lần khi tải trang thì với công cụ này nó sẽ load từng ảnh một, giúp cái thiện tốc độ tải trang đáng kể với các trang web sử dụng nhiều hình ảnh. Khi bạn di chuyển thanh cuộn của trình duyệt tới đâu thì ảnh mới được nạp và hiển thị, điều này làm cho hình ảnh hiện ra trông mượt và chuyên nghiệp hơn.

Hướng dẫn cài đặt Lazy Load cho Blogger (Blogspot)

Đăng nhập Blogger ~> Vào Mẫu ~> Chỉnh sửa HTML
Chèn đoạn code này vào trước thẻ </head>

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript' />
<!-- Lazy load -->
<script type='text/javascript'>
//<![CDATA[
(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 type="text/javascript" charset="utf-8">
   $(function() {        
 
    $("img") // img là áp dụng với cả blog. Nếu chỉ muốn áp dụng cho một class nào đó thì thêm class đó vào trước img. Ví dụ: .post img, #content img, .comments img,… 

.lazyload({
    placeholder : "http://ihbvietnam.com/themes/p_ihbvietnam/images/loading.gif", /*Hình thay thế khi ảnh chưa load xong*/
    effect: "fadeIn" /* Hiệu ứng mờ khi ảnh xuất hiện. Có thể sử dụng các hiệu ứng khác như: slideUp, slideDown,…*/

 });
});
</script>

Một số tính năng khác {Thêm vào sau dòng effect: "fadeIn"}

event : "click" /*Ảnh sẽ load khi click chuột vào. Thay bằng mouseover nếu muốn ảnh load khi rê chuột vào*/
threshhold:100 /*Ảnh sẽ hiện khi load được 100 pixel*/

Cuối cùng Lưu Mẫu lại là xong.Chúc các bạn thành công !