js图片懒加载

html中内容，img的src放入懒加载的动态图，data-src中放入真实的图片。

 <img src="懒加载的图片" data-src="真实图片" alt="">

js代码,记得引入jQuery.js ，我没有封装js，你可以根据自己需求封装一个js文件

        var clock; //这里的clock为timeID，
        //滚动区域，
        $('.container').on('scroll', function () {
            if (clock) {
                clearTimeout(clock);
            }
            //模拟一个时间，自己根据需求调整时间
            clock = setTimeout(function () {
                //console.log('运行了一次');
                lazyRender();
            }, 500)
        })
        // 先进行一次检查
        lazyRender();
        $(window).on('scroll', function () {
            lazyRender();
        })

        function lazyRender() {
        	//找到需要替换区域的所有img,根据自己的需求
            $('.container img').each(function () {
                if (checkShow($(this)) && !isLoaded($(this))) {
                    loadImg($(this));
                }
            })
        }

        function checkShow($img) { // 传入一个img的jq对象
            var scrollTop = $(window).scrollTop();  //即页面向上滚动的距离
            var windowHeight = $(window).height(); // 浏览器自身的高度
            var offsetTop = $img.offset().top;  //目标标签img相对于document顶部的位置

            if (offsetTop < (scrollTop + windowHeight) && offsetTop > scrollTop) { //在2个临界状态之间的就为出现在视野中的
                return true;
            }
            return false;
        }

        function isLoaded($img) {
            return $img.attr('data-src') === $img.attr('src'); //如果data-src和src相等那么就是已经加载过了
        }

        function loadImg($img) {
            $img.attr('src', $img.attr('data-src')); // 加载就是把自定义属性中存放的真实的src地址赋给src属性
        }

对你有帮助的话请收藏一下哦，如有疑问，请大家在评论区指正。