[英]How to lazy load images by class on click?
I have a lot of images on my webpage so I have used lazy loading to help with the performance. 我的网页上有很多图像,因此我使用了延迟加载来提高性能。 I have used one 25kb image as a place holder for all HD images.
我已经使用一个25kb的图像作为所有高清图像的占位符。 Normally while scrolling lazy load images display once they come into view, however the images are within a carousel and only the first images changes.
通常,在滚动懒惰负载图像时,它们一经显示便会显示,但是这些图像在传送带中,并且只有第一个图像会更改。 I was hoping on click of a button which also displays the carousel I could load the new images by class?
我希望单击一个按钮,该按钮还会显示轮播,我可以按类加载新图像?
<img src="./img/tinyBlur.jpg" data-2x-1="./img/design7.png" class="carosuelImg lazyload-2x loading-lazy hidden">
For what I understood, my friend 据我了解,我的朋友
var img = document.querySelector("img");
img.classList.remove("hidden");
img.src = img.getAttribute('data-2x-1');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.