lozad.js
1.0.0
Loader malas berkinerja tinggi, ringan dan dapat dikonfigurasi di JS murni tanpa ketergantungan untuk gambar, iframes dan banyak lagi, menggunakan IntersectionObserver API
Dan banyak lagi ...
Perpustakaan pemuatan malas yang ada menghubungkan ke acara gulir atau menggunakan timer berkala dan hubungi getBoundingClientRect() pada elemen yang perlu dimuat malas. Pendekatan ini, bagaimanapun, sangat lambat karena setiap panggilan ke getBoundingClientRect() memaksa browser untuk mengulangi seluruh halaman dan akan memperkenalkan jank yang cukup besar ke situs web Anda.
Membuat ini lebih efisien dan berkinerja adalah apa yang dirancang untuk intersectionoBserver, dan mendarat di Chrome 51. IntersectionObserver memberi tahu Anda ketika elemen yang diamati masuk atau keluar dari viewport browser.
# 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 lozadKemudian dengan bundler modul seperti rollup atau webpack, gunakan seperti halnya Anda akan:
// using ES6 modules
import lozad from 'lozad'
// using CommonJS modules
var lozad = require ( 'lozad' ) Atau muat melalui CDN dan sertakan di tag head halaman Anda.
< script type =" text/javascript " src =" https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js " > </ script > Saat memuat dari CDN, Anda dapat menemukan perpustakaan di window.lozad .
Dalam HTML, tambahkan pengidentifikasi ke elemen (pemilih default yang diidentifikasi adalah kelas lozad ):
< img class =" lozad " data-src =" image.png " >Yang perlu Anda lakukan sekarang hanyalah instantiate lozad sebagai berikut:
const observer = lozad ( ) ; // lazy loads elements with default selector as '.lozad'
observer . observe ( ) ; atau dengan referensi Element dom:
const el = document . querySelector ( 'img' ) ;
const observer = lozad ( el ) ; // passing a `NodeList` (e.g. `document.querySelectorAll()`) is also valid
observer . observe ( ) ;atau dengan opsi khusus:
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 ( ) ;Referensi:
atau jika Anda ingin memberikan definisi fungsi khusus untuk memuat elemen:
lozad ( '.lozad' , {
load : function ( el ) {
console . log ( 'loading element' ) ;
// Custom implementation to load an element
// e.g. el.src = el.getAttribute('data-src');
}
} ) ; Jika Anda ingin memperpanjang status elemen loaded , Anda dapat menambahkan opsi yang dimuat:
CATATAN : Atribut
"data-loaded"="true"digunakan oleh Lozad untuk menentukan apakah elemen telah dimuat sebelumnya.
lozad ( '.lozad' , {
loaded : function ( el ) {
// Custom implementation on a loaded element
el . classList . add ( 'loaded' ) ;
}
} ) ;Jika Anda ingin malas memuat elemen yang ditambahkan secara dinamis:
const observer = lozad ( ) ;
observer . observe ( ) ;
// ... code to dynamically add elements
observer . observe ( ) ; // observes newly added elements as welluntuk digunakan dengan gambar responsif
<!-- responsive image example -->
< img class =" lozad " data-src =" image.png " data-srcset =" image.png 1000w, image-2x.png 2000w " >untuk digunakan dengan gambar latar belakang
<!-- background image example -->
< div class =" lozad " data-background-image =" image.png " >
</ div >untuk digunakan dengan beberapa gambar latar belakang
<!-- multiple background image example -->
< div class =" lozad " data-background-image =" path/to/first/image,path/to/second/image,path/to/third/image " >
</ div >untuk digunakan dengan gambar latar belakang responsif (gambar-gambar)
<!-- responsive background image-set example -->
< div class =" lozad " data-background-image-set =" url('photo.jpg') 1x, url('[email protected]') 2x " >
</ div >Untuk mengubah pembatas yang membagi gambar latar belakang:
<!-- 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 >Jika Anda ingin memuat gambar sebelum muncul:
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 ) ;Terkadang pemuatan gambar membutuhkan waktu lama. Untuk kasus ini, Anda dapat menambahkan latar belakang placeholder:
< img class =" lozad " data-placeholder-background =" red " data-src =" image.png " >Lozad menetapkan warna latar belakang placeholder dari elemen IMG dan pengguna akan melihat fallback sampai gambar dimuat.
Buat struktur elemen gambar yang rusak .
IE Browser Jangan Mendukung Tag Gambar! Anda perlu mengatur atribut
data-iesrc(hanya untuk tag gambar Anda) dengan sumber untuk IE browser
Atribut
data-altdapat ditambahkan ke tag gambar untuk digunakan dalam atributaltgambar malas
<!-- 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 >Ketika Lozad memuat elemen gambar ini, itu akan memperbaikinya.
Jika Anda ingin menggunakan placeholder gambar (seperti placeholder gambar berkualitas rendah), Anda dapat mengatur tag img sementara di dalam tag picture Anda. Ini akan dihapus saat Lozad memuat elemen gambar.
< 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 data-src =" embed.html " class =" lozad " > </ iframe > Itu saja, cukup tambahkan kelas lozad .
< div data-toggle-class =" active " class =" lozad " >
<!-- content -->
</ div > Kelas active akan diaktifkan pada elemen saat memasuki viewport browser.
Tersedia di browser terbaru. Jika dukungan browser tidak tersedia, maka manfaatkan Polyfill.
Untuk dukungan IE11, silakan memanfaatkan polyfill ini.
Checkout Wiki FAQ untuk beberapa gotcha umum yang harus diperhatikan saat menggunakan Lozad.js
Tertarik untuk menyumbangkan fitur dan perbaikan?
Baca lebih lanjut tentang Kontribusi.
Lihat Changelog
MIT © Apoorv Saxena
