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

avatar

blogger68
191
29
blogger
An toàn
cập nhật
Thành viên quen thuộc
Thành viên quen thuộc

Bài viết :
68
Points :
191
Like :
29
blogger
An toàn
cập nhật

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
 Trả lời bài viết
avatar

surio1
1
0
Punbb
Thành viên mới
Thành viên mới

Bài viết :
1
Points :
1
Like :
0
Punbb
cái này hình như trong webmastertool nó báo lỗi trong giao diện mobile
 Trả lời bài viết
avatar

blogger68
191
29
blogger
An toàn
cập nhật
Thành viên quen thuộc
Thành viên quen thuộc

Bài viết :
68
Points :
191
Like :
29
blogger
An toàn
cập nhật
@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
 Trả lời bài viết
Điểm 4.6/5 dựa vào 87 đánh giá

Có Thể Bạn Quan Tâm

Đang tải...