图片懒加载

/**
 * Created by xuxinmin on 17/4/7.
 * 功能:图片懒加载
 * 条件:class="img-lazy" data-src=""
 */
let lazyloadimg = {
    imgloading: function() {
        let _lazyImg = document.getElementsByClassName('img-lazy'),
            _defauleImg = '图片处理默认图片',
            _imgoffsettop = 0,
            _this = this;
        for (let i = 0; i < _lazyImg.length; i++) {
            _imgoffsettop = _this.offsettopbody(_lazyImg[i]);
            if (_imgoffsettop < window.scrollY + window.innerHeight) {
                _lazyImg[i].onerror = function() {
                    this.setAttribute('src', _defauleImg);
                };
                if (_lazyImg[i].getAttribute('src') !== _defauleImg && _lazyImg[i].getAttribute('src') !== _lazyImg[i].getAttribute('data-src')) {
                    _lazyImg[i].setAttribute('src', _lazyImg[i].getAttribute('data-src'));
                }
            }
        }
    },
    offsettopbody: function(obj) { //计算offsetTop
        let offsettop = 0;
        do {
            if (obj.offsetParent === null) {
                return;
            } else {
                obj = obj.offsetParent;
                offsettop += obj.offsetTop;
            }
        } while (obj.tagName !== 'BODY');
        return offsettop;
    },
    init: function() {
        let _this = this;
        _this.imgloading(); //图片懒加载
        window.onscroll = function() {
            _this.imgloading(); //图片懒加载
        };
    }
};
export {
    lazyloadimg
};

/*使用*/
//图片懒加载导入
import { 
lazyloadimg } from 
'../template/lazyloadimg';

版权声明:本文为u010772819原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。