Cài đặt Lazy Load Image tăng tốc độ tải trang

CDN

Nguyễn Trọng Nhân

679

18-05-2018

Tốc độ website hiện nay quan trọng hơn bao giờ hết. Nó tác động trực tiếp đến trải nghiệm người dùng và xếp hạng của trang web trên Google. Bài hôm nay Bizfly Cloud sẽ hướng dẫn các bạn thực hiện Lazy Load Images để cải thiện đáng kể thứ hạng website trong BXH và tăng trải nghiệm người dùng!

Website chứa nhiều ảnh gây chậm tốc độ tải trang 

Ảnh là nội dung rất quan trọng đối với các trang Web. Tuy nhiên, một website lớn chứa nhiều hình ảnh với quá nhiều imagesloaded cùng lúc sẽ làm giảm tốc độ tải trang đáng kể, khiến người đọc cảm thấy khó chịu khi họ không đủ kiên nhẫn để chờ đợi. Lazy Load 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 thêm: Lazy loading là gì? Khi nào nên sử dụng để tăng tốc độ website?

Cách cài đặt Lazy Load Image

Để cài đặt Lazy load image, bạn có thể áp dụng các cách như sau:

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

$ bower install jquery.lazyload

$ npm install jquery-lazyload

2. Sử dụng minified version (jquery.lazyload.min.js) trực tiếp hoặc sử dụng CDN

Sử dụng jquery: http://jquery.eisbehr.de/lazy/

Sử dụng dịch vụ CDN của Bizfly Cloud: https://bizflycloud.vn/cdn

Hướng dẫn sử dụng Image Lazy Load

1. Để tạo Lazy Load cho image nào đó

// 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/

2. Setting Threshold (Cài đặt Threshold)

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

3. 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ó hành động click hoặc mouseover. Bạn sử dụng như sau:

$("img.lazy").lazyload({ event : "click" }); 

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

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

Thường thì khi bạn sử dụng Lazy load cho trang web, công cụ sẽ chạy tốt trên các trình duyệt hỗ trợ javascript với lazyload js.

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

>> Có thể bạn quan tâm: Top 6 công cụ giảm dung lượng ảnh mà vẫn giữ nguyên chất lượng hiển thị trên website