Hybrid Lazy Loading: การโยกย้ายแบบก้าวหน้าไปสู่ ​​Native Lazy Loading

ในช่วงสองสามสัปดาห์ที่ผ่านมา คุณอาจเคยได้ยินหรืออ่านเกี่ยวกับ Native Lazy Loading ซึ่งกำลังจะมาใน Chromium 75 ในอีกไม่กี่เดือนข้างหน้า

“ใช่ ข่าวดี แต่เราจะต้องรอจนกว่าเบราว์เซอร์ทั้งหมดจะรองรับ”

ถ้านี่เป็นสิ่งแรกที่คุณคิดในใจ ให้อ่านต่อ ฉันจะพยายามโน้มน้าวใจคุณในสิ่งที่ตรงกันข้าม

มาเริ่มด้วยการเปรียบเทียบระหว่างการโหลดแบบเนทีฟแบบ Lazy Loading กับ JavaScript ที่ขับเคลื่อนด้วย JavaScript

เนทีฟกับจาวาสคริปต์ที่ขับเคลื่อนด้วย Lazy Loading

การโหลดแบบ Lazy Loading เป็นวิธีการปรับปรุงประสิทธิภาพของเว็บไซต์หรือเว็บแอปพลิเคชันโดยเพิ่มความเร็วในการแสดงผลของรูปภาพครึ่งหน้าบนและ iframes (และบางครั้งเป็นวิดีโอ) โดยการเลื่อนการโหลดเนื้อหาครึ่งหน้าล่าง

จาวาสคริปต์ที่ขับเคลื่อนด้วย Lazy Loading

ในการโหลดรูปภาพหรือ iframes แบบ Lazy Loading เป็นเรื่องปกติมากที่จะทำเครื่องหมายโดยแทนที่แอตทริบิวต์ src ที่เหมาะสมด้วยแอตทริบิวต์ data-src ที่คล้ายกัน จากนั้นจึงใช้โซลูชัน JavaScript เพื่อตรวจจับเมื่อรูปภาพ/iframes ได้รับ ใกล้กับส่วนที่มองเห็นได้ของเว็บไซต์ (โดยทั่วไปเนื่องจากผู้ใช้เลื่อนลงมา) และเพื่อคัดลอกแอตทริบิวต์ข้อมูลลงในรายการที่เหมาะสม จากนั้นจึงทริกเกอร์การโหลดเนื้อหาที่เลื่อนออกไป

 <img data-src="turtle.jpg" alt="Lazy turtle" class="lazy">

Native Lazy Loading

ตามข้อกำหนดการโหลดแบบเนทีฟแบบเนทีฟ (ยังอยู่ระหว่างการพัฒนา) หากคุณต้องการโหลดรูปภาพหรือ iframes แบบ Lazy Loading โดยใช้คุณสมบัติการโหลดแบบ Lazy Loading คุณเพียงแค่ต้องเพิ่มแอตทริบิวต์ loading=lazy ในแท็กที่เกี่ยวข้อง

 <img src="turtle.jpg" alt="Lazy turtle" loading="lazy">

Addy Osmani เขียนอย่างกว้างขวางเกี่ยวกับหัวข้อนี้ในบทความของเขา “Native Image Lazy-Loading For The Web!” โดยเขาระบุว่าทีมงาน Google Chrome นั้นกำลังพัฒนาคุณลักษณะนี้อยู่แล้วและตั้งใจที่จะจัดส่งใน Chrome 75

เบราว์เซอร์ที่ใช้ Chromium อื่นๆ เช่น Opera และ Microsoft Edge จะได้รับประโยชน์จากการพัฒนานี้เช่นกัน โดยได้รับคุณลักษณะเดียวกันนี้ในการอัปเดตครั้งแรกโดยใช้ Chromium 75

เริ่มต้นใช้งาน Native Lazy Loading

ในกรณีที่รูปภาพของเว็บไซต์ของคุณดาวน์โหลดทั้งหมดพร้อมกันที่หน้า Landing Page โดยไม่ต้องโหลดแบบ Lazy Loading คุณสามารถเปิดใช้งาน (ที่รองรับ) การโหลดแบบ Lazy Loading แบบเนทีฟในเว็บไซต์ของคุณได้อย่างง่ายดายเหมือนกับการเพิ่มแอตทริบิวต์ HTML คุณลักษณะการ loading จะบอกเบราว์เซอร์ว่ารูปภาพใดมีความสำคัญในการโหลดทันที และสามารถดาวน์โหลดแบบเกียจคร้านเมื่อผู้ใช้เลื่อนลง สามารถใช้แอตทริบิวต์เดียวกันนี้กับ iframe ได้

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

 <img src="rabbit.jpg" alt="Fast rabbit" loading="eager">

หากต้องการบอกเบราว์เซอร์ว่าควรดาวน์โหลดรูปภาพอย่างเกียจคร้าน เพียงเพิ่มแอตทริบิวต์ loading="lazy" นี่เป็นแนวทางปฏิบัติที่ดีที่สุดก็ต่อเมื่อคุณทำกับรูปภาพรองเท่านั้น โดยทั่วไปแล้วสำหรับรูปภาพจะแสดงอยู่ครึ่งหน้าล่าง

 <img src="turtle.jpg" alt="Lazy turtle" loading="lazy">

เพียงแค่เพิ่มแอตทริบิวต์การ loading ให้กับรูปภาพและ iframes ของคุณ คุณก็จะทำให้เว็บไซต์ของคุณใช้การโหลดแบบเนทีฟในการโหลดแบบเนทีฟเป็นการเพิ่มประสิทธิภาพแบบก้าวหน้าได้ เว็บไซต์ของคุณจะค่อยๆ ได้รับประโยชน์จากการสนับสนุนนี้เมื่อได้รับการสนับสนุนสำหรับผู้ใช้ของคุณในเบราว์เซอร์สมัยใหม่ส่วนใหญ่

นี่เป็นแนวทางที่ดีที่สุดที่จะใช้หากเว็บไซต์ของคุณไม่ได้ใช้การโหลดแบบ Lazy Loading ใดๆ ในปัจจุบัน แต่ถ้าคุณใช้โซลูชันการโหลดแบบ Lazy Loading ที่ขับเคลื่อนด้วย JavaScript อยู่แล้ว คุณอาจต้องการเก็บไว้ในขณะที่ค่อยๆ เปลี่ยนไปใช้การโหลดแบบ Lazy Loading แบบเนทีฟ

ทางออกที่ดีคือเริ่มใช้การโหลดแบบเนทีฟในทันที และใช้ polyfill เพื่อให้ทำงานได้กับทุกเบราว์เซอร์ น่าเสียดายที่การโหลดแบบเนทีฟแบบเนทีฟไม่ใช่คุณสมบัติที่เราสามารถ polyfill ด้วย JavaScript

ไม่ใช้สำหรับ Polyfill

เมื่อเทคโนโลยีเบราว์เซอร์ใหม่เปิดตัวในเบราว์เซอร์เดียว ชุมชนโอเพนซอร์สมักจะเผยแพร่ JavaScript polyfill เพื่อมอบเทคโนโลยีเดียวกันกับเบราว์เซอร์ที่เหลือ ตัวอย่างเช่น Polyfill IntersectionObserver ใช้องค์ประกอบ JavaScript และ DOM เพื่อประสานงาน Element.getBoundingClientRect() เพื่อสร้างพฤติกรรมของ API ดั้งเดิม

แต่กรณีของการโหลดเนทีฟแบบเนทีฟนั้นแตกต่างกัน เนื่องจาก JavaScript polyfill สำหรับการ loading="lazy" จะต้อง ป้องกันไม่ให้ เบราว์เซอร์โหลดเนื้อหาทันทีที่พวกเขาพบ URL ในมาร์กอัปของรูปภาพหรือ iframe JavaScript ไม่มีการควบคุมในขั้นเริ่มต้นของการแสดงหน้าเว็บนี้ ดังนั้นจึงไม่สามารถ polyfill ในการโหลดแบบ Lazy Loading ดั้งเดิมได้

โหลดขี้เกียจแบบไฮบริด

หากคุณไม่พอใจกับการมี Native Lazy Loading เป็นการเพิ่มประสิทธิภาพแบบก้าวหน้าเท่านั้น หรือคุณได้ใช้งานการโหลดแบบ Lazy Loading แบบ JavaScript แล้ว และไม่ต้องการสูญเสียคุณสมบัตินี้ในเบราว์เซอร์ที่ไม่ค่อยทันสมัย ​​(แต่ยังคงต้องการเปิดใช้งานการโหลดแบบ Native Lazy Loading บนเบราว์เซอร์ ที่รองรับ) จากนั้นคุณต้องมีโซลูชันอื่น แนะนำ: ไฮบริดโหลดขี้เกียจ

การโหลดแบบ Lazy Loading แบบไฮบริดเป็นเทคนิคในการใช้การโหลดแบบ Lazy Loading บนเบราว์เซอร์ที่สนับสนุน มิฉะนั้น ให้พึ่งพา JavaScript เพื่อจัดการกับการโหลดแบบ Lazy Loading

“

ในการโหลดแบบไฮบริด คุณจะต้องมาร์กอัปเนื้อหาที่ขี้เกียจของคุณโดยใช้แอตทริบิวต์ data แทนที่จะเป็นของจริง (เช่น ในการโหลดแบบ Lazy Loading ที่ขับเคลื่อนด้วย JavaScript) และเพิ่มแอตทริบิวต์ loading="lazy"

 <img data-src="turtle.jpg" loading="lazy" alt="Lazy turtle">

จากนั้นคุณต้องใช้ JavaScript ก่อนอื่น คุณต้อง ตรวจสอบว่าเบราว์เซอร์รองรับการโหลดแบบ Lazy Loading หรือไม่ จากนั้น ทำอย่างใดอย่างหนึ่งต่อไปนี้สำหรับทุกองค์ประกอบที่มีแอตทริบิวต์ loading="lazy" :

• หากรองรับการโหลดแบบเนทีฟแบบเนทีฟ ให้คัดลอกค่าแอตทริบิวต์ data-src ไปยังแอตทริบิวต์ src
• หากไม่รองรับ ให้เริ่มต้นสคริปต์การโหลดแบบสันหลังยาวของ JavaScript เพื่อดำเนินการดังกล่าวเมื่อองค์ประกอบเข้าสู่วิวพอร์ต

ไม่ยากนักที่จะเขียนโค้ด JavaScript ที่จำเป็นในการดำเนินการเหล่านี้ด้วยตัวเอง คุณสามารถตรวจสอบได้ว่า Native Lazy Loading รองรับเงื่อนไขหรือไม่:

 if ('loading' in HTMLImageElement.prototype)

หากเป็น เพียงคัดลอกค่าแอตทริบิวต์ src จาก data-src หากไม่เป็นเช่นนั้น ให้เริ่มต้นสคริปต์การโหลดแบบ Lazy Loading ที่คุณเลือก

นี่คือตัวอย่างโค้ดที่ทำอย่างนั้น

 <!-- In-viewport images should be loaded normally, or eagerly --> <img src="important.jpg" loading="eager" alt="Important image"> <!-- Let's lazy-load the rest of these images --> <img data-src="lazy1.jpg" loading="lazy" alt="Lazy image 1"> <img data-src="lazy2.jpg" loading="lazy" alt="Lazy image 2"> <img data-src="lazy3.jpg" loading="lazy" alt="Lazy image 3"> <script> (function() { if ("loading" in HTMLImageElement.prototype) { var lazyEls = document.querySelectorAll("[loading=lazy]"); lazyEls.forEach(function(lazyEl) { lazyEl.setAttribute( "src", lazyEl.getAttribute("data-src") ); }); } else { // Dynamically include a lazy loading library of your choice // Here including vanilla-lazyload var script = document.createElement("script"); script.async = true; script.src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js"; window.lazyLoadOptions = { elements_selector: "[loading=lazy]" //eventually more options here }; document.body.appendChild(script); } })(); </script>

คุณสามารถค้นหาและทดสอบโค้ดด้านบนในการสาธิตสดนี้

ยังคงเป็นสคริปต์พื้นฐาน และสิ่งต่าง ๆ อาจซับซ้อนเมื่อคุณใช้แอตทริบิวต์หรือแท็กเพิ่มเติมเพื่อรับภาพที่ตอบสนอง (เช่น srcset และ sizes หรือแม้แต่แท็ก picture และ source )

ความช่วยเหลือจากบุคคลที่สามเล็กน้อย

ในช่วงสี่ปีที่ผ่านมา ฉันได้ดูแล open-source lazy load script ชื่อ " vanilla-lazyload ” และในสองสามวันหลังจากที่ Addy Osmani เขียนเกี่ยวกับการโหลดแบบ Lazy Loading ดั้งเดิม ชุมชนโต้ตอบโดยถามฉันว่าสคริปต์ของฉันทำได้ไหม ทำหน้าที่เป็นโพลีฟิล

ดังที่ฉันได้อธิบายไว้ก่อนหน้านี้ คุณไม่สามารถสร้าง polyfill สำหรับคุณสมบัติการโหลดแบบเนทีฟแบบเนทีฟ อย่างไรก็ตาม ฉันคิดว่าโซลูชันที่จะช่วยให้นักพัฒนาเริ่มเปลี่ยนไปใช้การโหลดแบบเนทีฟแบบเนทีฟได้ง่ายขึ้น โดยไม่ต้องเขียนโค้ด JavaScript ใดๆ ฉันได้กล่าวถึงมาก่อน

เริ่มต้นจาก vanilla-lazyload เวอร์ชัน 12 คุณสามารถตั้งค่าตัวเลือก use_native true เพื่อเปิดใช้งานการโหลดแบบไฮบริดแบบไฮบริด สคริปต์นี้มีขนาดเพียง 2.0 kB gzipped และพร้อมใช้งานบน GitHub, npm และ jsDelivr แล้ว

• ทำความรู้จัก vanilla-lazyload บน GitHub

สาธิต

คุณสามารถเริ่มเล่นกับการโหลดแบบเนทีฟแบบเนทีฟได้แล้ววันนี้โดยดาวน์โหลด Chrome Canary หรือ Microsoft Edge Insider ( ช่อง dev ) จากนั้นเปิดใช้งานแฟล็ก "เปิดใช้งานการโหลดภาพแบบสันหลังยาว" และ "เปิดใช้งานการโหลดเฟรมแบบสันหลังยาว" หากต้องการเปิดใช้งานแฟล็กเหล่านี้ ให้ป้อน about:flags ในช่อง URL ของเบราว์เซอร์และค้นหา "lazy" ในช่องค้นหา

Native Lazy Loading การสาธิต

ในการวิเคราะห์ว่าการโหลดแบบเนทีฟแบบเนทีฟทำงานอย่างไรในเครื่องมือสำหรับนักพัฒนา คุณสามารถเริ่มเล่นด้วยการสาธิตต่อไปนี้ ในอันนี้ ไม่ได้ใช้ JavaScript บรรทัดเดียว ใช่ มันเป็นเพียงการโหลดแบบเนทีฟแบบเนทีฟเต็มรูปแบบ

• ทดสอบการสาธิตการโหลดแบบเนทีฟแบบเนทีฟ

สิ่งที่คาดหวัง : ภาพทั้งหมดถูกดึงมาพร้อมกัน แต่มีการตอบสนอง HTTP ต่างกัน ภาพที่มีรหัสตอบกลับ 200 เป็นภาพที่โหลดอย่างกระตือรือร้น ในขณะที่ภาพที่มีรหัสตอบกลับ 206 จะถูกดึงมาเพียงบางส่วนเท่านั้น เพื่อให้ได้ข้อมูลเบื้องต้นเกี่ยวกับภาพ ภาพเหล่านั้นจะถูกดึงออกมาอย่างสมบูรณ์พร้อมรหัสตอบกลับ 200 รายการเมื่อคุณเลื่อนลง

สาธิตการโหลดขี้เกียจแบบไฮบริด

หากต้องการวิเคราะห์ว่าการโหลดแบบไฮบริดทำงานอย่างไร คุณสามารถเริ่มเล่นด้วยการสาธิตครั้งต่อไป ที่นี่ [email protected] ถูกใช้และตัวเลือก use_native ถูกตั้งค่า true :

• ทดสอบการสาธิตการโหลดขี้เกียจแบบไฮบริด

สิ่งที่คาดหวัง : ลองใช้การสาธิตในเบราว์เซอร์ต่างๆ เพื่อดูว่ามันทำงานอย่างไร ในเบราว์เซอร์ที่รองรับการโหลดแบบเนทีฟแบบเนทีฟ ลักษณะการทำงานจะเหมือนกับในการสาธิตการโหลดแบบเนทีฟแบบเนทีฟ ในเบราว์เซอร์ที่ไม่รองรับการโหลดแบบเนทีฟแบบ Lazy Loading ภาพจะถูกดาวน์โหลดเมื่อคุณเลื่อนลง

โปรดทราบว่า vanilla-lazyload ใช้ IntersectionObserver API ภายใต้ประทุน ดังนั้นคุณจะต้อง polyfill บน Internet Explorer และ Safari เวอร์ชันล่าสุดที่น้อยกว่า ไม่ใช่เรื่องใหญ่หากไม่มี polyfill เพราะในกรณีนั้น vanilla-lazyload จะดาวน์โหลดภาพทั้งหมดพร้อมกัน

หมายเหตุ : อ่านเพิ่มเติมในบท “To Polyfill Or Not To Polyfill” ของ ไฟล์ readme ของ vanilla-lazyload

ลองโหลดไฮบริดขี้เกียจในเว็บไซต์ของคุณ

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

มาร์กอัป HTML

มาร์กอัปรูปภาพที่ง่ายที่สุดประกอบด้วยสองแอตทริบิวต์: src และ alt

สำหรับรูปภาพครึ่งหน้าบน คุณควรออกจากแอตทริบิวต์ src และเพิ่มแอตทริบิวต์ loading="eager"

 <img src="important.jpg" loading="eager" alt="Important image">

สำหรับรูปภาพครึ่งหน้าล่าง คุณควรแทนที่แอตทริบิวต์ src ด้วยแอตทริบิวต์ data-src และเพิ่มแอตทริบิวต์ loading="lazy"

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

หากคุณต้องการใช้ภาพที่ตอบสนอง ให้ทำเช่นเดียวกันกับ srcset และ sizes

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

หากคุณต้องการใช้แท็ก picture ให้เปลี่ยน srcset , sizes และ src ในแท็ก source ด้วย

 <picture> <source media="(min-width: 1200px)"> <source media="(min-width: 800px)"> <img alt="A lazy image" loading="lazy" data-src="lazy.jpg"> </picture>

แท็ก picture ยังสามารถใช้เพื่อเลือกโหลดรูปแบบ WebP สำหรับรูปภาพของคุณ

หมายเหตุ : หากคุณต้องการทราบการใช้งาน vanilla-lazyload เพิ่มเติม โปรดอ่านส่วน HTML “เริ่มต้นใช้งาน” ของไฟล์ readme

รหัส JavaScript

ก่อนอื่น คุณต้องรวม vanilla-lazyload บนเว็บไซต์ของคุณ

คุณสามารถโหลดได้จาก CDN เช่น jsDelivr:

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

หรือคุณสามารถติดตั้งโดยใช้ npm:

 npm install vanilla-lazyload@12

นอกจากนี้ยังสามารถใช้สคริปต์ async กับการเริ่มต้นอัตโนมัติ โหลดเป็นโมดูล ES โดยใช้ type="module" หรือโหลดเป็น AMD โดยใช้ RequireJS ค้นหาวิธีเพิ่มเติมในการรวมและใช้ vanilla-lazyload ในส่วนสคริปต์ "เริ่มต้นใช้งาน" ของไฟล์ readme

จากนั้น ในโค้ด JavaScript ของเว็บไซต์/เว็บแอปพลิเคชันของคุณ ให้รวมสิ่งต่อไปนี้:

 var pageLazyLoad = new LazyLoad({ elements_selector: "[loading=lazy]", use_native: true // ← enables hybrid lazy loading });

หมายเหตุ : สคริปต์มีการตั้งค่าอื่น ๆ มากมายที่คุณสามารถใช้เพื่อกำหนด พฤติกรรมของ vanilla-lazyload เช่น เพื่อเพิ่มระยะห่างของพื้นที่การเลื่อนซึ่งจะเริ่มโหลดองค์ประกอบหรือโหลดองค์ประกอบเฉพาะในกรณีที่ยังคงอยู่ในวิวพอร์ตสำหรับ เวลาที่กำหนด ค้นหาการตั้งค่าเพิ่มเติมในส่วน API ของไฟล์ readme

ทั้งหมดเข้าด้วยกันโดยใช้สคริปต์ async

หากต้องการรวมทั้งหมดเข้าด้วยกันและใช้สคริปต์ async เพื่อเพิ่มประสิทธิภาพสูงสุด โปรดอ้างอิงโค้ด HTML และ JavaScript ต่อไปนี้:

 <!-- In-viewport images should be loaded normally, or eagerly --> <img src="important.jpg" loading="eager" alt="Important image"> <!-- Let's lazy-load the rest of these images --> <img data-src="lazy1.jpg" loading="lazy" alt="Lazy image 1"> <img data-src="lazy2.jpg" loading="lazy" alt="Lazy image 2"> <img data-src="lazy3.jpg" loading="lazy" alt="Lazy image 3"> <!-- Set the options for the global instance of vanilla-lazyload --> <script> window.lazyLoadOptions = { elements_selector: "[loading=lazy]", use_native: true // ← enables hybrid lazy loading }; </script> <!-- Include vanilla lazyload 12 through an async script --> <script async src="https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js"></script>

แค่นั้นแหละ! ด้วยขั้นตอนที่ง่ายมากและง่ายเหล่านี้ คุณจะเปิดใช้งานการโหลดแบบไฮบริดในเว็บไซต์ของคุณ!

แนวทางปฏิบัติที่ดีที่สุดที่สำคัญ

• ใช้การโหลดแบบ Lazy Loading เฉพาะกับรูปภาพที่คุณรู้ว่าอาจปรากฏอยู่ครึ่งหน้าล่าง โหลดส่วนที่ครึ่งหน้าบนอย่างกระตือรือร้นเพื่อเพิ่มประสิทธิภาพสูงสุด หากคุณเพียงแค่ใช้ Lazy Loading กับรูปภาพทั้งหมดในหน้าเว็บของคุณ จะทำให้ประสิทธิภาพการแสดงผลช้าลง
• ใช้ CSS เพื่อจองพื้นที่บางส่วนสำหรับรูปภาพก่อนที่จะโหลด ด้วยวิธีนี้ พวกเขาจะดันเนื้อหาที่เหลือด้านล่าง หากไม่ทำเช่นนั้น ระบบจะวางรูปภาพจำนวนมากขึ้นในครึ่งหน้าบนก่อนที่จะทำการดาวน์โหลด ซึ่งจะทำให้ดาวน์โหลดได้ทันที หากคุณต้องการเคล็ดลับ CSS ในการทำเช่นนั้น คุณสามารถค้นหาได้ในส่วนคำแนะนำและเคล็ดลับของ readme ของ vanilla-lazyload

ข้อดีและข้อเสีย

ห่อ

ฉันตื่นเต้นมากที่การโหลดแบบเนทีฟแบบเนทีฟกำลังมาสู่เบราว์เซอร์ และฉันแทบรอไม่ไหวให้ผู้จำหน่ายเบราว์เซอร์ ทุก รายนำไปใช้

ในระหว่างนี้ คุณสามารถเลือกเพิ่มมาร์กอัป HTML ของคุณเพื่อการเพิ่มประสิทธิภาพแบบก้าวหน้าและรับการโหลดแบบเนทีฟแบบเนทีฟเมื่อได้รับการสนับสนุนเท่านั้น หรือคุณสามารถเลือกใช้การโหลดแบบ Lazy Loading แบบไฮบริดและรับการโหลดแบบ Lazy Loading ทั้งแบบเนทีฟและ JavaScript จนถึงวันที่การโหลดแบบเนทีฟแบบเนทีฟ ได้รับการสนับสนุนจากเบราว์เซอร์ส่วนใหญ่

ให้มันลอง! อย่าลืมติดดาว / ดู vanilla-lazyload บน GitHub และแจ้งให้เราทราบความคิดเห็นของคุณในส่วนความคิดเห็น

อ่านเพิ่มเติม เกี่ยวกับ SmashingMag:

• Now You See Me: วิธีชะลอ ขี้เกียจโหลด และลงมือทำด้วย IntersectionObserver
• ขี้เกียจโหลดโมดูล JavaScript ด้วย ConditionerJS
• รายการตรวจสอบประสิทธิภาพ Front-End 2019 (PDF, Apple Pages, MS Word)
• การปรับปรุงประสิทธิภาพของเว็บไซต์สามารถช่วยโลกได้อย่างไร