简体   繁体   English

如何在点击时按类别延迟加载图像?

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM