图片懒加载

最新推荐文章于 2024-08-27 22:36:25 发布

web_cgh

最新推荐文章于 2024-08-27 22:36:25 发布

阅读量219

点赞数

分类专栏：公共方法文章标签：图片懒加载

本文链接：https://blog.youkuaiyun.com/web_cgh/article/details/99938265

版权

公共方法专栏收录该内容

2 篇文章

订阅专栏

1、懒加载图片

   <img alt="品牌logo" data-src={item.icon}  src="../static/placeholder.jpg" className="azyLoad"/>

lazyLoadImgFun() { 
        // console.log('lazyLoadImgFun');
        let detailImage = document.querySelectorAll(".lazyLoad");
        for (let i = 0; i < detailImage.length; i++) {
            if (detailImage[i].getAttribute("data-isLoading") === null) {
                let rect = detailImage[i].getBoundingClientRect();
                if (rect.top <= window.innerHeight) {
                    detailImage[i].setAttribute("src", detailImage[i].getAttribute("data-src"));
                    detailImage[i].setAttribute("data-isLoading", 1);
                }
            }
        }
    },

2、懒加载背景图片

 <div className="lazyLoadBg" data-src={_350.img || url} style={{backgroundImage: defaultImg}}> </div>
    lazyLoadBgImgFun() {
        // console.log('lazyLoadBgImgFun');
        let detailImage = document.querySelectorAll(".lazyLoadBg");
        for (let i = 0; i < detailImage.length; i++) {
            if (detailImage[i].getAttribute("data-isLoading") === null) {
                let rect = detailImage[i].getBoundingClientRect();
                if (rect.top <= window.innerHeight) {
                    detailImage[i].style.backgroundImage = `url('${detailImage[i].getAttribute("data-src")}')`;
                    detailImage[i].setAttribute("data-isLoading", 1);
                }
            }
        }
    },    
3、清除懒加载背景图片属性
clearLazyImgAttFun() { 
        // console.log('lazyLoadBgImgFun');
        let detailImage = document.querySelectorAll(".lazyLoadBg");
        for (let i = 0; i < detailImage.length; i++) {
            if (detailImage[i].getAttribute("data-isLoading") === '1') {
                detailImage[i].setAttribute("data-isLoading", '');
            }
        }
    },