img标签中src和 data-src

<img  src="<?=base_url()?>images/loading.gif" data-src="<?=$Membership['Img']?>" class="fl" /></a>

<script>
    //当初始化的HTML文档被完全加载和解析完成之后，该事件被触发，而无需等待样式表、图像和子框架的完全加载；
    document.addEventListener('DOMContentLoaded',function() {
        //获取所有需要延迟加载的图片
        let lazyImages = [].slice.call(document.querySelectorAll("img.fl,img.lazyimg,img.min_img"));
        //限制函数被频繁调用
        let active = false;
        const lazyLoad = function() {
            if(active === false){
                active = true;
                setTimeout(function(){
                    lazyImages.forEach(function(lazyImage) {
                        //判断图片是否出现在视窗中
                        //getBoundingClientRect:用于获取某个元素相对于视窗的位置集合
                        if((lazyImage.getBoundingClientRect().top <= window.innerHeight
                            && lazyImage.getBoundingClientRect().bottom >= 0)
                            /***
                             * element.style 既支持读（样式）也支持写，
                             * getComputedStyle 仅支持读并不支持写入。
                             */
                            &&  getComputedStyle(lazyImage).display !== "none"){
                            //将真实的图片url赋值给src属性，发起请求加载资源
                            lazyImage.src = lazyImage.dataset.src;//用元素节点对象的dataset属性，它指向一个对象，可以用来操作HTML元素标签的data-*属性。
                            //图片加载完成后，需取消监控以防止重复加载
                            lazyImage.classList.remove("lazy");//classList:返回一个元素的类属性
                            lazyImages = lazyImages.filter(image => {
                                return image !==lazyImage;
                            });
                            //所有延迟加载图片加载完成后，移除事件触发处理函数
                            if(lazyImages.length === 0){
                                document.addEventListener("scroll",lazyLoad);
                                window.addEventListener("resize",lazyLoad);
                                window.addEventListener("orientationchange",lazyLoad);
                            }
                        }
                    });
                    active = false;
                },200)
            }
        }
        lazyLoad();//初始化加载
        //滚动页面时触发
        document.addEventListener("scroll",lazyLoad);
        //发生窗口大小改变时触发
        window.addEventListener("resize",lazyLoad);
        //在设备的纵横方向改变时触发。
        window.addEventListener("orientationchange",lazyLoad);
    });
</script>