Contents
(vnCloud.vn) Ảnh là nội dung rất quan trọng đối với các trang Web. Tuy nhiên, một website dài chứa nhiều hình ảnh sẽ làm giảm tốc độ tải trang, khiến người đọc cảm thấy khó chịu khi họ không đủ kiên nhẫn để chờ đợi. Lazy Loading Image là phương pháp rất hiệu quả trong trường hợp nêu trên.
Bằng cách chỉ hiển thị ảnh lên khi người dùng cuộn trang đến ảnh đó, không cần phải load tất cả hình ảnh từ ban đầu, nó sẽ giúp website tải nhanh hơn rất nhiều đồng thời tiết kiệm được nhiều băng thông cho cả chủ sở hữu website và khách truy cập.
Để cài đặt Lazy load image, bạn có thể áp dụng các cách như sau:
$ bower install jquery.lazyload
$ npm install jquery-lazyload
Sử dụng jquery: http://jquery.eisbehr.de/lazy/
Sử dụng dịch vụ CDN
// html
<img class=”lazy” data-original=”img/example.jpg” width=”640″ height=”480″>
// javascript
$(“img.lazy”).lazyload
Trong đó:
– data-original: sử dụng thay thế cho scr là hình ảnh để hiển thị.
– Để tạo Lazy load, bạn phải gọi javascript method: image_selector.lazyload()
– Xem ví dụ trực quan kiểu load này, bạn hãy click link sau:
https://appelsiini.net/projects/lazyload/enabled/
Lazy Loading Images
Mặc định, hình ảnh sẽ hiển thị khi mình scroll đến ảnh đó tức là khi ảnh đó xuất hiện trên màn hình nó mới hiển thị lên.
Nếu bạn muốn ảnh hiển thị lên trước khi scroll đển trong khoảng nào đó, bạn có thể sử dụng threshold.
Nếu set threshold bằng 200, image đó sẽ load lên trước khi bạn scroll đến 200 pixels.
$(“img.lazy”).lazyload({ threshold : 200 });
Mặc định, hình ảnh sẽ chờ đến lúc nào bạn scroll đển nó mới hiển thị. Nhưng nếu bạn chỉ muốn nó hiển thị lên khi có sự kiện click hoặc mouseover. Bạn sử dụng như sau:
$(“img.lazy”).lazyload({ event : “click” });
Bạn có thể thêm các effects khi ảnh hiển thị lên như sau: $(“img.lazy”).lazyload({ effect : “fadeIn” });
Xem Demo tại đây.
Nếu bạn sử dụng Lazy load cho trang web của bạn thì sẽ chạy tốt đối với các trình duyệt hỗ trợ javascript.
Còn nếu không thì sao? Các images đó sẽ không được load lên?
Để xử lý trường hợp này, bạn dùng cách sau:
<img class=”lazy” data-original=”img/example.jpg” width=”640″ heigh=”480″>
<noscript>
<img src=”img/example.jpg” width=”640″ heigh=”480″
</noscript>
Sử dụng <noscript></noscript>, nếu trình duyệt không hỗ trợ javascript, images đó vẫn hiển thị bình thường.
– Để tránh placeholder image và image thật hiển thị cùng một lúc, bạn nên ẩn ảnh placeholder đi như sau:
.lazy
{ display: none;
}
– Đối với các trình duyệt hỗ trợ javascript, hiển thị lên ảnh placeholder lại như sau:
$(“img.lazy”).show().lazyload();
Cảm ơn các bạn đã theo dõi!
Theo: viblo.asia