纯JavaScript的图片懒加载

1、图片加载成功失败的回调。2、图片加载失败的回调。3、纯JavaScript操作，不依赖其他的js文件

/*      该JavaScript文件为懒加载的统一处理工具，包含了图片懒加载的，JavaScript文件异步加载处理
 图片懒加载加入了 图片加载成功、加载失败的处理操作，执行类名、或者id进行懒加载
 
 */
// ------------------------------- 公共方法 -------------------------------

function cloneObj(oldObj) { //复制对象方法
    if (typeof(oldObj) != 'object') return oldObj;
    if (oldObj == null) return oldObj;
    var newObj = new Object();
    for (var i in oldObj)
        newObj[i] = cloneObj(oldObj[i]);
    return newObj;
}

function extendObj(args) { //扩展对象
    if (args.length < 2) return;
    var temp = cloneObj(args[0]); //调用复制对象方法
    for (var n = 1; n < args.length; n++) {
        for (var i in args[n]) {
            temp[i] = args[n][i];
        }
    }
    return temp;
}

// 获取元素顶部距离
function offsetTop(elements) {
    var top = elements.offsetTop;
    var parent = elements.offsetParent;
    while (parent != null) {
        top += parent.offsetTop;
        parent = parent.offsetParent;
    };
    return top;
}

// 数组的扩展属性
Array.prototype.contains = function(e) {
    var index = this.indexOf(e);
    if (index > -1) {
        return true;
    }
    return false;
}
Array.prototype.remove = function(e) {
    var index = this.indexOf(e);
    if (index > -1) {
        this.splice(index, 1);
    }
}
Array.prototype.indexOf = function(val) {
    for (var i = 0; i < this.length; i++) {
        if (this[i] == val) return i;
    }
    return -1;
}

function getObjectForId(classId) {
    var opclass = classId.toString();
    if (opclass.indexOf(' ') > -1) {
        var classArr = opclass.split(' ');
        var tempArr = [];
        for (var i = 0; i < classArr.length; i++) {
            if (classArr[i] != ' ') {
                tempArr.push(document.getElementById(classArr[i]));
            }
        }
        return tempArr;
    } else {
        return document.getElementById(opclass);
    }
}

function getObjectForClass(className) {
    if (className.indexOf(' ') > -1) {
        var classArr = className.split(' ');
        var tempArr = [];
        for (var i = 0; i < classArr.length; i++) {
            if (classArr[i] != ' ') {
                var item = document.getElementsByClassName(classArr[i]);
                for (var j = 0; j < item.length; j++) {
                    tempArr.push(item[j]);
                }
            }
        }
        return tempArr;
    } else {
        
        return document.getElementsByClassName(className);
    }
}
/*
 ------------------------------- 图片的懒加载处理 -------------------------------
 
 使用方式：导入当前的JavaScript文件，然后使用
 YTImageLazyLoad({});
 如果需要更多参数选择，采用字典作为参数传入。如下
 attr:获取实际图片的url
 success:图片加载完成的回调
 failure:图片加载失败的回调
 cusImgid:需要进行懒加载的id   多个采用空格分割
 cusImgclass:需要进行懒加载的class 多个采用空格分割
 默认顺序为先拿id，在拿lass，最后拿img标签
 格式模板：
 YTImageLazyLoad({
 success: function(obj, index) {
 console.log(obj + '加载成功，下标为' + index);
 },
 failure: function(obj, index) {
 console.log(obj + '加载失败，下标为' + index);
 },
 cusImgid: 'first second',
 cusImgclass: 'load explame',
 placeholder: "CommonHTML/LazyLoad/ImgLoading.gif"
 }  );
 */

function YTImageLazyLoad(value) {
    var defaultvalue = {
    attr: "data-original",
    success: function(obj, index) {}, // 加载成功的回调
    failure: function(obj, index) {}, // 加载失败的回调
    cusImgid: null,
    cusImgclass: null,
    placeholder:null,// 默认的占位图
    };
    // 合并下默认参数
    var params = extendObj([defaultvalue, value]);
    // 加载回调
    var successcb = function(obj) {
        if (typeof(params.failure) == 'function') {
            params.success(obj, loadingImgArr.indexOf(obj));
        }
    };
    var failurecb = function(obj) {
        if(params.placeholder != null) {
            obj.src = placeholder;
        }
        if (typeof(params.failure) == 'function') {
            params.failure(obj, loadingImgArr.indexOf(obj));
        }
    };
    // 存在yt-url值的内容都拿出来 默认顺序为先拿id，在拿lass，最后拿img标签
    var urlImages = [];
    var nodes = [];
    if (params.cusImgid != null) {
        nodes = getObjectForId(params.cusImgid);
    }
    if (params.cusImgclass != null) {
        var temparr = getObjectForClass(params.cusImgclass);
        for (var i = 0; i < temparr.length; i++) {
            nodes.push(temparr[i]);
        }
    }
    // 没有指定获取那个标签，默认选择img标签
    if (nodes.length == 0) {
        nodes = document.getElementsByTagName('img');
    }
    if (nodes.length == 0) {
//        alert('没有获取到需要进行懒加载的img标签');
        return;
    }
    for (var i = 0; i < nodes.length; i++) {
        if (typeof(nodes[i]) == 'undefined' && nodes[i].getAttribute(params.attr) == null) {
            return;
        }
        if (nodes[i].tagName.toLowerCase() == 'img') {
            // 只有是img标签才进行处理
            urlImages.push(nodes[i]);
        }
    }
    // 加载图片的img标签
    var loadingImgArr = [];
    var loading = function() {
        for (var i = 0; i < urlImages.length; i++) {
            var img = urlImages[i];
            // 获取父类元素
            var a = offsetTop(img);
            // 需要判断几个条件  1、 是否被隐藏 2、是否在可视区域 3、是否包含在加载的数组中
            if (a > document.body.scrollTop && a < (document.body.scrollTop + window.screen.availHeight) &&
                img.style.display != 'none' && loadingImgArr.contains(img) == false) {
                loadingImgArr.push(img);
                img.src = img.getAttribute(params.attr);
                // if (img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数
                //     successcb(img);
                //     return; // 直接返回，不用再处理onload事件
                // }
                img.onload = function() {
                    successcb(this);
                }
                img.onerror = function() {
                    failurecb(this);
                    // 移除元素，下一次滚动可以进行重新加载
                    loadingImgArr.remove(this);
                }
            }
        }
    }
    // 监听滚动时间，并判断当前的urlImages元素是否在可视区域内
    window.onscroll = function() {
        loading();
    }
    // 默认 没有发生滚动行为，调动一次
    loading();
}



/*
 JavaScript文件的异步加载
 */
// js的加载专用方法，用于加载js文件
function loadJS(src, callback) {
    var script = document.createElement('script');
    var head = document.getElementsByTagName('head')[0];
    script.src = src;
    var loaded;
    if (typeof callback === 'function') {
        script.onload = script.onreadystatechange = function() {
            if (!loaded && (!script.readyState || /loaded|complete/.test(script.readyState))) {
                script.onload = script.onreadystatechange = null;
                loaded = true;
                callback();
            }
        }
    }
    head.appendChild(script);
}