Walaupun selepas pengoptimuman, imej mungkin masih mengambil banyak ruang, menyebabkan pengguna menunggu terlalu lama. Jika pengguna tidak mendapat pengalaman akses cepat ke kandungan, mereka cenderung kehilangan kesabaran dan beralih ke laman web lain, jadi skim pemuatan imej yang cekap adalah penting.
Artikel ini akan memperkenalkan lima kaedah pemuatan imej malas untuk membantu anda mengoptimumkan laman web anda dan meningkatkan pengalaman pengguna. Kaedah ini sesuai untuk semua jenis imej, termasuk imej latar belakang, imej sebaris, dan imej bendera.
mata utama
Apa yang dimuatkan malas?
pemuatan imej malas bermakna secara asynchronously memuat imej di laman web. Kandungan boleh dimuat seperti yang diperlukan selepas halaman dimuatkan sepenuhnya, atau hanya jika imej muncul dalam tetingkap penyemak imbas. Ini bermakna jika pengguna tidak menatal ke bawah, imej di bahagian bawah halaman tidak akan dimuatkan, akhirnya meningkatkan prestasi aplikasi.Untuk kebanyakan laman web, adalah penting untuk mengetahui cara membolehkan pemuatan malas di HTML. Sebagai contoh, cuba melayari laman web kegemaran anda dengan foto HD dan anda akan mendapati bahawa laman web itu hanya memuatkan sejumlah imej yang terhad. Apabila anda menatal ke bawah halaman, imej tempat letak dengan cepat digantikan oleh imej sebenar.
Sebagai contoh, perhatikan loader di UNSPLASH.com: Menatal bahagian halaman ke dalam pandangan mencetuskan tempat letak digantikan dengan foto resolusi penuh:
contoh pemuatan malas di unsplash.com
Kenapa anda perlu melaksanakan pemuatan malas imej?
Belajar bagaimana imej beban malas adalah penting untuk mengoptimumkan prestasi web, terutama pada halaman dengan banyak kandungan visual. Berikut adalah beberapa sebab mengapa anda harus mempertimbangkan untuk memuatkan imej malas untuk laman web anda:
1.
Jika laman web anda menggunakan JavaScript untuk memaparkan kandungan atau menyediakan beberapa fungsi kepada pengguna, adalah penting untuk memuatkan DOM dengan cepat. Skrip biasanya bermula selepas DOM dimuatkan sepenuhnya. Di laman web dengan sebilangan besar imej, pemuatan malas (atau imej yang tidak disengajakan) boleh menentukan sama ada pengguna akan terus melayari atau meninggalkan laman web anda.Oleh kerana penyelesaian pemuatan yang paling malas hanya memuatkan imej apabila pengguna menatal ke lokasi di mana imej dapat dilihat dalam tetingkap, imej ini tidak akan dimuatkan jika pengguna tidak pernah mencapai lokasi tersebut. Ini bermakna banyak penjimatan jalur lebar boleh disimpan, yang sangat bermanfaat untuk kebanyakan pengguna, terutama yang menggunakan peranti mudah alih dan rangkaian perlahan.
Jika anda mahir dalam JavaScript, maka melaksanakan penyelesaian pemuatan malas anda sendiri tidak seharusnya menjadi masalah. Tidak ada yang memberi anda lebih banyak kawalan daripada menulis kod anda sendiri.
atau, anda boleh melayari web untuk mencari cara untuk melakukannya, atau menyertai forum perbincangan dan berkongsi idea. Saya melakukan perkara yang sama dan mendapati lima cara yang menarik ini.
1
Apabila pengguna menatal laman web, pemuatan malas asli imej dan iframes adalah cara untuk memuatkan kandungan secara langsung. Anda hanya perlu menambah atribut
ke imej dan iframe anda.Seperti yang anda lihat, tidak ada keperluan untuk JavaScript, atau secara dinamik menggantikan nilai atribut
, hanya gunakan HTML biasa. Pendekatan ini adalah contoh yang sempurna untuk menambah beban malas di HTML tanpa sebarang overhead tambahan.
loading="lazy" 'Memuatkan' harta membolehkan kami melambatkan pemuatan imej luar skrin dan iframe sehingga skrol pengguna ke kedudukan yang sepadan pada halaman. "Memuatkan" boleh mengambil mana -mana tiga nilai berikut:
<img src="https://img.php.cn/upload/article/000/000/000/173897821515260.jpg" alt="5 Techniques for Lazy Loading Images to Boost Website Performance " /> <iframe loading="lazy" src="content.html"></iframe></pre>Salin selepas log masuk
malas: sangat sesuai untuk pemuatan malas src
Auto: Tinggalkan pilihan kepada penyemak imbas sama ada untuk memuatkan malas.
Berikut adalah pengenalan MDN ke API ini:
API Observer Persimpangan menyediakan kaedah untuk secara asynchronously memerhatikan perubahan bersilang elemen sasaran dengan unsur-unsur nenek moyang atau tingkap dokumen peringkat atas.
Dengan kata lain, API pemerhati persimpangan memantau persimpangan satu elemen dengan yang lain secara tidak segerak.
Denys Mishunov menulis tutorial yang sangat baik mengenai pemerhati persimpangan dan menggunakannya untuk imej beban malas. Inilah penyelesaiannya:
Katakan anda mahu memuatkan perpustakaan gambar. Tanda untuk setiap imej adalah seperti berikut:
<img src="https://img.php.cn/upload/article/000/000/000/173897821515260.jpg" alt="5 Techniques for Lazy Loading Images to Boost Website Performance " /> <iframe loading="lazy" src="content.html"></iframe></pre>Salin selepas log masuk
di sini, jalan ke imej terkandung dalam atribut data-src, bukan atribut src. Alasannya ialah menggunakan src bermaksud imej akan dimuat dengan segera, yang bukan apa yang anda mahukan.
Dalam CSS, anda boleh menentukan nilai min-height untuk setiap gambar, seperti 100px. Ini memberikan setiap pemegang tempat imej (elemen IMG tanpa src atribut) dimensi menegak:
<img src="https://img.php.cn/upload/article/000/000/000/173897821665537.jpg" alt="5 Techniques for Lazy Loading Images to Boost Website Performance " /></pre>Salin selepas log masuk
Kemudian, dalam dokumentasi JavaScript, anda perlu membuat objek konfigurasi dan mendaftarkannya dengan contoh intersectionObserver:
img {
min-height: 100px;
/* more styles here */
}</pre>Salin selepas log masuk Akhirnya, anda boleh melangkah ke atas semua gambar dan menambahkannya ke contoh iterationObserver ini:
// 创建配置对象：rootMargin和threshold是接口公开的两个属性
const config = {
rootMargin: '0px 0px 50px 0px',
threshold: 0
};
// 使用intersectionObserver实例注册配置对象
let observer = new IntersectionObserver(function(entries, self) {
// 迭代每个条目
entries.forEach(entry => {
// 只处理相交的图片。isIntersecting是接口公开的属性
if(entry.isIntersecting) {
// 将图片路径从data-src复制到src的自定义函数
preloadImage(entry.target);
// 图片现在已就位，停止观察
self.unobserve(entry.target);
}
});
}, config);</pre>Salin selepas log masukKelebihan penyelesaian ini adalah mudah untuk dilaksanakan, cekap dan bersilang. Observer menjalankan sebahagian besar kerja pengkomputeran.
Dari segi sokongan penyemak imbas, semua pelayar arus perdana kecuali IE 11 dan Opera Mini menyokong API Observer Persimpangan dalam versi terbaru mereka.
Anda boleh mengetahui lebih lanjut mengenai API Observer Persimpangan dan butiran pelaksanaan ini dalam artikel Denys.
3
lozad.js pemuatan malas dari perpustakaan JavaScript 
lozad.js adalah loader malas yang berprestasi tinggi, ringan, dan boleh dikonfigurasikan yang menggunakan JavaScript tulen tanpa sebarang kebergantungan. Ia adalah alat yang sangat baik untuk memuatkan JavaScript, gambar, video dan iframes apabila pengguna menatal.
anda boleh memasang lozad menggunakan npm/benang dan mengimportnya menggunakan pembungkus modul pilihan anda:
const imgs = document.querySelectorAll('[data-src]');
imgs.forEach(img => {
observer.observe(img);
});</pre>Salin selepas log masuknpm install --save lozad yarn add lozad</pre>Salin selepas log masuk
di bahagian bawah halaman HTML
</pre> Seterusnya, untuk pelaksanaan asas, tambahkan kelas
ke sumber dalam tag: lozad
import lozad from 'lozad';</pre>Salin selepas log masuk
<img src="https://img.php.cn/upload/article/000/000/000/173897821885662.jpg" alt="5 Techniques for Lazy Loading Images to Boost Website Performance " /></pre>Salin selepas log masuk
Lozad adalah pilihan yang baik jika anda tidak mahu mengetahui tentang API Observer Persimpangan, atau anda hanya mencari pelaksanaan cepat untuk pelbagai jenis kandungan.
4.
Jika anda seorang pembaca sederhana, anda mesti perhatikan bagaimana tapak memuat imej utama dalam jawatan. Perkara pertama yang anda lihat ialah salinan imej resolusi rendah yang kabur, dan versi resolusinya adalah pemuatan malas:
Anda boleh mendapatkan kesan yang sama apabila malas memuatkan imej dalam HTML dengan menggunakan CSS dan JavaScript.
gambar pemegang tempat kabur di laman web sederhana 
Resolusi tinggi malas memuat gambar di laman web sederhana
Kaedah kegemaran saya ialah kaedah Craig Buckler. Berikut adalah kelebihan penyelesaian ini:
5 yall.js adalah perpustakaan JavaScript yang kaya dengan ciri-ciri yang menggunakan API Observer Persimpangan untuk Lazy Load JavaScript semasa pengguna menatal. Ia menyokong gambar, video, iframes, dan bijak jatuh ke teknologi pengendali acara tradisional apabila perlu.
Apabila anda memasukkan yall dalam dokumen anda, anda perlu memulakannya seperti berikut:
Seterusnya, untuk memuatkan elemen IMG yang mudah, anda hanya perlu melakukan perkara berikut dalam tag:
<img src="https://img.php.cn/upload/article/000/000/000/173897821515260.jpg" alt="5 Techniques for Lazy Loading Images to Boost Website Performance " /> <iframe loading="lazy" src="content.html"></iframe></pre>Salin selepas log masuk
Sila ambil perhatian perkara berikut:
<img src="https://img.php.cn/upload/article/000/000/000/173897821665537.jpg" alt="5 Techniques for Lazy Loading Images to Boost Website Performance " /></pre>Salin selepas log masuk
anda menambah kelas
ke elemen.lazy adalah imej pemegang tempat. src harta. data-src Berikut adalah kelebihan yall.js: Dapatkan prestasi yang sangat baik menggunakan API Observer Persimpangan.
Kesimpulan
Berikut adalah lima kaedah pemuatan malas yang anda boleh mula bereksperimen dan menguji dalam projek anda. Memahami bagaimana imej beban malas adalah kemahiran yang berharga bagi mana -mana pemaju web. Anda boleh mengetahui lebih lanjut mengenai pengoptimuman imej dengan menyertai Forum SitePoint ini atau berkongsi kepakaran anda dengan orang lain.
soalan yang sering ditanya mengenai pemuatan gambar malas
Apakah pemuatan gambar yang malas?
Lazy Loading adalah teknologi pembangunan web yang digunakan untuk meningkatkan prestasi laman web dengan malas memuatkan unsur -unsur tertentu, seperti imej, sehingga mereka diperlukan. Pemuatan imej malas bermaksud bahawa imej dimuatkan hanya apabila ia memasuki tetingkap pengguna atau dapat dilihat di laman web, dan bukannya memuat semua imej dengan segera apabila halaman pada mulanya diberikan.
Apakah manfaat gambar pemuatan malas?
bagaimana untuk memuatkan imej malas dalam html?
Untuk menambah pemuatan malas ke imej dalam HTML, anda boleh menggunakan harta "memuatkan". Harta "memuatkan" adalah harta HTML standard yang membolehkan anda mengawal apabila imej perlu dimuatkan. Untuk membolehkan imej pemuatan malas HTML, tetapkan nilai harta "memuatkan" kepada "malas" dan tambahkannya ke elemen IMG. Ini akan memberitahu penyemak imbas untuk memuatkan imej hanya apabila ia akan memasuki tetingkap. Berikut adalah contoh:
<img src="https://img.php.cn/upload/article/000/000/000/173897821515260.jpg" alt="5 Techniques for Lazy Loading Images to Boost Website Performance " /> <iframe loading="lazy" src="content.html"></iframe></pre>Salin selepas log masuk
Adakah baik untuk memuat gambar malas?
Ya, menggunakan HTML imej pemuatan malas dalam pembangunan web dianggap sebagai amalan yang bermanfaat untuk sebab -sebab berikut. Ia mempercepatkan rendering halaman awal dan meningkatkan pengalaman pengguna dengan melambatkan pemuatan pemuatan imej yang tidak penting. Pendekatan ini menjimatkan jalur lebar dan memberi manfaat kepada pengguna dengan pelan data terhad atau sambungan internet yang lebih perlahan. Di samping itu, ia memberi kesan positif kepada pengoptimuman enjin carian (SEO) dengan meningkatkan kelajuan pemuatan halaman dan mematuhi prinsip peningkatan tambahan. Dengan mengurangkan latensi yang dirasakan dan memberikan isyarat visual semasa pemuatan, pemuatan malas membantu memberikan pengalaman pelayaran yang lebih lancar dan lebih cekap, terutama pada peranti mudah alih.
Bagaimana untuk mengetahui sama ada imej malas untuk dimuatkan?
3 Dengan mengklik kanan pada imej dan memilih cek atau periksa elemen, anda boleh menyemak elemen IMG yang mewakili imej dalam panel Alat Pemaju. Cari jika atribut "memuatkan" wujud dalam elemen IMG. Jika harta "memuatkan" ditetapkan kepada "malas", ini bermakna imej telah dikonfigurasi untuk menjadi malas. Menggunakan alat pemaju penyemak imbas, anda dapat dengan cepat menentukan status pemuatan malas imej dengan memeriksa sifat -sifat imej.
Bagaimana menggunakan JavaScript untuk mencapai pemuatan imej malas?
Untuk menggunakan JavaScript untuk mencapai pemuatan imej yang malas, anda boleh menggunakan perpustakaan seperti lozad.js atau yall.js, atau anda boleh menulis penyelesaian tersuai anda sendiri menggunakan API Observer Persimpangan. Perpustakaan ini membolehkan anda memuat kandungan atas permintaan dengan memantau apabila elemen memasuki tetingkap dan memuatkannya pada masa itu.
Adakah pemuatan imej malas mempengaruhi SEO?
Ya, pemuatan imej malas boleh memberi kesan positif kepada SEO. Dengan meningkatkan masa pemuatan halaman dan mengurangkan jumlah data yang perlu dimuatkan pada mulanya, pemuatan malas dapat membantu laman web anda mendapatkan kedudukan yang lebih baik dalam hasil enjin carian. Kelajuan halaman yang lebih cepat adalah faktor ranking yang diketahui oleh enjin carian seperti Google, dan pemuatan malas dapat memudahkan ini dengan memastikan bahawa imej laman web anda tidak melambatkan prestasi keseluruhan.
Apakah perbezaan antara pemuatan malas asli dan pemuatan malas berasaskan JavaScript?
Pemuatan malas asli bergantung pada sokongan terbina dalam penyemak imbas untuk atribut "memuatkan" dalam tag <img alt="5 Teknik untuk Memuatkan Imej Malas Untuk Meningkatkan Prestasi Laman Web" > dan <iframe></iframe>. Kaedah ini mudah dan tidak memerlukan JavaScript tambahan. Sebaliknya, pemuatan malas berdasarkan JavaScript (biasanya dilaksanakan menggunakan perpustakaan seperti Lozad.js atau API Observer Persimpangan) memberikan fleksibiliti dan penyesuaian yang lebih besar.
Adakah terdapat kelemahan pemuatan gambar yang malas?
Kelemahan utama ialah imej boleh melambatkan pemuatan apabila pengguna menatal ke halaman. Di samping itu, beberapa pelayar yang lebih tua mungkin tidak menyokong pemuatan malas.
Bolehkah saya malas memuat gambar di WordPress?
Ya, anda boleh dengan mudah malas memuat gambar di WordPress. Banyak tema kini menyokong pemuatan malas asli secara lalai, tetapi anda juga boleh menggunakan plugin seperti "Lazy Load by WP Rocket" atau "SMUSH" untuk mencapai pemuatan malas tanpa sebarang pengekodan.
Atas ialah kandungan terperinci 5 Teknik untuk Memuatkan Imej Malas Untuk Meningkatkan Prestasi Laman Web. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Perbezaan antara drop dan delete
Bagaimana untuk mengalih keluar beberapa elemen pertama tatasusunan dalam php
10 pertukaran mata wang teratas
Kekunci pintasan penukaran tetingkap
pelayan web
Bagaimana untuk menyelesaikan masalah bahawa port phpstudy diduduki
Pengenalan kepada perisian kalkulator dalam talian
Alat penilaian temu bual
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
