Lazy loading là kỹ thuật rất quan trọng trong lập trình hướng đối tượng. Vì nhờ có nó ta có thể tiết kiệm được rất nhiều thao tác gọi nạp file khi sử dụng. Bản thân lazy loading sử dụng magic method (các phương thức đặc biệt trong PHP) để triệu gọi dữ liệu.
Lazy loading images đơn giản và dễ với jQuery. Sử dụng phương pháp load ảnh bằng JavaScript sẽ giúp tăng hiệu suất và tốc độ website lên đáng kể.
1. Chuẩn bị thư viện:
2. Viết code:
Bạn có thể tạo file js rồi gọi vào hoặc viết trực tiếp trong thẻ <script>…</script>
// Thêm class 'lazy' vào tất cả hình ảnh trên website
$('img').each(function () {
$(this).addClass("lazy");
});
// Gọi hàm lazy load
$(function () {
$("img.lazy").lazyload();
});
Chắc hẳn trong quá trình xây dựng Website, ít nhiều các bạn cũng từng nghĩ làm cách nào để có thể giảm tải bớt băng thông cho việc load hình ảnh trên Website, nhất là những trang người dùng chỉ load vào xem nội dung rồi vội vàng ra đi. Như thế thì chúng ta vô tình lại tốn băng thông nhưng lại không giúp ích gì được cho chúng ta.
Vậy làm sao để hạn chế điều này? Có cách nào có thể giúp người dùng cuộn trang tới đâu, hình ảnh load tới đó không? Câu trả lời là có và tôi sẽ giới thiệu với các bạn đến với jQuery Lazy Load Plugin để có thể thực hiện được việc này.
Chúc các bạn thành công!