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 4 years ago

Was this helpful?

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