Thứ năm, ngày 18 tháng 1 năm 2018

Sử dụng JQuery Lazyload

Ngày đăng: 16/4/2011, 10:46:31PM | Lượt xem: 2,857
Hot!

Lazy loader là một plugin của JQuery được viết bằng Javascript nó dùng để tải hình ảnh ở các trang web dài ảnh ở bên ngoài khung hình sẽ chỉ hiện ra khi người dùng kéo chuột đến.

Sử dụng Lazyload ở các trang web dài sẽ giúp cho trang web load nhanh hơn, phần nội dung của trang web sẽ được load lên trước sau đó khi người dùng kéo chuột Lazyload mới load hình ảnh đó về cho bạn, ở trong một số trường hợp nó còn có tác dụng giảm tải cho Web Server.

Cách sử dụng:

Đầu tiên bạn phải download JQueryLazyload sau đó include chúng vào header của trang web

 

code
1
2
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>
code
1
2
3
<script type="text/javascript">
$("img").lazyload();
</script>

Đoạn code này sẽ áp dụng Lazyload cho tất cả các hình ảnh trong trang web

Tùy biến:

Để tải trước 200px của ảnh trước khi bạn di chuột đến:

code
1
$("img").lazyload({ threshold : 200 });

Ảnh thay thế (trước khi ảnh được load): tôi thường để ảnh 1x1 pixel

code
1
$("img").lazyload({ placeholder : "img/grey.gif" });


Click vào để hiển thị ảnh:

code
1
2
3
4
$("img").lazyload({
    placeholder : "img/grey.gif",
    event : "click"
});

Sử dụng hiệu ứng ảnh mờ khi xuất hiện:

code
1
2
3
4
$("img").lazyload({
    placeholder : "img/grey.gif",
    effect : "fadeIn"
});

Cấu hình độ trễ khi load ảnh

code
1
2
3
4
5
6
7
8
9
$(function() {         
    $("img:below-the-fold").lazyload({
        placeholder : "img/grey.gif",
        event : "sporty"
    });
});
$(window).bind("load", function() {
    var timeout = setTimeout(function() {$("img").trigger("sporty")}, 5000);
});

Bạn có thể tìm hiểu thêm về Lazyload  tại đây

Xem Demo

 Chia sẻ qua: 
Hot!
Ý kiến bạn đọc

These items will be permanently deleted and cannot be recovered. Are you sure?

Gallery

image

Maecenas viverra rutrum pulvinar

Maecenas viverra rutrum pulvinar! Aenean vehicula nulla sit amet metus aliquam et malesuada risus aliquet. Vestibulum rhoncus, dolor sit amet venenatis porta, metus purus sagittis nisl, sodales volutpat elit lorem…

Read more

Text Links

Thiết kế logo chuyên nghiệp Insky
DAFABET
W88 w88b.com/dang-ky-tai-khoan-w88
W88
ca do bong da online
Copyright © 2011 - 2012 vietshare.vn by phamkhuong102@gmail.com doanhkisi2315@gmail.com. All rights reserved.