Thực hành lazysizes.min.js
Nó chỉ tải 10 bức ảnh sau đó sroll nó tiếp tục tải :)
<!DOCTYPE html>
<html lang="vi-VN">
<head>
<meta charset="UTF-8">
<title>lazysizes demo 1</title>
<style>
div {
width: 645px;
}
</style>
<script src="http://localhost/library/lazysizes.min.js"></script>
</head>
<body>
<h1>lazysizes demo 1 - lazy load ảnh không co giãn:</h1>
<div>
<img class="lazyload" data-src="https://kiencang.net/wp-content/uploads/2020/03/meo-luoi.jpg" class="" alt="lazy load ảnh và video">
<img class="lazyload" data-src="https://kiencang.net/wp-content/uploads/2020/03/youtube-tai-nang.jpg" class="" alt="YouTube tải nặng">
<img class="lazyload" data-src="https://kiencang.net/wp-content/uploads/2020/03/kich-co-anh-toi-uu.jpg" class="" alt="kích cỡ ảnh tối ưu">
<img class="lazyload" alt="Lazyload video" data-src="https://kiencang.net/wp-content/uploads/2020/03/video-lazy-load.png">
<img class="lazyload" alt="ảnh cá đẹp" data-src="https://kiencang.net/wp-content/uploads/2020/03/anh-ca-dep.jpg">
<img class="lazyload" alt="đo tốc độ trang" data-src="https://kiencang.net/wp-content/uploads/2020/03/do-toc-do.jpg">
<img class="lazyload" alt="xác định JavaScript của bên thứ ba làm chậm trang" data-src="https://kiencang.net/wp-content/uploads/2020/03/tim-kiem-JS.jpg">
<img class="lazyload" alt="Code JavaScript" data-src="https://kiencang.net/wp-content/uploads/2020/03/code-javascript.jpg">
<img class="lazyload" alt="JavaScript của bên thứ ba" data-src="https://kiencang.net/wp-content/uploads/2020/03/javascript.jpg">
<img class="lazyload" alt="Total Blocking Time" data-src="https://kiencang.net/wp-content/uploads/2020/03/chan-hien-thi.jpg">
<img class="lazyload" alt="Tối ưu hóa JavaScript của bên thứ ba" data-src="https://kiencang.net/wp-content/uploads/2020/03/JS-cua-ben-thu-ba.jpg">
<img class="lazyload" alt="tăng tốc YouTube bằng preconnect" data-src="https://kiencang.net/wp-content/uploads/2020/03/tang-toc-youtube.jpg">
<img class="lazyload" alt="cẩn thận với font tùy chỉnh" data-src="https://kiencang.net/wp-content/uploads/2020/03/font-tuy-chinh.jpg">
<img class="lazyload" alt="giảm thời gian thực thi JavaScript" data-src="https://kiencang.net/wp-content/uploads/2020/03/thoi-gian-thuc-thi-JS.jpg">
<img class="lazyload" alt="First Input Delay - trì hoãn đám cưới với người yêu" data-src="https://kiencang.net/wp-content/uploads/2020/03/tri-hoan-dam-cuoi.jpg">
<img class="lazyload" alt="núi rừng trong sương" data-src="https://kiencang.net/wp-content/uploads/2020/03/nui-rung-an.jpg">
<img width="640" class="lazyload" alt="tải thích ứng" data-src="https://kiencang.net/wp-content/uploads/2020/03/tai-thich-ung.png">
<img class="lazyload" alt="preconnect giúp tăng tốc website" data-src="https://kiencang.net/wp-content/uploads/2020/03/preconnect.jpg">
<img class="lazyload" alt="LARGEST CONTENTFUL PAINT - voi là loài lớn nhất trên cạn" data-src="https://kiencang.net/wp-content/uploads/2020/03/voi-loai-lon-nhat.jpg">
<img class="lazyload" alt="tốc độ website là gì" data-src="https://kiencang.net/wp-content/uploads/2020/03/toc-do-website.jpg">
<img class="lazyload" alt="TIME TO INTERACTIVE - bắt đầu tương tác" data-src="https://kiencang.net/wp-content/uploads/2020/03/tuong-tac.jpg">
<img class="lazyload" alt="FIRST CONTENTFUL PAINT - nụ hôn đầu đời" data-src="https://kiencang.net/wp-content/uploads/2020/03/nu-hon-dau-doi.jpg">
<img class="lazyload" alt="các chỉ số hiệu suất, tốc độ tập trung vào người dùng" data-src="https://kiencang.net/wp-content/uploads/2020/03/xe-may-toc-do-cao.jpg">
<img class="lazyload" alt="preload giúp website tải nhanh hơn" data-src="https://kiencang.net/wp-content/uploads/2020/03/xe-dua-cong-thuc-1.jpg">
<img class="lazyload" alt="so sánh, cân đong đo đếm" data-src="https://kiencang.net/wp-content/uploads/2020/03/cai-can.jpg">
<img width="640" class="lazyload" alt="dự đoán prefetch" data-src="https://kiencang.net/wp-content/uploads/2020/03/du-doan-prefetch.png">
<img width="640" data-src="https://kiencang.net/wp-content/uploads/2020/03/anh-nang-2.jpg" class="lazyload" />
<img width="640" data-src="https://kiencang.net/wp-content/uploads/2020/03/anh-nang-3.jpg" class="lazyload" />
<img width="640" data-src="https://kiencang.net/wp-content/uploads/2020/03/anh-nang-4.jpg" class="lazyload" />
<img width="640" data-src="https://kiencang.net/wp-content/uploads/2020/03/anh-nang-5.jpg" class="lazyload" />
<img width="640" data-src="https://kiencang.net/wp-content/uploads/2020/03/anh-nang.jpg" class="lazyload" />
</div>
</body>
</html>PreviousTầm quan trọng của thuộc tính sizes, srcset trong thẻ img (ok)NextCheck image img exits vieclam123.vn (ok)
Last updated
