目前用的最多的图片懒加载插件应该是这个吧：jquery.lazyload，地址：http://plugins.jquery.com/lazyload/。不过我发现当ajax动态加载的时候需要重复实例化，当加载内容越来越多时内存消耗过大。

所以我自己写了个lazyload，解决ajax动态加载的情况的问题。

/*
* 作者：黄飞
* 时间：2017.10.14
* 说明：实现了基本的懒加载功能，向上向下滑动懒加载，单例模式避免重复实例化，封装了内部函数。
* 使用方法：
*     页面:<img class="lazyload" src="loading.gif" data-original="img.jpg">
*     实例化：new Lzyload();重新绑定：new Lzyload();
* ps：写得比较简单，只能适应于对应的环境
*/
(function ($, window) {
    "use strict";
    var Lazyload = function (options) {
        //默认参数
        var defaults = {
            container: window,          //触发事件载体
            event: "scroll",            //触发方式
            data_attribute: "original", //懒加载图片原图片地址
            element: "lazyload",        //懒加载元素类名
            effect: "fadeIn",           //显示效果
            threshold: 20,              //提前加载距离
        };
        this.settings = $.extend({}, defaults, options);
        this.$element = $("." + this.settings.element);
        this.$window = $(window);
        this.winHeight = window.innerHeight;
        this.init();
        this.bindEvent();
    };
    Lazyload.prototype = {
        constructor: Lazyload,
        //初始化（让已经在视野中的图片显示）
        init: function () {
            var me = this;
            me.$element.each(function () {
                var $self = $(this);
                me.inView($self);
            });
        },
        //绑定事件
        bindEvent: function () {
            var me = this;
            //触发懒加载事件
            $(me.settings.container).bind(me.settings.event, function () {
                me.$element.each(function () {
                    var $self = $(this);
                    me.inView($self);
                });
            });
            //窗口变化
            $(window).resize(function () {
                me.winHeight = window.innerHeight;
            });
        },
        //在视野中
        inView: function ($ele) {
            var me = this;
            var $self = $ele;
            if (!$self.hasClass(me.settings.element)) return;
            if ($self.offset().top - me.$window.scrollTop() < me.winHeight + me.settings.threshold && me.$window.scrollTop() - me.settings.threshold < $self.offset().top + $self.height()) {
                me.load($self);
            }
        },
        //加载图片
        load: function ($ele) {
            var me = this;
            var $self = $ele;
            $self.hide();
            $self.attr("src", $self.attr("data-" + me.settings.data_attribute));
            $self[me.settings.effect]();
            $self.removeClass(me.settings.element);
        },
        //更新（解决了ajax加载新图片问题），可以在这里重新设置参数
        updateEle: function (element) {
            this.settings.element = element || this.settings.element;
            this.$element = $("." + this.settings.element);
            this.init();
        }
    }
    //单例模式
    var lazyload = (function (options) {
        var lazy;
        return function () {
            if (!lazy) {
                lazy = new Lazyload(options);
            }
            else {
                lazy.updateEle();
            }
        }
    })();
    window.lazyload = lazyload;
})(jQuery, window);