หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

lozad.js

Lazy Loader ที่มีประสิทธิภาพสูงเบาและกำหนดค่าได้ใน JS บริสุทธิ์โดยไม่มีการพึ่งพาภาพ iFrames และอื่น ๆ โดยใช้ IntersectionObserver API

JLM Coutureสมดุลใหม่บีบีซี

และอีกมากมาย ...

สารบัญ

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

ยังมีไลบรารี JavaScript ที่โหลดขี้เกียจอีกตัวทำไม?

ไลบรารีการโหลดขี้เกียจที่มีอยู่เชื่อมต่อกับเหตุการณ์การเลื่อนหรือใช้ตัวจับเวลาเป็นระยะและโทรหา getBoundingClientRect() ในองค์ประกอบที่ต้องโหลดขี้เกียจ อย่างไรก็ตามวิธีการนี้ช้าอย่างเจ็บปวดเนื่องจากการโทรแต่ละครั้งเพื่อ getBoundingClientRect() บังคับให้เบราว์เซอร์จัดวางหน้าทั้งหมดอีกครั้งและจะแนะนำให้รู้จักกับเว็บไซต์ของคุณอีกครั้ง

ทำให้สิ่งนี้มีประสิทธิภาพและนักแสดงมากขึ้นคือสิ่งที่ Intersectionobserver ได้รับการออกแบบมาและมันลงจอดใน Chrome 51 Intersectionobservers แจ้งให้คุณทราบเมื่อองค์ประกอบที่สังเกตได้เข้าหรือออกจากวิวพอร์ตของเบราว์เซอร์

ติดตั้ง 

 # You can install lozad with npm
$ npm install --save lozad

# Alternatively you can use Yarn
$ yarn add lozad

# Another option is to use Bower
$ bower install lozad

จากนั้นด้วยโมดูล Bundler เช่น Rollup หรือ Webpack ให้ใช้ตามที่คุณต้องการ: 

 // using ES6 modules
import lozad from 'lozad'

// using CommonJS modules
var lozad = require ( 'lozad' )

หรือโหลดผ่าน CDN และรวมไว้ในแท็ก head ของหน้าของคุณ 

 < script type =" text/javascript " src =" https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js " > </ script >

เมื่อโหลดจาก CDN คุณสามารถค้นหาไลบรารีบน window.lozad

การใช้งาน

ใน HTML ให้เพิ่มตัวระบุลงในองค์ประกอบ (ตัวเลือกเริ่มต้นที่ระบุคือคลาส lozad ): 

 < img class =" lozad " data-src =" image.png " >

สิ่งที่คุณต้องทำตอนนี้คือเพียงแค่อินสแตนซ์ Lozad ดังนี้: 

 const observer = lozad ( ) ; // lazy loads elements with default selector as '.lozad'
observer . observe ( ) ;

หรือด้วยการอ้างอิง Element DOM: 

 const el = document . querySelector ( 'img' ) ;
const observer = lozad ( el ) ; // passing a `NodeList` (e.g. `document.querySelectorAll()`) is also valid
observer . observe ( ) ;

หรือด้วยตัวเลือกที่กำหนดเอง: 

 const observer = lozad ( '.lozad' , {
    rootMargin : '10px 0px' , // syntax similar to that of CSS Margin
    threshold : 0.1 , // ratio of element convergence
    enableAutoReload : true // it will reload the new image when validating attributes changes
} ) ;
observer . observe ( ) ;

อ้างอิง:

  • ตัวเลือก intersectionobserver: rootmargin
  • ตัวเลือก Intersectionobserver: Thresholds

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

 lozad ( '.lozad' , {
    load : function ( el ) {
        console . log ( 'loading element' ) ;

        // Custom implementation to load an element
        // e.g. el.src = el.getAttribute('data-src');
    }
} ) ;

หากคุณต้องการขยายสถานะขององค์ประกอบ loaded คุณสามารถเพิ่มตัวเลือกที่โหลดได้:

หมายเหตุ : แอตทริบิวต์ "data-loaded"="true" ถูกใช้โดย Lozad เพื่อตรวจสอบว่ามีการโหลดองค์ประกอบก่อนหน้านี้หรือไม่ 

 lozad ( '.lozad' , {
    loaded : function ( el ) {
        // Custom implementation on a loaded element
        el . classList . add ( 'loaded' ) ;
    }
} ) ;

หากคุณต้องการโหลดอย่างขี้เกียจเพิ่มองค์ประกอบแบบไดนามิก: 

 const observer = lozad ( ) ;
observer . observe ( ) ;

// ... code to dynamically add elements
observer . observe ( ) ; // observes newly added elements as well

สำหรับใช้กับภาพที่ตอบสนอง 

 <!-- responsive image example -->
< img class =" lozad " data-src =" image.png " data-srcset =" image.png 1000w, image-2x.png 2000w " >

สำหรับใช้กับภาพพื้นหลัง 

 <!-- background image example -->
< div class =" lozad " data-background-image =" image.png " >
</ div >

สำหรับใช้กับภาพพื้นหลังหลายภาพ 

 <!-- multiple background image example -->
< div class =" lozad " data-background-image =" path/to/first/image,path/to/second/image,path/to/third/image " >
</ div >

สำหรับใช้กับภาพพื้นหลังที่ตอบสนอง (ชุดภาพ) 

 <!-- responsive background image-set example -->
< div class =" lozad " data-background-image-set =" url('photo.jpg') 1x, url('[email protected]') 2x " >
</ div >

หากต้องการเปลี่ยนตัวคั่นที่แยกภาพพื้นหลัง: 

 <!-- custom delimiter for background images example -->
< div
  class =" lozad "
  data-background-image =" /first/custom,image,path/image.png-/second/custom,image,path/image.png "
  data-background-delimiter =" - "
>
</ div >

หากคุณต้องการโหลดภาพก่อนที่จะปรากฏ: 

 const observer = lozad ( ) ;
observer . observe ( ) ;

const coolImage = document . querySelector ( '.image-to-load-first' ) ;
// ... trigger the load of a image before it appears on the viewport
observer . triggerLoad ( coolImage ) ;

การปรับปรุงภาพขนาดใหญ่

บางครั้งการโหลดภาพใช้เวลานาน สำหรับกรณีนี้คุณสามารถเพิ่มพื้นหลังตัวยึด: 

 < img class =" lozad " data-placeholder-background =" red " data-src =" image.png " >

Lozad ตั้งค่าสีพื้นหลังของตัวยึดขององค์ประกอบ IMG และผู้ใช้จะเห็นทางเลือกจนกว่าภาพจะโหลด

ตัวอย่างที่มีแท็กรูปภาพ

สร้างโครงสร้างองค์ประกอบภาพ ที่หัก

เช่นเบราว์เซอร์ไม่รองรับแท็กรูปภาพ! คุณต้องตั้งค่าแอตทริบิวต์ data-iesrc (เฉพาะสำหรับแท็กรูปภาพของคุณ) ด้วยแหล่งที่มาสำหรับเบราว์เซอร์ IE

สามารถเพิ่มแอตทริบิวต์ data-alt ลงในแท็กรูปภาพสำหรับใช้ในแอตทริบิวต์ alt ของภาพขี้เกียจ 

 <!-- For an element to be caught, add a block type that is different from the inline and some min-height for correct caught into view -->
< picture class =" lozad " style =" display: block; min-height: 1rem " data-iesrc =" images/thumbs/04.jpg " data-alt ="" >
    < source srcset =" images/thumbs/04.jpg " media =" (min-width: 1280px) " >
    < source srcset =" images/thumbs/05.jpg " media =" (min-width: 980px) " >
    < source srcset =" images/thumbs/06.jpg " media =" (min-width: 320px) " >
    <!-- NO img element -->
    <!-- instead of img element, there will be the last source with the minimum dimensions -->
    <!-- for disabled JS you can set <noscript><img src="images/thumbs/04.jpg" alt=""></noscript> -->
</ picture >

เมื่อ Lozad โหลดองค์ประกอบภาพนี้มันจะแก้ไขได้

หากคุณต้องการใช้ตัวยึดภาพ (เช่นตัวยึดภาพคุณภาพต่ำ) คุณสามารถตั้งค่าแท็ก img ชั่วคราวภายในแท็ก picture ของคุณ มันจะถูกลบออกเมื่อ Lozad โหลดองค์ประกอบรูปภาพ 

 < picture class =" lozad " style =" display: block; min-height: 1rem " data-iesrc =" images/thumbs/04.jpg " data-alt ="" >
    < source srcset =" images/thumbs/04.jpg " media =" (min-width: 1280px) " >
    < source srcset =" images/thumbs/05.jpg " media =" (min-width: 980px) " >
    < source srcset =" images/thumbs/06.jpg " media =" (min-width: 320px) " >
    <!-- you can define a low quality image placeholder that will be removed when the picture is loaded -->
    < img src =" data:image/jpeg;base64,/some_lqip_in_base_64== " >
</ picture >

ตัวอย่างด้วยวิดีโอ 

 < video class =" lozad " data-poster =" images/backgrounds/video-poster.jpeg " >
    < source data-src =" video/mov_bbb.mp4 " type =" video/mp4 " >
    < source data-src =" video/mov_bbb.ogg " type =" video/ogg " >
</ video >

ตัวอย่างด้วย iframe 

 < iframe data-src =" embed.html " class =" lozad " > </ iframe >

นั่นคือทั้งหมดเพียงเพิ่มคลาส lozad

ตัวอย่างการสลับคลาส 

 < div data-toggle-class =" active " class =" lozad " >
    <!-- content -->
</ div >

คลาส active จะถูกสลับกับองค์ประกอบเมื่อเข้าสู่วิวพกพาของเบราว์เซอร์

การสนับสนุนเบราว์เซอร์

วางจำหน่ายในเบราว์เซอร์ล่าสุด หากการรองรับเบราว์เซอร์ไม่สามารถใช้งานได้ให้ใช้ Polyfill

สำหรับการสนับสนุน IE11 โปรดใช้ประโยชน์จากโพลีฟิลเหล่านี้

คำถามที่พบบ่อย

ชำระเงินคำถามที่พบบ่อยวิกิสำหรับ gotchas ทั่วไปบางอย่างที่จะรับรู้ในขณะที่ใช้ lozad.js

มีส่วนช่วย

สนใจในการสนับสนุนคุณสมบัติและการแก้ไขหรือไม่?

อ่านเพิ่มเติมเกี่ยวกับการมีส่วนร่วม

การเปลี่ยนแปลง

ดูการเปลี่ยนแปลง

ใบอนุญาต

MIT © Apoorv Saxena

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด