Đối với một website, Image là một trong những yếu tố quan trọng để tạo nên một website. Bởi nó xuất hiện hầu hết ở mọi nơi như index, trang bài viết,… Tuy nhiên, với việc những hình ảnh mang độ sắc nét cao thì dung lượng của ảnh càng lớn. Do đó với dung lượng ảnh ngày càng lớn như vậy thì hiệu suất tốc độ của trang Web sẽ ngày càng giảm. Bởi thế mà LazyLoad đã được ra đời, nhằm hỗ trợ các bạn về việc này.
Vậy LazyLoad là gì?
Thông thường khi các bạn load một website thì toàn bộ nội dung từ trang web sẽ được tải về hết. Tuy nhiên, việc load toàn bộ nội dung như thế sẽ rất tốn tài nguyên. Bởi khi một người dùng vào website của bạn, bạn không thể chắc chắn rằng người dùng sẽ xem hết toàn bộ nội dung của bạn ngay được. Do đó lazyload sẽ giải quyết vấn đề này, thay vì bạn phải load toàn bộ nội dung trong một lần. Thì Lazyload giúp bạn việc xem đến đâu load đến đó. Việc này sẽ giúp bạn cải thiện tốc độ website của bạn rất nhiều.
Lí do nên dùng Lazyload?
Như mình đã nói ở trên, việc sử dụng Lazyload làm giảm việc tải dữ liệu lên trang >> tốc độ load website nhanh hơn và đỡ tốn tài nguyên hơn. Dưới đây là một đoạn gif demo về việc sử dụng lazyload các bạn xem qua nhé:
Sử dụng Lazyload như thế nào?
Bình thường khi chúng ta tạo một thẻ image như sau:
<img src="#" alt="image" />Đây là định dạng cơ bản của image. Tuy nhiên khi bạn sử dụng Lazyload bạn cần phải thay src thành data-src.
<img data-src="#" alt="image" class="lazy" />Ý nghĩa của src là khi chúng ta dùng src để tải ảnh lên thì việc load ảnh sẽ được thực hiện ngay. Tuy nhiên data-src thì load dữ liệu lên nhưng lại không hiển thị nó và nó bị ngăn chặn lại. Và nó cần phải có sự can thiệp vào của chúng ta để thực hiện việc hiển thị dữ liệu lên website. Ở đây bạn có thể làm tương tự đối với iframe, video,… tùy ý các bạn chứ không phải chỉ dùng mỗi trên image.
Sau khi ngăn chặn việc load Images thì chúng ta cần thông báo cho trình duyệt biết khi nào cần load Images lên. Lúc này ta sẽ sử dụng Javascript để bắt sự kiện của người dùng để load images lên.
Bây giờ mình sẽ viết scripts để bắt sự kiện của người dùng nhé. Ở đây mình sẽ viết theo 2 cách mà mình tìm hiểu được trong quá trình xem qua nhiều trang web.
Cách phức tạp:
document.addEventListener("DOMContentLoaded", function() {
var lazyloadImages = document.querySelectorAll("img.lazy");
var lazyloadThrottleTimeout;
function lazyload () {
if(lazyloadThrottleTimeout) {
clearTimeout(lazyloadThrottleTimeout);
}
lazyloadThrottleTimeout = setTimeout(function() {
var scrollTop = window.pageYOffset;
lazyloadImages.forEach(function(img) {
if(img.offsetTop < (window.innerHeight + scrollTop)) {
img.src = img.dataset.src;
img.classList.remove('lazy');
}
});
if(lazyloadImages.length == 0) {
document.removeEventListener("scroll", lazyload);
window.removeEventListener("resize", lazyload);
window.removeEventListener("orientationChange", lazyload);
}
}, 20);
}
document.addEventListener("scroll", lazyload);
window.addEventListener("resize", lazyload);
window.addEventListener("orientationChange", lazyload);
});Cách trên là cách khá dài và không load được ở một số trường hợp. Cảm nhận của mình thì thế. Và đây là cách mình làm. Ngắn gọn và ai cũng có thể nhớ dễ dàng. Mình sẽ viết ở 2 dạng là Jquery và Javascript.
Jquery:
<script
async src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@16.1.0/dist/lazyload.min.js"
></script>
<script type="text/javascript">
jQuery('img').addClass('lazy');
window.lazyLoadOptions = {
elements_selector: '.lazy',
};
</script>Javascripts:
<script
async src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@16.1.0/dist/lazyload.min.js"
></script>
<script type="text/javascript">
var imgLazy = document.getElementsByTagName('img');
for( i=0; i < imgLazy.length; i++)
{
imgLazy[i]=imgLazy[i].classList.add("lazy");
}
window.lazyLoadOptions = {
elements_selector: '.lazy',
};
</script>NOTE: với 2 cách này bạn phải add nó vào vị trí cuối file trước thẻ đóng body ( </body> ).
Mình sẽ giải thích cách làm cụ thể như sau. Cả hai cách đều là bạn DOM tới thẻ chứa img sau đó chúng ta sẽ add class lazy vào và thực hiện LazyLoad. Ở đây dòng elements_selector: ‘.lazy’. Đây là nơi mà bạn muốn thực LazyLoad thông qua tên class hay id ví dụ như ở đây tên class mình muốn thực hiện là lazy. Thì mình sẽ selector đến lazy.
Còn đoạn script mình sẽ giải thích cho các bạn hiểu tại sao phải có tag async vào và ý nghĩa của nó:
Script thông thường:
<script src="script.js">Với thẻ script bình thường thì HTML file sẽ được parse cho đến khi gặp phải thẻ script, đến lúc này thì quá trình parse sẽ tạm dừng và để fetch script file về (nếu là external file), sau đó execute những code script này, sau đó mới tiếp tục lại quá trình parse html.
Cụ thể như sau Html: “Mình đang phân tích thì đến bạn thẻ scripts này giờ dừng lại tí để bạn đó tải về cái đã. Sau khi bạn đó được tải về và excute xong mình chạy tiếp”.
Script Async
<script async src="script.js">Khác với script thông thường khi html đang chạy thì đoạn scripts này sẽ được download và excute song song với parse html.
Script Defer
<script defer src="script.js">Khác với Async, dù html và script vẫn thực thi song song với nhau nhưng html parse sẽ vẫn tiếp tục chạy dù script đã được tải về. Sau khi html parse xong thì script mới đc excute ra. Đó là lí do tại sao mình dùng async. Nhằm mình muốn load thư viện trước và load song song với html. Khi nó load xong rồi thì đoạn script để dưới footer ( hoặc trước thẻ đóng body) nó được thực thi.