Maison > Article > interface Web > Comment implémenter le chargement paresseux d'images réactives à l'aide des propriétés CSS
Comment implémenter le chargement paresseux d'images réactives à l'aide des propriétés CSS
Dans le développement Web, nous rencontrons souvent des situations où un grand nombre d'images doivent être chargées, en particulier sur les appareils mobiles. Afin d'améliorer la vitesse de chargement des pages et l'expérience utilisateur, le chargement paresseux des images est devenu une méthode d'optimisation courante.
Le chargement paresseux signifie que lorsque la page se charge, seules les images de la zone visible sont chargées au lieu de charger toutes les images sur la page entière. Cela réduit considérablement le temps requis pour le chargement initial et évite un gaspillage inutile de bande passante.
Dans cet article, nous présenterons la méthode d'utilisation des propriétés CSS pour implémenter le chargement paresseux d'images réactif, qui peut être appliqué à différentes tailles d'écran et appareils.
Tout d'abord, nous devons définir les images qui doivent être chargées paresseusement en HTML. Ici, nous utilisons l'élément <img alt="Comment implémenter le chargement paresseux d'images réactives à l'aide des propriétés CSS" >
et définissons un attribut personnalisé data-src
pour stocker l'URL réelle de l'image. <img alt="Comment implémenter le chargement paresseux d'images réactives à l'aide des propriétés 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
background-size
. rrreee
Dans le code ci-dessus,placeholder.jpg
est une image d'espace réservé qui est utilisée pour s'afficher jusqu'à ce que l'image réelle soit chargée. 🎜🎜Ensuite, nous utilisons l'attribut CSS @media
pour définir différents styles pour différentes tailles d'écran. 🎜rrreee🎜Dans le code ci-dessus, nous utilisons la directive @media
pour diviser la largeur de l'écran en deux plages : supérieure ou égale à 1024px et inférieure à 1024px. Pour les appareils à grand écran, nous chargeons l'image immédiatement, en définissant background-image
sur none
. Pour les appareils à petit écran, nous définissons l'attribut visibility
de .lazy-image
sur hidden
, et définissons le data-src<. l>.lazy-image</.>
de l'attribut /code> définit l'attribut visibility
sur visible
, afin que le chargement paresseux des images puisse être réalisé. 🎜🎜Enfin, nous devons utiliser JavaScript pour charger réellement l'image. 🎜rrreee🎜Dans le code ci-dessus, nous utilisons document.querySelectorAll
pour obtenir tous les éléments avec la classe .lazy-image
et définissons une fonction lazyLoad
Pour déterminer si l'image se trouve dans la zone visible, si c'est le cas, chargez l'image. 🎜🎜Enfin, nous lions la fonction lazyLoad
aux événements de défilement du navigateur, de changement de taille de fenêtre et de changement d'orientation de l'écran afin que la fonction de chargement soit déclenchée lorsque la page défile ou change de taille. 🎜🎜Ce qui précède est la méthode et l'exemple de code correspondant d'utilisation des propriétés CSS pour implémenter le chargement paresseux d'images réactives. Grâce à cette méthode, nous pouvons optimiser la vitesse de chargement des pages Web, améliorer l’expérience utilisateur et éviter un gaspillage inutile de bande passante. 🎜Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!