Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.

  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

Hướng dẫn sử dụng lazy load của jquery

Chủ đề thuộc danh mục 'HTML - CSS - JS - PHP - ASP' được đăng bởi springriver, 11/2/15.

Lượt xem: 4,199

  1. springriver Thành viên cấp 1

    Định nghĩa

    Lazy Load 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.

    [​IMG]

    Cách sử dụng:

    Trước tiên, bạn cần download jQuery tại trang jquery.com và plugin Lazy Load tại plugins. jquery.com/lazyload/

    Sau đó thêm các thư viện bên trong thẻ <head> như sau:

    HTML:
    
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>

<script type="text/javascript" src="js/jquery.lazyload.js"></script>
    Khi muốn 1 ảnh nào đó sử dụng lazyload, ta nên viết theo cú pháp sau:

    HTML:
    
<img class="lazy" data-original="images/example.jpg"/>
    ta dùng chung một class cho tất các ảnh dùng lazyload( ở đây tôi dùng class=”lazy”) để ta có thể dễ dàng điều chỉnh các ảnh.

    lệnh jQuery như sau:

    HTML:
    
$(function(){

$("img.lazy").lazyload();

});
    Cài đặt Threshold

    Mặc định khi ảnh được load, chúng sẽ hiển thị trên màn hình, nếu muốn ảnh được load sớm hơn, ta dùng thông số threshold, ví dụ cho giá trị threshold là 200, ảnh sẽ load 200pixels trước khi nó hiển thị trên khung hình

    HTML:
    
$(function(){
$("img.lazy").lazyload({
threshold: 200;
});
});
    Bạn có thể sử dụng sự kiện của jQuery như click hoặc mouseover, ví dụ: mặc định nó sẽ đợi đến khi người dùng cuộn xuống mới hiển thị trên khung hình, để load ảnh chỉ khi người dùng click vào chúng, ta có thể dùng:

    HTML:
    
$("img.lazy").lazyload({
event : "click"
});
    Mặc định plugin sẽ đợi đến khi ảnh load hết và gọi hàm show(), chúng ta cũng có thể chọn hiệu ứng ta muốn, như ví dụ này tôi dùng hiệu ứng fadeIn

    HTML:
    
$("img.lazy").lazyload({
effect : "fadeIn"
});
    Ta cũng có thể sử dụng plugin cho việc cuộn một container, ví dụ thẻ div với thanh cuộn

    HTML:
    
#contain {
height: 600px;
overflow: scroll;
}

$("img.lazy").lazyload({
container: $("#contain")
});

    ...

    Xem thêm các chủ đề cùng chuyên mục

    Facebook Group Việt Designer
    Tham gia nhóm
    Facebook Fanpage Việt Designer
    Thích trang
    springriver, 11/2/15
    #1
    Phạm Hữu Dư thích bài viết này
Từ khóa:

Ủng hộ diễn đàn