[Javascript] Hướng dẫn sử dụng Lazy Load trong Jquery giúp giảm băng thông khi load hình ảnh

Đăng bởi: Admin | Lượt xem: 2410 | Chuyên mục: Javascript

jQuery Lazy Load được xây dựng giúp người dùng cuộn tới đâu, load hình tới đó giúp cho việc giảm tải băng thông cho Website. Trong bài viết này vncoder.vn sẽ hướng dẫn các banj sử dụng jQuery Lazy Load trong dự án của mình.

1. Giới thiệu và cài đặt

Để có thể cài đặt jQuery Lazy Load các bạn cần thực hiện các bước sau:

Truy cập vào https://github.com/tuupola/jquery_lazyload và nhấn vào nút “Download ZIP”.
Giải nén file vừa tải về
Các bạn hãy vào folder “jquery_lazyload-master” và sau đó copy file “jquery.lazyload.min.js”.
Sau đó, các bạn hãy bỏ vào folder chứa website mà chúng ta xây dựng.
Tiến hành thêm thư viện vào trong website của chúng ta, nhưng các bạn cũng cần phải tải thư viện jQuery tại http://jquery.com về trước nhé:
Cài đặt hoàn tất

2. Sử dụng

Đầu tiên, để sử dụng thư viện này, các bạn hãy chuẩn bị cho tôi 1,2 hoặc nhiều tấm hình trở lên. Cụ thể ở đây tôi sẽ có tấm hình “demo.gif”:

Tiếp theo, chúng ta sẽ load tấm hình đó vào HTML và hãy nhân bản lên thành nhiều tấm để tiện cho việc chúng ta tập cách sử dụng:

<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
    <img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
    <img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
    <img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
    <img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
    <img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
    <img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
    <img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
    <img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
    <img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
    <img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
    <img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
    <img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
    <img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
    <img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
    <img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
    <img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
    <img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
    <img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
    <img data-original="demo.gif" class="ten-lop-ban-tu-dat" />

Ở đoạn code trên, nếu các bạn để ý thì thay vì chúng ta dùng thẻ “<img>” và có thuộc tính “src” để chỉ rõ đường dẫn của tấm hình thì nay nó đã được thay thế bằng “data-original” và cách gán đường dẫn giống với thuộc tính “src”

Các bạn cũng nên định nghĩa một tên class để tiện cho việc tìm đến những tấm ảnh này thông qua jQuery. Sau đó, các bạn hãy dùng thẻ “<script>” để tiến hành sử dụng thư viện jQuery Lazy Load:

<script type="text/javascript">
        $(function() {
            $("img.ten-lop-ban-tu-dat").lazyload({
                effect : "fadeIn"
            });
        });
    </script>

Sau khi thực hiện đoạn code này, chúng ta đã thành công trong việc sử dụng thư viện rồi đấy. Thông qua việc sử dụng phương thức “lazyload()” ở thẻ “<img>” mà bạn chỉ định. Và đối số trong phương thức “lazyload()” chính là một đối tượng chứa các tính năng mà bạn có thể tùy biến theo hướng dẫn của tác giả Plugin jQuery Lazy Load.

Và đoạn code đầy đủ của nó sẽ như sau:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Test</title>    
    <style type="text/css">
    img {
        float:left;
        width: 500px;
        height: 500px;
    }
    </style>
    <script type="text/javascript" src="jquery-1.11.3.min.js"></script>    
    <script type="text/javascript" src="jquery.lazyload.min.js"></script>
</head>
<body>
    <img src="demo.gif" class="ten-lop-ban-tu-dat" />
    <img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
    <img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
    <img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
    <img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
    <img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
    <img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
    <img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
    <img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
    <img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
    <img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
    <img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
    <img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
    <img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
    <img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
    <img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
    <img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
    <img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
    <img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
    <img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
    <img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
    <img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
    <img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
    <img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
    <img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
    <img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
    <img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
    <img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
    <img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
    <img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
    <img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
    <img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
    <img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
    <img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
    <img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
    <img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
    <img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
    <img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
    <img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
    <img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
    <img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
    <img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
    <img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
    <img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
    <img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
    <img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
    <img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
    <img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
    <img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
    <img data-original="demo.gif" class="ten-lop-ban-tu-dat" />    
    <script type="text/javascript">
        $(function() {
            $("img.ten-lop-ban-tu-dat").lazyload({
                effect : "fadeIn"
            });
        });
    </script>
</body>
</html>

3. Một số tính năng có thể sử dụng trong jQuery Lazy Load

threshold	Load trước số pixel chỉ định
event	Thực hiện load hình ảnh khi sự kiện chỉ định được gọi
effect	Hiệu ứng load hình ảnh
skip_invisible	Bỏ qua các hình ảnh không được hiển thị trong viewport
failure_limit	Chạy vòng lặp kiểm tra hình ảnh load bị lỗi với số lần quy định

Demo cách sử dụng gộp các tính năng:

<script type="text/javascript">
        $(function() {
            $("img.ten-lop-ban-tu-dat").lazyload({
                effect : "fadeIn",
                threshold: 100,
                event : "mouseover"
            });
        });
    </script>

4. Kết luận

Bài viết trên đây của vncoder.vn chỉ là thống kê ngắn gọn các tính năng của jQuery Lazy Load. Với những chức năng này các bạn có thể sử dụng ngay được trong dụ án của mình, ngoài ra các bạn có thể tham khảo thêm các chức năng khác nữa của Lazy Load tại đây. Chúc bạn thành công!