Rumah >hujung hadapan web >tutorial css >Bagaimana untuk melaksanakan pemuatan malas imej responsif menggunakan sifat CSS
Cara melaksanakan pemuatan malas imej responsif menggunakan sifat CSS
Dalam pembangunan web, kita sering menghadapi situasi di mana sejumlah besar imej perlu dimuatkan terutamanya pada peranti mudah alih. Untuk meningkatkan kelajuan pemuatan halaman dan pengalaman pengguna, pemuatan imej yang malas telah menjadi kaedah pengoptimuman yang biasa.
Lazy loading bermaksud apabila halaman dimuatkan, hanya imej dalam kawasan yang boleh dilihat dimuatkan dan bukannya memuatkan semua imej pada keseluruhan halaman. Ini sangat mengurangkan masa yang diperlukan untuk pemuatan awal dan mengelakkan pembaziran lebar jalur yang tidak perlu.
Dalam artikel ini, kami akan memperkenalkan kaedah menggunakan sifat CSS untuk mencapai pemuatan malas imej responsif, yang boleh digunakan pada pelbagai saiz skrin dan peranti.
Pertama, kita perlu menentukan imej yang perlu malas dimuatkan dalam HTML. Di sini kami menggunakan elemen <img alt="Bagaimana untuk melaksanakan pemuatan malas imej responsif menggunakan sifat CSS" >
dan menetapkan atribut tersuai data-src
untuk menyimpan URL sebenar imej. <img alt="Bagaimana untuk melaksanakan pemuatan malas imej responsif menggunakan sifat CSS" >
元素,并设置一个自定义的属性data-src
来存储图像的实际URL。
<img class="lazy-image" data-src="image.jpg" alt="Image" />
接下来,我们需要编写CSS样式来隐藏初始的图像,并通过使用background-size
属性设置图像的背景图片。
.lazy-image { background-image: url(placeholder.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; }
在上面的代码中,placeholder.jpg
是一个占位图像,用于在实际图像加载完成之前显示。
然后,我们使用CSS属性@media
来针对不同的屏幕尺寸定义不同的样式。
/* 对于大屏幕设备,立即加载图像 */ @media screen and (min-width: 1024px) { .lazy-image { background-image: none; } } /* 对于小屏幕设备,延迟加载图像 */ @media screen and (max-width: 1023px) { .lazy-image { visibility: hidden; } .lazy-image[data-src] { visibility: visible; } }
在上述代码中,我们使用@media
指令将屏幕宽度分为两个范围:大于等于1024px和小于1024px。对于大屏幕设备,我们立即加载图像,将background-image
设置为none
。对于小屏幕设备,我们将.lazy-image
的visibility
属性设置为hidden
,同时为带有data-src
属性的.lazy-image
元素设置visibility
属性为visible
,这样就可以实现延迟加载图像。
最后,我们需要使用JavaScript来实现图像的实际加载。
document.addEventListener("DOMContentLoaded", function() { const lazyImages = document.querySelectorAll(".lazy-image"); const lazyLoad = function() { lazyImages.forEach(function(img) { if (img.getBoundingClientRect().top <= window.innerHeight && img.hasAttribute("data-src")) { img.setAttribute("src", img.getAttribute("data-src")); img.removeAttribute("data-src"); } }); }; window.addEventListener("scroll", lazyLoad); window.addEventListener("resize", lazyLoad); window.addEventListener("orientationchange", lazyLoad); });
上述代码中,我们使用document.querySelectorAll
获取所有带有.lazy-image
类的元素,并定义一个lazyLoad
函数来判断图像是否在可见区域内,如果是则加载图像。
最后,我们将lazyLoad
rrreee
saiz latar belakang
. rrreee
Dalam kod di atas,placeholder.jpg
ialah imej pemegang tempat yang digunakan untuk memaparkan sehingga imej sebenar dimuatkan. #🎜🎜##🎜🎜#Kemudian, kami menggunakan atribut CSS @media
untuk menentukan gaya berbeza untuk saiz skrin yang berbeza. #🎜🎜#rrreee#🎜🎜#Dalam kod di atas, kami menggunakan arahan @media
untuk membahagikan lebar skrin kepada dua julat: lebih besar daripada atau sama dengan 1024px dan kurang daripada 1024px. Untuk peranti skrin besar, kami memuatkan imej dengan serta-merta, menetapkan background-image
kepada none
. Untuk peranti skrin kecil, kami menetapkan atribut visibility
.lazy-image
kepada hidden
dan menetapkan data-src.lazy-image
atribut /code> menetapkan atribut visibility
kepada visible
, supaya pemuatan malas imej boleh dicapai. #🎜🎜##🎜🎜#Akhir sekali, kita perlu menggunakan JavaScript untuk memuatkan imej sebenarnya. #🎜🎜#rrreee#🎜🎜#Dalam kod di atas, kami menggunakan document.querySelectorAll
untuk mendapatkan semua elemen dengan kelas .lazy-image
dan mentakrifkan Fungsi lazyLoad
menentukan sama ada imej berada dalam kawasan yang boleh dilihat dan jika ya, memuatkan imej. #🎜🎜##🎜🎜#Akhir sekali, kami mengikat fungsi lazyLoad
pada skrol penyemak imbas, perubahan saiz tetingkap dan peristiwa perubahan orientasi skrin supaya fungsi pemuatan dicetuskan apabila halaman menatal atau menukar saiz. #🎜🎜##🎜🎜#Di atas ialah kaedah dan contoh kod yang sepadan menggunakan sifat CSS untuk melaksanakan pemuatan malas imej responsif. Melalui kaedah ini, kami boleh mengoptimumkan kelajuan memuatkan halaman web, meningkatkan pengalaman pengguna, dan mengelakkan pembaziran lebar jalur yang tidak perlu. #🎜🎜#Atas ialah kandungan terperinci Bagaimana untuk melaksanakan pemuatan malas imej responsif menggunakan sifat CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!