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

735
14-06-2018
Lazy load jQuery là gì? Sử dụng như thế nào?

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).

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

2. jQuery LazyLoad Any

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

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

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.

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

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.

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

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.

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

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.

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

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ự. 

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

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.

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

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.

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

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.

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

Dịch từ: jquerybyexample.net

GiangPTH

 

BizFly Cloud là nhà cung cấp dịch vụ điện toán đám mây với chi phí thấp, được vận hành bởi VCCorp.

BizFly Cloud là một trong 4 doanh nghiệp nòng cốt trong "Chiến dịch thúc đẩy chuyển đổi số bằng công nghệ điện toán đám mây Việt Nam" của Bộ TT&TT; đáp ứng đầy đủ toàn bộ tiêu chí, chỉ tiêu kỹ thuật của nền tảng điện toán đám mây phục vụ Chính phủ điện tử/chính quyền điện tử.

Độc giả quan tâm đến các giải pháp của BizFly Cloud có thể truy cập tại đây.

DÙNG THỬ MIỄN PHÍ và NHẬN ƯU ĐÃI 3 THÁNG tại: Manage.bizflycloud


SHARE