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>

25 nhận xét:

🔰☣ Lê Thanh Phong☣🔰⚜️ nói...

Chất chơi <3

Trường Nguyễn nói...

(y) (y)

Ngọc Tính IT nói...

cướp cmt 2 =))

Trường Nguyễn nói...

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

Star Nguyễn IT nói...

Cướp cmt 3 =))

Trường Nguyễn nói...

Hay quá, vỗ tayyy

Star Dương Design nói...

Cmt 4 :D

Star Dũng Blog nói...

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

Star Dũng Blog nói...

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

Trường Nguyễn nói...

Ok cảm ơn :)

Trần Thanh Bình nói...

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

Trường Nguyễn nói...

Thanks (y)

Trọng Khanh Nguyễn nói...

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ường Nguyễn nói...

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ọng Khanh Nguyễn nói...

không

Trường Nguyễn nói...

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

Trọng Khanh Nguyễn nói...

e biết mà :v

Nguyễn Lương Duy nói...

Check ib em cái

z0mbie win nói...

tý thử xem

Trường Nguyễn nói...

(y)

Thanh Phú IT nói...

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

Trường Nguyễn nói...

(y) (y)

Game Mobi nói...

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

Hùng Hoàng nói...

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

Trường Nguyễn nói...

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

Đăng nhận xét