Tăng tốc độ tải trang web với jQuery Lazyload Plugin

'14

Lazyload là plugin của jQuery cải thiện việc tải hình ảnh ở những trang web dài.

Lazyload là plugin của jQuery cải thiện việc tải hình ảnh ở những trang web dài. Ảnh bên ngoài khung hình sẽ chỉ thể hiện khi người dùng kéo chuột tới. Sử dụng Lazyload ở những trang web dài với nhiều hình ảnh sẽ giúp cho trang được tải nhanh hơn, trong một số trường hợp nó còn giúp giảm tải cho máy chủ web.

Description:
Như cái tên gọi của nó: “Lazy”. Hình ảnh trên web của bạn sẽ được delay để tải sau, do đó thay vì tải hình, trình duyệt sẽ lo phần nội dung text trước. Tốc độ được cải thiện đáng kể.
Hình ảnh chỉ được tải khi nó lọt vào tầm nhìn của người dùng

Cách sử dụng
Trước tiên, bạn cần download jQuery và Lazyload plugin. Sau đó thêm vào trong thẻ <head> của trang web. Bạn có thể dowload lazy load plugin tại:
https://raw.githubusercontent.com/tuupola/jquery_lazyload/master/jquery.lazyload.js
Sau đó để sử dụng lazy load bạn chỉ cần một câu lệnh đơn giản:

$(‘img’).lazyload();

Tùy biến theo yêu cầu cá nhân
Lazyload cung cấp một số lựa chọn như load 1 phần của ảnh, dùng ảnh thay thế, gọi sự kiện, hiệu ứng khi xuất hiện ảnh, đặt thời gian tải ảnh... Bạn có thể xem thêm tại trang chủ của lazyload: http://www.appelsiini.net/projects/lazyload
Đoạn mã dưới đây sẽ tải trước 200px của ảnh trước khi ảnh xuất hiện

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

Dùng ảnh thay thế

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

Ảnh thay thế đi cùng plugin ảnh gif 1x1px, bạn có thể thay bằng đường dẫn ảnh riêng của mình

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

$("img").lazyload({ placeholder : "img/grey.gif", effect : "fadeIn"});

Demo tại đây: http://www.appelsiini.net/projects/lazyload/enabled.html