Lazy load jQuery là gì? Sử dụng như thế nào?

Nguyễn Trọng Nhân

759

14-06-2018

Lazy Loading của Jquery giúp "trì hoãn" việc tải ảnh xuống trên website. Ảnh nằm bên ngoài màn hình sẽ không hiển thị cho đến khi người dùng cuộn trang web tới vị trí của nó. Sử dụng Lazy Load jQuery hay jQuery Lazy load không những trang được tải nhanh hơn, mà còn giúp giảm tải cho webserver, nâng cao trải nghiệm người dùng.

Vì vậy, trong bài này, Bizfly Cloud sẽ giới thiệu list danh sách gồm 10 plugin jQuery tuyệt vời để tải theo kĩ thuật lazy cho các hình ảnh và video, đặc biệt dung lượng của chúng đều khá nhẹ và cực kì dễ sử dụng.

1. BttrLazyLoading

Link: https://github.com/shprink/BttrLazyLoading

BttrLazyLoading là một plugin thực hiện lazy load images jquery cho phép ứng dụng web trì hoãn việc tải hình ảnh cho đến khi hình ảnh được cuộn đến, nhưng không chỉ có thế! BttrLazyLoading còn cho phép bạn tạo các phiên bản hình ảnh khác nhau phù hợp với 4 kích thước màn hình khác nhau như sau: điện thoại (<768px), máy tính bảng (> 768px), máy tính để bàn (> 992px) và Máy tính để bàn lớn (> 1200px).

2. jQuery LazyLoad Any

Link: https://github.com/emn178/jquery-lazyload-any

3. Echo.js

Link: http://toddmotto.com/echo-js-simple-javascript-image-lazy-loading/

Echo.js là một thư viện lazy loading images khá đơn giản, nó có dung lượng nhỏ hơn 1KB.

Lazy-loading hoạt động bằng cách chỉ tải các tài nguyên cần thiết từ server theo request gửi đi khi phần tử nào đó "sẽ" có khả năng được xem, nó thực thi hoàn toàn tự động và đơn giản bằng cách thay đổi thuộc tính src image.

4. Lazy Load jQuery Plugin

Link: http://www.jquerybyexample.net/2014/02/awesome-jquery-lazy-load-plugins.html#

Lazy Load jQuery sẽ trì hoãn việc tải hình ảnh trong các trang web dài. Hình ảnh bên ngoài khung nhìn viewport (phần hiển thị của trang web trên màn hình) sẽ không được tải cho đến khi khi người dùng cuộn đến và xem chúng. Sử dụng Lazy Loading images trên các trang web dài chứa nhiều hình ảnh lớn giúp cải tiến tốc độ tải trang một cách hiệu quả, làm hài lòng cả khách truy cập và cỗ máy tìm kiếm Google.

5. Unveil plugin

Link: http://www.jquerybyexample.net/2014/02/awesome-jquery-lazy-load-plugins.html#

Unveil là một plugin jQuery, đây còn là phiên bản nhẹ hơn của plugin Lazy Load phía trên. Unveil có hỗ trợ để xử lí các hình ảnh có độ phân giải cao cho các thiết bị có màn hình võng mạc (retina displays) và nhỏ hơn 1k.

6. Lazy Load XT

Link: https://github.com/ressio/lazy-load-xt/

Lazy Load XT là một plugin jQuery định hướng di động, nhanh chóng, và có thể mở rộng để tiến hành lazy loading với hình ảnh/ video, với sự hỗ trợ được tích hợp của jQueryMobile framework.

7. stalactite

Link: http://jonobr1.github.io/stalactite/

Một plugin jQuery giúp gói nội dung của một phần tử theo cách rất từ từ và đúng chất lười biếng. Không giống như hầu hết các packing libraries khác luôn cố gắng làm tất cả các math và phân loại lên phía trước, stalactite có một cách tiếp cận lười biếng và sắp xếp từng phần tử con theo tuần tự. 

8. LazyYT.js

Link: http://www.newmediacampaigns.com/blog/lazyytjs-a-jquery-plugin-to-lazy-load-youtube-videos

Đây là plugin của jQuery sử dụng để tải các video Youtube. Trong lần tải đầu tiên, div sẽ được thay thế bằng preview img của video. Khi di chuột, preview img sẽ được thay thế bằng video iframe Youtube, còn được gọi là kỹ thuật lazy load iframe.

9. jQuery Lazy

Link: http://jquery.eisbehr.de/lazy/

Plugin Lazy jQuery tải hình ảnh được chỉ định sau khi tải trang và tăng tốc thời gian tải của bạn thông qua việc này. Hình ảnh bên ngoài khu vực hiển thị sẽ chỉ được tải khi người dùng cuộn đến và xem chúng. Điều này không những giúp tăng tốc độ tải trang, mà còn làm tăng lưu lượng truy cập cho website của bạn.

10. jQuery.latley.js

Link: http://yckart.github.io/jquery.lately.js/

Đây quả là một plugin jQuery rất nhẹ để tải ảnh lười biếng.

Dịch từ: jquerybyexample.net

GiangPTH

>>> Có thể bạn quan tâm: Top 6 công cụ giảm dung lượng ảnh mà vẫn giữ nguyên chất lượng hiển thị trên website