Lazy-Loading Images

Ảnh là yêu tố rất quan trọng đối với các trang Web. Tuy nhiên, trong một trang web dài với khá nhiều ảnh sẽ làm cho việc load trang web đó rất chậm và khó chịu đối với người đọc. Vậy để khắc phục các vấn đề trên, hôm này mình sẽ giới thiệu về "Image lazy Load". Kỹ thuật này sẽ làm cho trang web có nhiều ảnh load nhanh hơn bằng cách chỉ hiển thị ảnh lên khi scroll đển ảnh đó, không cần phải load tất cả hình ảnh từ ban đầu. Với kỹ thuật này sẽ tăng tốc độ trang web lên rất nhiều và cũng sẽ tiết kiệm được nhiều Bandawidth cho cả người chủ website và người dùng.

Để cài đặt Lazy load, bạn có thể một trong cách sau:

1. Sử dụng bower hoặc npm

$ bower install jquery.lazyload
$ npm install jquery-lazyload

1. Sử dụng minified version (jquery.lazyload.min.js) trực tiếp hoặc sử dụng CDN: https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js

Để tạo Lazy load cho image nào đó:

// html
<img class="lazy" data-original="img/example.jpg" awidth="640" height="480">
// javascript
$("img.lazy").lazyload();

Trong đó: data-original : sử dụng thay thế cho src là hình ảnh để hiển thị. Để tạo Lazy load, bạn phải gọi javascript method: image_selector.lazyload() Xem Demo

Setting Threshold

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
});

Event to Trigger Loading (Sự kiện để thực hiện Load ảnh)

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"
});

Sử dụng Effects

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

Xử lý với các trình duyệt không hỗ trợ javascript

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"  awidth="640" heigh="480">
<noscript>
    <img src="img/example.jpg" awidth="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 cả placeholder image và image thật hiển thị cùng một lúc, bạn nên hide cái ả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();

Trong bài viết này, mình giới thiệu một plugin để hỗ trợ việc lazy load image này, nhưng còn có nhiều plugins tương tự kỹ thuật này. Bạn có thể xem chi tiết về cách sử dụng sau đây: https://www.sitepoint.com/lazy-loading-images-not-really-annoy-users/ http://www.appelsiini.net/projects/lazyload http://purelywebdesign.co.uk/tutorial/lazy-load-images-in-a-rails-application/