Trang chủ / Lazyload Jquery làm mượt ảnh và ảnh sẽ load nhanh blogspot hơn

Thứ Bảy, 10 tháng 1, 2015

Lazyload Jquery làm mượt ảnh và ảnh sẽ load nhanh blogspot hơn

Giới thiệu: Kéo tới đâu ảnh mới bắt đầu load tới đó, giảm thời gian tải ảnh. Mặc định blog khi load, sẽ load tất cả các ảnh và thành phần có trong blog. Điều này sẽ làm chậm blog nếu web, hay blog có nhiều ảnh. Nhưng với lazyload thì chỉ load những ảnh lọt trong tầm mắt người nhìn.

 Ngoài ra, còn có thêm hiệu ứng tải ảnh kiểu “Fade in”, khi hiện ảnh trông rất đẹp và chuyên nghiệp.

 Lưu ý: Lazyload sẽ được load sau cùng, sau khi đã load hết các mã Java, js, HTML của website hay blog.


CÁCH THỰC HIỆN 

 1. Đăng nhập Blogger Dashboard (Bảng điều khiển) 
2. Chọn: Design (Thiết kế) > Edit HTML (Chỉnh sữa HTML) 
3. Không cần đánh dấu chọn ô: Expand Widget Templates (Mở rộng mẫu tiện ích)

 4. Chèn script

 Bước 1: 
Tìm thẻ <head>

 - Thêm vào dưới nó đoạn code sau:
<script src='http://kenhdaihoc.com/blogger/jquery.min1.4.3.js' type='text/javascript'/>

Bước 2: Tìm thẻ đóng </head>

 - Thêm vào trước nó đoạn code sau:

 <!-- 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 : "LINK_HÌNH", /*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>

 * Các tính năng thêm. Thêm vào sau dòng: effect: "fadeIn"

 threshhold:100 /*Số pixel của ảnh được tải trước*/
container: $("class") /*Dùng cho class scroll được. Thay thành class bạn muốn áp dụng. 
Ví dụ: #container, #scroll, .imagescroll,…*/

Bước 3: Save template. (Lưu mẫu)
21:12 Bình luận
Avatar of cường lê
Tác giả blog: Lê Ngọc Cường

Có niềm đam mê tin học, thích thú về những điều mà internet nói chung và website mang lại, cũng chính vì lượng kiến thức dồi dào và phong phú trên mạng nên blog vienduong technology ra đời dựa trên những kinh nghiệm của bản thân mình và chọn lọc tổng hợp từ nhiều nguồn, giúp mình không những kiến thức cũ và giúp các bạn mới tìm hiểu và có sở thích như mình không phài mất thời gian mò mẫm mất nhiều thời gian.

0 nhận xét:

Đăng nhận xét

© 2015 ZCuongtin mẫu tạm 07

template trackers template trackers template trackers template trackers

CSS Valide !