[Code] jquery LazyLoad - hiệu ứng hiện ảnh khi cuộn chuột

  • blogger

    jquery LazyLoad dùng để làm gì


    jquery LazyLoad nhằm làm trễ việc load ảnh trong trang web. Ảnh nằm bên ngoài khung hình sẽ không load lên cho đến khi người dùng cuộn trang web tới nó. Sử dụng Lazy Load ở những trang web dài với nhiều hình ảnh sẻ giúp trang được tải nhanh hơn, trong một số trường hợp còn giúp giảm tải cho máy chủ web cải thiện tốc độ trải trang của bạn đáng kể với website sử dụng nhiều hình ảnh.



    Cách sử dụng jqueryLazyLoad


    Các bạn sử dụng code dưới cho vào sau <head> là được. cho nó load trước.

    Code:
    (function(a) {
        a.fn.lazyload = function(b) {
            var c = {
                threshold: 0,
                failurelimit: 0,
                event: "scroll",
                effect: "show",
                container: window
            };
            if (b) {
                a.extend(c, b)
            }
            var d = this;
            if ("scroll" == c.event) {
                a(c.container).bind("scroll", function(b) {
                    var e = 0;
                    d.each(function() {
                        if (a.abovethetop(this, c) || a.leftofbegin(this, c)) {} else if (!a.belowthefold(this, c) && !a.rightoffold(this, c)) {
                            a(this).trigger("appear")
                        } else {
                            if (e++ > c.failurelimit) {
                                return false
                            }
                        }
                    });
                    var f = a.grep(d, function(a) {
                        return !a.loaded
                    });
                    d = a(f)
                })
            }
            this.each(function() {
                var b = this;
                if (undefined == a(b).attr("original")) {
                    a(b).attr("original", a(b).attr("src"))
                }
                if ("scroll" != c.event || undefined == a(b).attr("src") || c.placeholder == a(b).attr("src") || a.abovethetop(b, c) || a.leftofbegin(b, c) || a.belowthefold(b, c) || a.rightoffold(b, c)) {
                    if (c.placeholder) {
                        a(b).attr("src", c.placeholder)
                    } else {
                        a(b).removeAttr("src")
                    }
                    b.loaded = false
                } else {
                    b.loaded = true
                }
                a(b).one("appear", function() {
                    if (!this.loaded) {
                        a("<img />").bind("load", function() {
                            a(b).hide().attr("src", a(b).attr("original"))[c.effect](c.effectspeed);
                            b.loaded = true
                        }).attr("src", a(b).attr("original"))
                    }
                });
                if ("scroll" != c.event) {
                    a(b).bind(c.event, function(c) {
                        if (!b.loaded) {
                            a(b).trigger("appear")
                        }
                    })
                }
            });
            a(c.container).trigger(c.event);
            return this
        };
        a.belowthefold = function(b, c) {
            if (c.container === undefined || c.container === window) {
                var d = a(window).height() + a(window).scrollTop()
            } else {
                var d = a(c.container).offset().top + a(c.container).height()
            }
            return d <= a(b).offset().top - c.threshold
        };
        a.rightoffold = function(b, c) {
            if (c.container === undefined || c.container === window) {
                var d = a(window).width() + a(window).scrollLeft()
            } else {
                var d = a(c.container).offset().left + a(c.container).width()
            }
            return d <= a(b).offset().left - c.threshold
        };
        a.abovethetop = function(b, c) {
            if (c.container === undefined || c.container === window) {
                var d = a(window).scrollTop()
            } else {
                var d = a(c.container).offset().top
            }
            return d >= a(b).offset().top + c.threshold + a(b).height()
        };
        a.leftofbegin = function(b, c) {
            if (c.container === undefined || c.container === window) {
                var d = a(window).scrollLeft()
            } else {
                var d = a(c.container).offset().left
            }
            return d >= a(b).offset().left + c.threshold + a(b).width()
        };
        a.extend(a.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);
    $(function() {
        $("img").lazyload({
            placeholder: "http://1.bp.blogspot.com/-Qg5bi1ZtDdM/VZ5nHAyYBqI/AAAAAAAAChE/exGnasO4oyk/s640/arlinadesign.gif",
            effect: "fadeIn",
            threshold: "-50"
        })
    });

    code trên của mình là tất cả các ảnh sẽ được thêm hiệu ứng lazyload. bạn có thể tùy chỉnh lại ở phần cuối jquery  $("img").lazyload({ phần này lựa chọn class hoặc id mà bạn muốn load . ( Nhiều người đôi khi chỉ muốn lazyload một vùng nhất định
    Tags: #code #jquery-lazyload

  • surio
    cái này hình như trong webmastertool nó báo lỗi trong giao diện mobile


    --Chữ ký--
    Liên hệ đặt tấm lợp lấy sáng ngay hôm nay cùng với http://ohuichinhhangvn.com không nên bỏ qua
  • blogger
    @surio đã viết:cái này hình như trong webmastertool nó báo lỗi trong giao diện mobile

    Nó báo lỗi gì vậy bạn. mình sử dụng chưa thấy bị sao

  • Sponsored content

Thông tin tác giả
avatar
MEM LV2
Bài viết :
88
Points :
236
Like :
36
blogger
An toàn
Xem lý lịch thành viên
Thông tin tác giả
avatar
MEM
Bài viết :
1
Points :
1
Like :
0
Punbb
Xem lý lịch thành viên http://daivietcompany.com
Thông tin tác giả
avatar
MEM LV2
Bài viết :
88
Points :
236
Like :
36
blogger
An toàn
Xem lý lịch thành viên
Thông tin tác giả
Sponsored content
Bài viết liên quan
    Đang tải dữ liệu

Permissions in this forum:
Bạn không có quyền trả lời bài viết