vanilla lazyload ดาวน์โหลด - ดาวน์โหลด vanilla lazyload ซอร์สโค้ด

LazyLoad เป็นสคริปต์ที่มีน้ำหนักเบา (2.4 kB) และยืดหยุ่นได้ ซึ่งจะ ช่วยเร่งความเร็วเว็บแอปพลิเคชันของคุณ โดยเลื่อนการโหลดรูปภาพครึ่งหน้าล่าง, SVG แบบเคลื่อนไหว, วิดีโอ และ iframe ของคุณไปจนถึง เวลาที่พวกเขาจะเข้าสู่วิวพอร์ต เขียนด้วย JavaScript ธรรมดา "วานิลลา" ใช้ประโยชน์จาก IntersectionObserver API รองรับรูปภาพที่ตอบสนอง เพิ่มประสิทธิภาพเว็บไซต์ของคุณสำหรับการเชื่อมต่อที่ช้าลง และสามารถเปิดใช้งานการโหลดแบบเนทีฟได้ ดูคุณสมบัติทั้งหมดสำหรับข้อมูลเพิ่มเติม

➡️ ข้ามไปที่: ?‍ เริ่มต้นใช้งาน - HTML - ?‍ เริ่มต้นใช้งาน - สคริปต์ - ? สูตรอาหาร - สาธิต - ? เคล็ดลับและคำแนะนำ - ? เอพีไอ - ? คุณสมบัติทั้งหมดเปรียบเทียบ

รักโครงการนี้หรือไม่? - ซื้อกาแฟให้ฉันหน่อย!

?‍ เริ่มต้นใช้งาน - HTML

ในการที่จะทำให้เนื้อหาของคุณโหลดโดย LazyLoad คุณต้องใช้แอตทริบิวต์ data- บางอย่างแทนแอตทริบิวต์จริง ตัวอย่างด้านล่าง

ภาพขี้เกียจ:

 < img alt =" A lazy image " class =" lazy " data-src =" lazy.jpg " />

รูปภาพขี้เกียจที่มีตัวยึดตำแหน่งคุณภาพต่ำ:

 < img alt =" A lazy image " class =" lazy " src =" lazy-lowQuality.jpg " data-src =" lazy.jpg " />

รูปภาพตอบสนองแบบขี้เกียจพร้อม `srcset` และ `sizes` :

 < img
  alt =" A lazy image "
  class =" lazy "
  data-src =" lazy.jpg "
  data-srcset =" lazy_400.jpg 400w, 
    lazy_800.jpg 800w "
  data-sizes =" 100w "
/>

หากต้องการใช้ตัวยึดตำแหน่งคุณภาพต่ำ ให้เพิ่มแอตทริบิวต์ src ที่ชี้ไปที่รูปภาพเวอร์ชันที่เล็กมาก เช่น src="lazy_10.jpg" .

รูปภาพที่ตอบสนองช้าพร้อมรองรับ hi-dpi โดยใช้แท็ก `picture` :

 < picture >
  < source media =" (min-width: 1200px) " data-srcset =" lazy_1200.jpg 1x, lazy_2400.jpg 2x " />
  < source media =" (min-width: 800px) " data-srcset =" lazy_800.jpg 1x, lazy_1600.jpg 2x " />
  < img alt =" A lazy image " class =" lazy " data-src =" lazy.jpg " />
</ picture >

หากต้องการใช้ตัวยึดตำแหน่งคุณภาพต่ำ ให้เพิ่มแอตทริบิวต์ src ที่ชี้ไปยังรูปภาพเวอร์ชันที่เล็กมากลงในแท็ก img เช่น src="lazy_10.jpg" .

รูปภาพตอบสนองแบบ Lazy พร้อมการเลือกรูปแบบ WebP อัตโนมัติ โดยใช้แท็ก `picture` :

 < picture >
  < source
    type =" image/webp "
    data-srcset =" lazy_400.webp 400w, 
      lazy_800.webp 800w "
    data-sizes =" 100w "
  />
  < img
    alt =" A lazy image "
    class =" lazy "
    data-src =" lazy.jpg "
    data-srcset =" lazy_400.jpg 400w, 
      lazy_800.jpg 800w "
    data-sizes =" 100w "
  />
</ picture >

ภาพพื้นหลังขี้เกียจ

หมายเหตุสำคัญ : หากต้องการแสดงรูปภาพเนื้อหาบนหน้าเว็บของคุณ ให้ใช้แท็ก img เสมอ สิ่งนี้จะเป็นประโยชน์ต่อ SEO และการเข้าถึงเว็บไซต์ของคุณ หากต้องการทราบว่ารูปภาพของคุณเป็นเนื้อหาหรือพื้นหลัง ให้ถามตัวเองว่า: "ผู้ใช้เว็บไซต์ของฉันต้องการเห็นภาพเหล่านั้นเมื่อพิมพ์หน้าเว็บหรือไม่" หากคำตอบคือ "ใช่" แสดงว่ารูปภาพของคุณเป็นรูปภาพที่มีเนื้อหา และคุณควรหลีกเลี่ยงการใช้ภาพพื้นหลังเพื่อแสดงรูปภาพเหล่านั้น

ภาพพื้นหลังเดียว:

 < div class =" lazy " data-bg =" lazy.jpg " > </ div >

พื้นหลังเดี่ยวพร้อมการรองรับหน้าจอ HiDPI:

 < div class =" lazy " data-bg =" lazy.jpg " data-bg-hidpi =" [email protected] " > </ div >

พื้นหลังหลายแบบ:

 < div
  class =" lazy "
  data-bg-multi =" url(lazy-head.jpg), 
    url(lazy-body.jpg), 
    linear-gradient(#fff, #ccc) "
>
  ...
</ div >

พื้นหลังหลายแบบ รองรับหน้าจอ HiDPI:

 < div
  class =" lazy "
  data-bg-multi =" url(lazy-head.jpg),
    url(lazy-body.jpg),
    linear-gradient(#fff, #ccc) "
  data-bg-multi-hidpi =" url([email protected]),
    url([email protected]),
    linear-gradient(#fff, #ccc) "
>
  ...
</ div >

พื้นหลังพร้อม `image-set` :

 < div class =" lazy " data-bg-set =" url('[email protected]') 1x, url('[email protected]') 2x " > ... </ div >

พื้นหลังหลายแบบพร้อม `image-set` :

 < div
  class =" lazy "
  data-bg-set ="
    url('[email protected]') 1x, url('[email protected]') 2x | 
    url('[email protected]') 1x, url('[email protected]') 2x
  "
>
  ...
</ div >

SVG ภาพเคลื่อนไหวที่ขี้เกียจ

 < object class =" lazy " type =" image/svg+xml " data-src =" lazy.svg " > </ object >

วีดีโอขี้เกียจ

 < video class =" lazy " controls width =" 620 " data-src =" lazy.mp4 " data-poster =" lazy.jpg " >
  < source type =" video/mp4 " data-src =" lazy.mp4 " />
  < source type =" video/ogg " data-src =" lazy.ogg " />
  < source type =" video/avi " data-src =" lazy.avi " />
</ video >

โปรดทราบว่าสามารถโหลดโปสเตอร์วิดีโอแบบ Lazy ได้เช่นกัน

iframe ขี้เกียจ

 < iframe class =" lazy " data-src =" lazyFrame.html " > </ iframe >

รักโครงการนี้หรือไม่? - ซื้อกาแฟให้ฉันหน่อย!

?‍ เริ่มต้นใช้งาน - สคริปต์

LazyLoad เวอร์ชันล่าสุดที่แนะนำคือ 19.1.3 โปรดทราบว่าหากคุณต้องการรองรับ Internet Explorer 11 คุณต้องใช้เวอร์ชัน 17.9.0 หรือต่ำกว่า

เข้าใจวิธีอัปเกรดจากเวอร์ชันก่อนหน้าอย่างรวดเร็วโดยอ่านคู่มืออัปเกรดที่ใช้งานได้จริง

วิธีที่ง่ายและง่ายที่สุด

วิธีที่ง่ายที่สุดในการใช้ LazyLoad คือการรวมสคริปต์จาก CDN

 < script src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js " > </ script >

หรือหากคุณต้องการนำเข้าเป็นโมดูล ES:

 < script type =" module " >
  import LazyLoad from "https://cdn.jsdelivr.net/npm/[email protected]/+esm" ;
</ script >

จากนั้นในโค้ดจาวาสคริปต์ของคุณ:

 var lazyLoadInstance = new LazyLoad ( {
  // Your custom settings go here
} ) ;

เพื่อให้แน่ใจว่า DOM สำหรับเนื้อหา Lazy ของคุณพร้อมแล้วเมื่อคุณสร้างอินสแตนซ์ LazyLoad ให้วางแท็กสคริปต์ไว้หน้าแท็กปิด </body>

หากมี DOM เข้ามาเพิ่มเติมในภายหลัง เช่น ผ่านการโทร AJAX คุณจะต้องโทรไปที่ lazyLoadInstance.update(); เพื่อให้ LazyLoad ตรวจสอบ DOM อีกครั้ง

 lazyLoadInstance . update ( ) ;

การใช้สคริปต์ `async`

หากต้องการ คุณสามารถรวมสคริปต์ของ LazyLoad โดยใช้สคริปต์ async และเริ่มต้นได้ทันทีที่โหลดแล้ว

ในการดำเนินการดังกล่าว คุณต้องกำหนดตัวเลือกก่อนที่จะรวมสคริปต์ คุณสามารถผ่าน:

{} วัตถุเพื่อรับ LazyLoad อินสแตนซ์เดียว
[{}, {}] อาร์เรย์ของออบเจ็กต์เพื่อรับ LazyLoad หลายอินสแตนซ์ โดยแต่ละรายการมีตัวเลือกที่แตกต่างกัน

 < script >
  // Set the options globally
  // to make LazyLoad self-initialize
  window . lazyLoadOptions = {
    // Your custom settings go here
  } ;
</ script >

แล้วใส่สคริปท์ลงไปด้วย

 < script
  async
  src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js "
> </ script >

อาจวางแท็กสคริปต์ไว้หน้าแท็กปิด </body> หากคุณทำไม่ได้ LazyLoad สามารถทำงานได้ก่อนที่เบราว์เซอร์จะโหลด DOM ทั้งหมด และคุณจะต้องเรียกใช้เมธอด update() เพื่อให้ตรวจสอบ DOM อีกครั้ง

การใช้สคริปต์ `async` + รับการอ้างอิงอินสแตนซ์

เช่นเดียวกับข้างต้น แต่คุณต้องใส่โค้ด addEventListener ที่แสดงด้านล่างก่อนที่จะรวมสคริปต์ async

 < script >
  // Set the options globally
  // to make LazyLoad self-initialize
  window . lazyLoadOptions = {
    // Your custom settings go here
  } ;
  // Listen to the initialization event
  // and get the instance of LazyLoad
  window . addEventListener (
    "LazyLoad::Initialized" ,
    function ( event ) {
      window . lazyLoadInstance = event . detail . instance ;
    } ,
    false
  ) ;
</ script >

แล้วใส่สคริปท์ลงไปด้วย

 < script
  async
  src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js "
> </ script >

ตอนนี้คุณสามารถเรียกวิธีการของมันได้ เช่น:

 lazyLoadInstance . update ( ) ;

การสาธิต - แหล่งที่มา ← สำหรับอินสแตนซ์ LazyLoad เดียว

การสาธิต - แหล่งที่มา ← สำหรับอินสแตนซ์ LazyLoad หลายรายการ

ติดตั้งท้องถิ่น

หากคุณต้องการติดตั้ง LazyLoad ภายในโปรเจ็กต์ของคุณ คุณสามารถทำได้!

ใช้ npm

 npm install vanilla-lazyload

การใช้ธนู

 bower install vanilla-lazyload

ดาวน์โหลดด้วยตนเอง

ดาวน์โหลดรุ่นล่าสุดหนึ่งรายการ ไฟล์ที่คุณต้องการอยู่ในโฟลเดอร์ dist หากคุณไม่รู้ว่าควรเลือกอันไหน ให้ใช้ lazyload.min.js หรืออ่านเกี่ยวกับบันเดิล

การใช้งานในท้องถิ่น

หากคุณติดตั้ง LazyLoad ในเครื่อง คุณสามารถนำเข้าเป็นโมดูล ES ได้ดังต่อไปนี้:

 import LazyLoad from "vanilla-lazyload" ;

นอกจากนี้ยังเป็นไปได้ (แต่ไม่ได้รับคำแนะนำ) เพื่อใช้ไวยากรณ์ require commonJS

ข้อมูลเพิ่มเติมเกี่ยวกับการรวม LazyLoad กับ WebPack มีอยู่ใน Repo เฉพาะนี้

การใช้งานด้วย React

ดูตัวอย่างการใช้งาน React กับ LazyLoad บน Sandbox

การใช้งานนี้ใช้อุปกรณ์ประกอบฉากแบบเดียวกับที่ปกติคุณจะส่งไปยังแท็ก img แต่จะเรนเดอร์รูปภาพที่ขี้เกียจ อย่าลังเลที่จะแยกและปรับปรุงมัน!

การรวมกลุ่ม

ภายในโฟลเดอร์ dist คุณจะพบชุดข้อมูลต่างๆ

ชื่อไฟล์	ประเภทโมดูล	ข้อดี
`lazyload.min.js`	UMD (คำจำกัดความโมดูลสากล)	ทำงานได้แทบทุกที่ แม้แต่ในบริบทของ js ทั่วไป
`lazyload.iife.min.js`	IIFE (นิพจน์ฟังก์ชันที่เรียกใช้ทันที)	ทำงานเป็น `<script src="...">` ในเพจ ซึ่งเล็กกว่าเวอร์ชัน UMD ประมาณ 0.5kb
`esm/lazyload.js`	อีเอส โมดูล	ส่งออก `LazyLoad` เพื่อให้คุณสามารถนำเข้าในโปรเจ็กต์ของคุณทั้งโดยใช้ `<script type="module" src="...">` และบันเดิลเช่น WebPack หรือ Rollup

รักโครงการนี้หรือไม่? - ซื้อกาแฟให้ฉันหน่อย!

- สูตรอาหาร

นี่คือส่วนที่คุณสามารถค้นหาโค้ด ที่พร้อมสำหรับการคัดลอกและวาง เพื่อความสะดวกของคุณ

ซ่อนข้อความแสดงแทนและรูปภาพว่าง

กรณีการใช้งาน : เมื่อรูปภาพที่คุณโหลดอย่างเกียจคร้านแสดงข้อความ alt และไอคอนรูปภาพว่างก่อนโหลด

ซีเอสเอส

 img : not ([ src ]) : not ([ srcset ]) {
  visibility : hidden;
}

แค่นั้นจริงๆ

การจัดการข้อผิดพลาดของภาพ

กรณีการใช้งาน : เมื่อคุณต้องการป้องกันไม่ให้แสดงรูปภาพที่ไม่มีอยู่หรือเสียหายบนเว็บไซต์ของคุณ

จาวาสคริปต์

 var myLazyLoad = new LazyLoad ( {
  // Other options here...
  callback_error : ( img ) => {
    // Use the following line only if your images have the `srcset` attribute
    img . setAttribute ( "srcset" , "[email protected] 1x, [email protected] 2x" ) ;
    img . setAttribute ( "src" , "[email protected]" ) ;
  }
} ) ;

หมายเหตุ: หากข้อผิดพลาดเกิดจากการที่เครือข่ายล่ม (ตัวนำทางหากออฟไลน์ชั่วคราว) vanilla-lazyload จะพยายามโหลดรูปภาพอีกครั้งเมื่อเครือข่ายพร้อมใช้งานอีกครั้ง

ตัวอย่าง - API

เนื้อหาแบบไดนามิก

กรณีการใช้งาน : เมื่อคุณต้องการโหลดรูปภาพอย่างเกียจคร้าน แต่จำนวนรูปภาพเปลี่ยนแปลงในพื้นที่เลื่อน อาจเป็นเพราะรูปภาพถูกเพิ่มแบบอะซิงโครนัส

จาวาสคริปต์

 var myLazyLoad = new LazyLoad ( ) ;
// After your content has changed...
myLazyLoad . update ( ) ;

การสาธิต - แหล่งที่มา - API

การโหลดแบบเนทีฟแบบผสมและแบบใช้ JS

กรณีการใช้งาน : คุณต้องการใช้ตัวเลือก use_native เพื่อมอบหมายการโหลดรูปภาพ iframe และวิดีโอให้กับกลไกของเบราว์เซอร์ที่รองรับ แต่คุณยังต้องการโหลดภาพพื้นหลังอย่างเกียจคร้านด้วย

HTML

 < img class =" lazy " alt =" A lazy image " data-src =" lazy.jpg " />
< iframe class =" lazy " data-src =" lazyFrame.html " > </ iframe >
< video class =" lazy " controls data-src =" lazy.mp4 " data-poster =" lazy.jpg " > ... </ video >
< object class =" lazy " type =" image/svg+xml " data-src =" lazy.svg " > </ object >
< div class =" lazy " data-bg =" lazy.jpg " > </ div >

จาวาสคริปต์

 // Instance using native lazy loading
const lazyContent = new LazyLoad ( {
  use_native : true // <-- there you go
} ) ;

// Instance without native lazy loading
const lazyBackground = new LazyLoad ( {
  // DON'T PASS use_native: true HERE
} ) ;

การสาธิต - แหล่งที่มา - API

แผงเลื่อน

กรณีการใช้งาน : เมื่อคอนเทนเนอร์การเลื่อนของคุณไม่ใช่หน้าต่างเบราว์เซอร์หลัก แต่เป็นคอนเทนเนอร์การเลื่อน

HTML

 < div class =" scrollingPanel " >
  <!-- Set of images -->
</ div >

จาวาสคริปต์

 var myLazyLoad = new LazyLoad ( {
  container : document . querySelector ( ".scrollingPanel" )
} ) ;

การสาธิต - แหล่งที่มา - API

หากคุณมีแผงเลื่อน หลายแผง คุณสามารถใช้มาร์กอัปและโค้ดต่อไปนี้ได้

HTML

 < div id =" scrollingPanel1 " class =" scrollingPanel " >
  <!-- Set of images -->
</ div >
< div id =" scrollingPanel2 " class =" scrollingPanel " >
  <!-- Set of images -->
</ div >

จาวาสคริปต์

 var myLazyLoad1 = new LazyLoad ( {
  container : document . getElementById ( "scrollingPanel1" )
} ) ;
var myLazyLoad2 = new LazyLoad ( {
  container : document . getElementById ( "scrollingPanel2" )
} ) ;

การสาธิต - แหล่งที่มา - API

ฟังก์ชั่นขี้เกียจ

ใช้กรณี : เมื่อคุณต้องการรันสคริปต์หรือฟังก์ชันที่กำหนดเองเมื่อองค์ประกอบที่กำหนดเข้าสู่วิวพอร์ต

HTML

 < div class =" lazy " data-lazy-function =" foo " > ... </ div >
< div class =" lazy " data-lazy-function =" bar " > ... </ div >
< div class =" lazy " data-lazy-function =" buzz " > ... </ div >
< div class =" lazy " data-lazy-function =" booya " > ... </ div >

จส

 // It's a best practice to scope the function names inside a namespace like `lazyFunctions`.
window . lazyFunctions = {
  foo : function ( element ) {
    element . style . color = "red" ;
    console . log ( "foo" ) ;
  } ,
  bar : function ( element ) {
    element . remove ( element ) ;
    console . log ( "bar" ) ;
  } ,
  buzz : function ( element ) {
    var span = document . createElement ( "span" ) ;
    span . innerText = " - buzz!" ;
    element . appendChild ( span ) ;
    console . log ( "buzz" ) ;
  } ,
  booya : function ( element ) {
    element . classList . add ( "boo" ) ;
    console . log ( "booya" ) ;
  }
} ;

 function executeLazyFunction ( element ) {
  var lazyFunctionName = element . getAttribute ( "data-lazy-function" ) ;
  var lazyFunction = window . lazyFunctions [ lazyFunctionName ] ;
  if ( ! lazyFunction ) return ;
  lazyFunction ( element ) ;
}

var ll = new LazyLoad ( {
  unobserve_entered : true , // <- Avoid executing the function multiple times
  callback_enter : executeLazyFunction // Assigning the function defined above
} ) ;

ใช้ unobserve_entered เพื่อหลีกเลี่ยงการดำเนินการฟังก์ชันหลายครั้ง

แค่นั้นแหละ. เมื่อใดก็ตามที่องค์ประกอบที่มีแอตทริบิวต์ data-lazy-function เข้าสู่วิวพอร์ต LazyLoad จะเรียกใช้ฟังก์ชัน executeLazyScript ซึ่งรับชื่อฟังก์ชันจากแอตทริบิวต์ data-lazy-function เองและดำเนินการ

การสาธิต - แหล่งที่มา - API

การเริ่มต้น Lazy ของอินสแตนซ์ LazyLoad หลายรายการ

กรณีการใช้งาน : เมื่อคุณมีคอนเทนเนอร์แบบเลื่อนในแนวนอนจำนวนมาก และคุณต้องการสร้างอินสแตนซ์ LazyLoad บนคอนเทนเนอร์เหล่านั้น เฉพาะเมื่อคอนเทนเนอร์เหล่านั้นเข้าสู่วิวพอร์ตเท่านั้น

HTML

 < div class =" horizContainer " >
  < img
    src =""
    alt =" Row 01, col 01 "
    data-src =" https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_01_col_01&amp;w=200&amp;h=200 "
  />
  < img
    src =""
    alt =" Row 01, col 02 "
    data-src =" https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_01_col_02&amp;w=200&amp;h=200 "
  />
  <!-- ... -->
</ div >
< div class =" horizContainer " >
  < img
    src =""
    alt =" Row 02, col 01 "
    data-src =" https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_02_col_01&amp;w=200&amp;h=200 "
  />
  < img
    src =""
    alt =" Row 02, col 02 "
    data-src =" https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_02_col_02&amp;w=200&amp;h=200 "
  />
  <!-- ... -->
</ div >

จาวาสคริปต์

 var lazyLoadInstances = [ ] ;

var initOneLazyLoad = function ( horizContainerElement ) {
  // When the .horizContainer element enters the viewport,
  // instantiate a new LazyLoad on the horizContainerElement
  var oneLL = new LazyLoad ( {
    container : horizContainerElement
  } ) ;
  // Optionally push it in the lazyLoadInstances
  // array to keep track of the instances
  lazyLoadInstances . push ( oneLL ) ;
} ;

// The "lazyLazy" instance of lazyload is used to check
// when the .horizContainer divs enter the viewport
var lazyLazy = new LazyLoad ( {
  elements_selector : ".horizContainer" ,
  callback_enter : initOneLazyLoad ,
  unobserve_entered : true // Stop observing .horizContainer(s) after they entered
} ) ;

แค่นั้นแหละ. เมื่อใดก็ตามที่องค์ประกอบ .horizContainer เข้าสู่วิวพอร์ต LazyLoad จะเรียกใช้ฟังก์ชัน initOneLazyLoad ซึ่งจะสร้างอินสแตนซ์ใหม่ของ LazyLoad บนองค์ประกอบ .horizContainer

การสาธิต - แหล่งที่มา - API

รักโครงการนี้หรือไม่? - ซื้อกาแฟให้ฉันหน่อย!

การสาธิต

ไม่พบสูตรที่ตรงกับกรณีของคุณทุกประการใช่ไหม เรามีการสาธิต!

โฟลเดอร์สาธิตมีกรณีการใช้งาน vanilla-lazyload มากกว่า 30 กรณี คุณอาจพบสิ่งที่คุณกำลังมองหาที่นั่น

พิมพ์	ชื่อ	รหัส	สาธิต
เนื้อหา	รูปภาพที่โหลดแบบ Lazy Load แบบง่ายๆ ไม่ได้ใช้ตัวยึดตำแหน่งใดๆ	รหัส	สด
เนื้อหา	รูปภาพ Lazy ที่ใช้ SVG ในบรรทัดเป็นตัวยึดตำแหน่ง	รหัส	สด
เนื้อหา	รูปภาพ Lazy ที่ใช้ไฟล์ SVG ภายนอกเป็นตัวยึดตำแหน่ง	รหัส	สด
เนื้อหา	รูปภาพที่ตอบสนองขี้เกียจด้วย `srcset`	รหัส	สด
เนื้อหา	รูปภาพที่ตอบสนองแบบ Lazy ด้วยแท็ก `<picture>` และแอตทริบิวต์ `media` (ทิศทางศิลปะ)	รหัส	สด
เนื้อหา	รูปภาพตอบสนองแบบ Lazy พร้อม `srcset` และ `sizes` (ใช้ `data-sizes` )	รหัส	สด
เนื้อหา	รูปภาพตอบสนองแบบ Lazy พร้อม `srcset` และ `sizes` (ใช้ `sizes` ธรรมดา)	รหัส	สด
เนื้อหา	วิดีโอ Lazy ที่มีแท็ก `<source>` หลายแท็ก ตัวเลือกการโหลดล่วงหน้าที่แตกต่างกัน ไม่มีการเล่นอัตโนมัติ	รหัส	สด
เนื้อหา	วิดีโอ Lazy ที่มีแท็ก `<source>` หลายแท็ก ตัวเลือกการโหลดล่วงหน้าที่แตกต่างกัน พร้อมการเล่นอัตโนมัติ	รหัส	สด
เนื้อหา	ขี้เกียจโหลดภาพพื้นหลัง	รหัส	สด
เนื้อหา	ขี้เกียจโหลดภาพพื้นหลังหลายรูป	รหัส	สด
เนื้อหา	ขี้เกียจโหลดภาพพื้นหลังด้วย `image-set()`	รหัส	สด
เนื้อหา	iframe การโหลดแบบ Lazy	รหัส	สด
เนื้อหา	การโหลดภาพเคลื่อนไหว SVG และไฟล์ PDF แบบ Lazy	รหัส	สด
เนื้อหา	รูปภาพ Lazy WebP ที่มีแท็ก `<picture>` และแอตทริบิวต์ `type` สำหรับ WebP	รหัส	สด
กำลังโหลด	การโหลด LazyLoad แบบอะซิงโครนัสด้วย `<script async>`	รหัส	สด
กำลังโหลด	อะซิงโครนัสกำลังโหลดอินสแตนซ์ LazyLoad หลายรายการด้วย `<script async>`	รหัส	สด
ข้อผิดพลาด	ทดสอบพฤติกรรมการโหลดข้อผิดพลาดเมื่อ `restore_on_error` เป็น `false`	รหัส	สด
ข้อผิดพลาด	ทดสอบพฤติกรรมการโหลดข้อผิดพลาดเมื่อ `restore_on_error` เป็น `true`	รหัส	สด
เทคนิค	จางลงในรูปภาพขณะโหลด	รหัส	สด
เทคนิค	โหลดรูปภาพแบบ Lazy ในแถบเลื่อนแนวนอนแบบ CSS เท่านั้น (สไตล์ Netflix)	รหัส	สด
เทคนิค	สร้างอินสแตนซ์ Swiper อย่างเกียจคร้านและโหลดอิมเมจ Swiper อย่างเกียจคร้าน	รหัส	สด
เทคนิค	เรียกใช้ฟังก์ชันอย่างเกียจคร้านเมื่อองค์ประกอบเฉพาะเข้าสู่วิวพอร์ต	รหัส	สด
เทคนิค	วิธีจัดการการพิมพ์เพจที่มีรูปภาพที่ขี้เกียจ	รหัส	สด
เทคนิค	เลเยอร์ป๊อปอัปที่มีรูปภาพแบบ Lazy ในคอนเทนเนอร์แบบเลื่อน	รหัส	สด
การตั้งค่า	คอนเทนเนอร์การเลื่อนหลายรายการ	รหัส	สด
การตั้งค่า	คอนเทนเนอร์เลื่อนเดี่ยว	รหัส	สด
วิธีการ	วิธี `restore()` DOM กลับสู่สถานะดั้งเดิม และ/หรือ `destroy()` LazyLoad	รหัส	สด
วิธีการ	เพิ่มเนื้อหาแบบไดนามิก จากนั้น `update()` LazyLoad	รหัส	สด
วิธีการ	เพิ่มเนื้อหาแบบไดนามิก จากนั้น `update()` LazyLoad ผ่าน NodeSet ขององค์ประกอบ	รหัส	สด
วิธีการ	โหลดภาพตรงเวลาโดยใช้วิธี `load()`	รหัส	สด
วิธีการ	โหลดภาพทั้งหมดพร้อมกันโดยใช้ `loadAll()`	รหัส	สด
ทดสอบ	ทดสอบเกณฑ์หลายรายการ	รหัส	สด
ทดสอบ	ทดสอบพฤติกรรมด้วยรูปภาพที่ซ่อนอยู่	รหัส	สด
ทดสอบ	ทดสอบประสิทธิภาพ โหลดภาพแบบ Lazy Loading หลายร้อยภาพ	รหัส	สด
พื้นเมือง	ทดสอบการโหลดรูปภาพแบบ Lazy Loading โดย ไม่ต้องใช้ จาวาสคริปต์บรรทัดใด ๆ แม้แต่สคริปต์นี้	รหัส	สด
พื้นเมือง	ทดสอบการโหลดรูปภาพแบบขี้เกียจเนทีฟ แบบมีเงื่อนไข โดยใช้ตัวเลือก `use_native` (ดู API)	รหัส	สด

รักโครงการนี้หรือไม่? - ซื้อกาแฟให้ฉันหน่อย!

- เคล็ดลับและเทคนิค

ขยาย

vanilla lazyload

?‍ เริ่มต้นใช้งาน - HTML

ภาพขี้เกียจ:

รูปภาพขี้เกียจที่มีตัวยึดตำแหน่งคุณภาพต่ำ:

รูปภาพตอบสนองแบบขี้เกียจพร้อม srcset และ sizes :

รูปภาพที่ตอบสนองช้าพร้อมรองรับ hi-dpi โดยใช้แท็ก picture :

รูปภาพตอบสนองแบบ Lazy พร้อมการเลือกรูปแบบ WebP อัตโนมัติ โดยใช้แท็ก picture :

ภาพพื้นหลังขี้เกียจ

ภาพพื้นหลังเดียว:

พื้นหลังเดี่ยวพร้อมการรองรับหน้าจอ HiDPI:

พื้นหลังหลายแบบ:

พื้นหลังหลายแบบ รองรับหน้าจอ HiDPI:

พื้นหลังพร้อม image-set :

พื้นหลังหลายแบบพร้อม image-set :

SVG ภาพเคลื่อนไหวที่ขี้เกียจ

วีดีโอขี้เกียจ

iframe ขี้เกียจ

?‍ เริ่มต้นใช้งาน - สคริปต์

วิธีที่ง่ายและง่ายที่สุด

การใช้สคริปต์ async

การใช้สคริปต์ async + รับการอ้างอิงอินสแตนซ์

ติดตั้งท้องถิ่น

ใช้ npm

การใช้ธนู

ดาวน์โหลดด้วยตนเอง

การใช้งานในท้องถิ่น

การใช้งานด้วย React

การรวมกลุ่ม

- สูตรอาหาร

ซ่อนข้อความแสดงแทนและรูปภาพว่าง

การจัดการข้อผิดพลาดของภาพ

เนื้อหาแบบไดนามิก

การโหลดแบบเนทีฟแบบผสมและแบบใช้ JS

แผงเลื่อน

ฟังก์ชั่นขี้เกียจ

การเริ่มต้น Lazy ของอินสแตนซ์ LazyLoad หลายรายการ

การสาธิต

- เคล็ดลับและเทคนิค

รูปภาพตอบสนองแบบขี้เกียจพร้อม `srcset` และ `sizes` :

รูปภาพที่ตอบสนองช้าพร้อมรองรับ hi-dpi โดยใช้แท็ก `picture` :

รูปภาพตอบสนองแบบ Lazy พร้อมการเลือกรูปแบบ WebP อัตโนมัติ โดยใช้แท็ก `picture` :

พื้นหลังพร้อม `image-set` :

พื้นหลังหลายแบบพร้อม `image-set` :

การใช้สคริปต์ `async`

การใช้สคริปต์ `async` + รับการอ้างอิงอินสแตนซ์