Hiệu ứng lazyload - load ảnh tuần tự và mượt mà bằng jquery cho Blogspot
/ lúc / 25 bình luận
Ra mắt BSW Community - trang đăng bài tự do dành cho bạn, thoải mái trao đổi, đặt câu hỏi, thắc mắc, viết bài viết mới hay thậm chí rao vặt, buôn bán. Click trải nghiệm ngay!
Hiệu ứng lazyload - load ảnh tuần tự và mượt mà bằng js cho Blogspot - hiệu ứng load ảnh bằng jquery, hình ảnh sẽ được tải tuần tự từ trên xuống dưới tạo hiệu ứng mượt mà cho Blog, trông đẹp và chuyên nghiệp hơn.
Hiệu ứng lazyload - load ảnh tuần tự và mượt mà bằng jquery cho Blogspot

Cách thêm vào Blogspot

Chèn tất cả javascript này vào trước </head> trong Template.

<script type='text/javascript'>
// lazy load by bacsiwindows.com
//<![CDATA[
(function($) {
    $.fn.lazyload = function(options) {
        var settings = {
            threshold: 0,
            failurelimit: 0,
            event: "scroll",
            effect: "show",
            container: window
        };
        if (options) {
            $.extend(settings, options);
        }
        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;
                        }
                    }
                });
                var temp = $.grep(elements, function(element) {
                    return !element.loaded;
                });
                elements = $(temp);
            });
        }
        this.each(function() {
            var self = this;
            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;
            }
            $(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"));
                };
            });
            if ("scroll" != settings.event) {
                $(self).bind(settings.event, function(event) {
                    if (!self.loaded) {
                        $(self).trigger("appear");
                    }
                });
            }
        });
        $(settings.container).trigger(settings.event);
        return this;
    };
    $.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();
    };
    $.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'>
$(function() { $(&quot;img&quot;) .lazyload({ placeholder : &quot;//img1.blogblog.com/img/blank.gif&quot;, effect: &quot;fadeIn&quot; }); });</script>

BÌNH LUẬN VỀ BÀI VIẾT (25)

avatar
🔰☣ Lê Thanh Phong☣🔰⚜️

Chất chơi <3

TRẢ LỜI
avatar
Trường Nguyễn

(y) (y)

TRẢ LỜI
avatar
Ngọc Tính IT

cướp cmt 2 =))

TRẢ LỜI
avatar
Trường Nguyễn

Tổ quốc ghi công!! (y)

TRẢ LỜI
avatar
Star Nguyễn IT

Cướp cmt 3 =))

TRẢ LỜI
avatar
Trường Nguyễn

Hay quá, vỗ tayyy

TRẢ LỜI
avatar
Star Dương Design

Cmt 4 :D

TRẢ LỜI
avatar
Star Dũng Blog

Không biết còn vé thứ tư không -_-

TRẢ LỜI
avatar
Star Dũng Blog

Quên chưa nx: Bài viết hay, Ngắn gọn và rất hữu ích :)

TRẢ LỜI
avatar
Trường Nguyễn

Ok cảm ơn :)

TRẢ LỜI
avatar
Trần Thanh Bình

Thumbnail làm rất bắt mắt, bài viết ngặn gọn. Hay

TRẢ LỜI
avatar
Trường Nguyễn

Thanks (y)

TRẢ LỜI
avatar
Trọng Khanh Nguyễn

trang chủ có thêm bài viết mới cập nhật là sao ad? bị thừa sao sao á. em nghĩ sao nó ẩn ngoài home vào bài viết r hiện thì ok

TRẢ LỜI
avatar
Trường Nguyễn

Do chỉ hiển thị tối đa 3 bài viết (không để cuộn chuột quá nhiều) nên phải thêm đó. HIểu không?

TRẢ LỜI
avatar
Trọng Khanh Nguyễn

không

TRẢ LỜI
avatar
Trường Nguyễn

Ờ vậy tốt, tại a nói a cũng không hiểu

TRẢ LỜI
avatar
Trọng Khanh Nguyễn

e biết mà :v

TRẢ LỜI
avatar
Nguyễn Lương Duy

Check ib em cái

TRẢ LỜI
avatar
z0mbie win

tý thử xem

TRẢ LỜI
avatar
Trường Nguyễn

(y)

TRẢ LỜI
avatar
Thanh Phú IT

- chất chơi người dơi

TRẢ LỜI
avatar
Trường Nguyễn

(y) (y)

TRẢ LỜI
avatar
Game Mobi

Temp củ em có dùng cái này. Cũng khá là chất chơi người dơi :)

TRẢ LỜI
avatar
Hùng Hoàng

Có cách nào để nó không nháy nháy ảnh mỗi khi kéo xuống không ad

TRẢ LỜI
avatar
Trường Nguyễn

Đó là hiệu ứng fadeIn, bạn có thể xoá nó ở cuối đoạn javascript trên nhé.

TRẢ LỜI

THAM GIA TRANH TOP BÌNH LUẬN NGAY!

Một số lưu ý khi bình luận

Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy).

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời.

Bạn có thể dùng ảnh động hoặc mã hóa code HTML để bình luận.