图片懒加载怎么写?

来源:互联网 发布:谷歌程序员平均工资 编辑:程序博客网 时间:2024/05/01 00:58

放进去里就可以了

 //图片懒加载    var imgLazy;    (function () {        var imgList = [],  // 页面所有img元素集合                delay,   // setTimeout 对象                offset,  //偏移量,用于指定图片距离可视区域多少距离,进行加载                time,  // 延迟载入时间                _selector; // 选择器 默认为 .m-lazyload        function _isShow(el) {            var coords = el.getBoundingClientRect();            return ( (coords.top >= 0 && coords.left >= 0 && coords.top) <= (window.innerHeight || document.documentElement.clientHeight) + parseInt(offset));        }        function _loadImage() {            for (var j = imgList.length; j--;) {                var el = imgList[j];                if (_isShow(el)) {                    el.src = el.getAttribute('data-src');                    el.removeAttribute('data-src');                    $('img').removeClass('m-lazyload');                    imgList.splice(j, 1);                }            }        }        function _delay() {            clearTimeout(delay);            delay = setTimeout(function () {                _loadImage();            }, time);        }        imgLazy = function ImageLazyload(selector, options) {            var defaults = options || {};            offset = defaults.offset || 0;            time = defaults.time || 250;            _selector = selector || '.m-lazyload';            this.getNode();            _delay();//避免首次加载未触发touch事件,主动触发一次加载函数            if (defaults.iScroll) {                defaults.iScroll.on('scroll', _delay);                defaults.iScroll.on('scrollEnd', _delay);            } else {                window.addEventListener('scroll', _delay, false);            }        }        imgLazy.prototype.getNode = function () {            imgList = [];            var nodes = document.querySelectorAll(_selector);            for (var i = 0, l = nodes.length; i < l; i++) {                imgList.push(nodes[i]);            }        };    })();    var lazyload = new imgLazy('.m-lazyload',{        delay: 100,   // setTimeout 对象        offset: 500,  //图片距离可视区域多少距离        time :100  // 延迟载入时间    });