Thực hành lazysizes.min.js
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
Advanced Javascript
Last updated
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>