load-img.js

/*
 * <li class="ui-listall clearfix">
 *               <a class="nbd" href="">
 *                      <img _src="http://pic0.mofang.com/2014/0527/20140527041200936.jpg/214x120" style="display: block;">
 *                  <p class="gong-hd-more">英雄联盟</p>
 *             </a>
 *          </li>
 * $(function () {
 *           scrollLoad.init();
 *      })
 **/


var scrollLoad = {
    refreshTimer : null,
    init: function () {
        this.getInViewportList();
        this.scrollLoad();
    },
    scrollLoad : function () {
        var self = this;
        $(window).on('scroll', function () {
            if (self.refreshTimer) {
                clearTimeout(self.refreshTimer);
                self.refreshTimer = null;
            }
            self.refreshTimer = setTimeout(function () {
                self.getInViewportList();
            },1e2);
        });
    },
    belowthefold : function (element) {
        var fold = $(window).height() + $(window).scrollTop();
        return fold <= $(element).offset().top;
    },
    abovethetop : function (element) {
        var top = $(window).scrollTop();
        return top >= $(element).offset().top + $(element).height();
    },
    inViewport : function (element) {
        return !this.belowthefold(element) && !this.abovethetop(element)
    },
    getInViewportList : function () {
        var list = $('#thelist li'),
        ret = [],
        self = this;
        //debugger;
        list.each(function (i) {
            var li = list.eq(i);
            if (self.inViewport(li)) {
                self.loadImg(li);
            }
        });
    },
    loadImg : function (li) {
        if (li.find('img[_src]').length) {
            var img = li.find('img[_src]'),
                src = img.attr('_src');
                localImages.addImg(src)
                img.addClass("load-img");
                //img.attr('src', src).hide().fadeIn(700).load(function () {
                //img.removeAttr('_src');
                //});
                img.attr('src', src).load(function () {
                    $(this).removeAttr('_src');
            });
        }
    }
};


function getBase64Image(img) {
    // Create an empty canvas element
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

    // Copy the image contents to the canvas
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);

    // Get the data-URL formatted image
    // Firefox supports PNG and JPEG. You could check img.src to
    // guess the original format, but be aware the using "image/jpg"
    // will re-encode the image.
    var dataURL = canvas.toDataURL("image/png");

    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}




function LocalImages () {
    this.localImgArrs = [];
}
LocalImages.prototype.addImg = function (item) {
    this.localImgArrs.push(item)
}
LocalImages.prototype.getImg = function () {
    console.log(this.localImgArrs.length)
}
LocalImages.prototype.removeImg = function (index) {

    if(index === 0) {
        this.localImages.shift();
    } else if (index === this.localImgArrs.length  -1) {
        this.localImgArrs.pop()
    } else {
        var localNewArrs = this.localImgArrs.splice(index - 1);
        this.localImgArrs = localNewArrs;
    }
}

var localImages = new LocalImages();