JS:UX-imglazyload-scroll.js

JS:UX-imglazyload-scroll.js

/**
  $("img").lazyload({ 
          placeholder : "http://images.photo.bikestats.eu/zdjecie,600,89297,bike-stats-logo.jpg",
          effect : "fadeIn"
       });
 */


/**
<li class="pic-item">
    <img data-src="http://dummyimage.com/200x274/000/fff" src="http://www.doitbegin.com/fe/static/widget/image-lazyload/img/default.png?v=65665950" alt="随机图片">
</li>

$(function(){ImageLazyload.init({offset:30,container:$(".mod-test"),callback:function($img){$img.addClass("x-loaded")}})});
如果需要滚动加载更多图片时候，以上也要在业务逻辑中的需要写在业务逻辑的scroll回调中
给图片的src设置default.png, 1x1
现在dom树中生成如上带有data-src的图片..  可以先设定宽高.
(1 从拉去数据，前端生成html 或
2 从后端拉取html snippets)

**/

/**
    给页面增加滚动条监听
    扫描页面上所有的img标签并渲染
    判断当前img是否在屏显允许的误差范围之内
    判断当前img是否已经加载完成
 */
var imageLoad = (function () {

    var _intervalId = 0;
    var _timeoutId = 0;
    var _dataSrcImgStack = [];
    var _intervaling = false;
    var _callback = null;

    /**
     * 判断当前img是否在屏显允许的误差范围之内
     * @param {Object} elm image对象
     */
    var _isVisible = function (elm, noOffset) {
        var hOffset = noOffset ? 0 : 200;
        var vOffset = noOffset ? 0 : 200;
        var elmPos = {};
        try {
            elmPos = $(elm).offset();
        } catch (e) {
            elmPos = {
                left: 0,
                top: 0
            };
        }
        var $win = $(window);
        var scrollTop = $win.scrollTop();;
        var scrollLeft = $win.scrollLeft();;
        var viewWidth = $win.width();
        var viewHeight = $win.height();

        //矩形四个角，从左上A点顺时针记录为：A(xa,ya)、B(xb,yb)、C(xc,yc)、D(xd,yd)
        //对应的窗口四个角为A1(xa1,ya1),、B1(xb1,yb1)、C1(xc1,yc1)、D1(xd1,yd1)
        //判断当前节点是否落在可视区域，只需要满足这两点：
        //1、xa <= xc1 && ya <= yc1
        //2、xc >= xa1 && yc >= ya1
        var xa = elmPos.left - hOffset,
            ya = elmPos.top - vOffset,
            xc = elmPos.left + elm.offsetWidth + hOffset,
            yc = elmPos.top + elm.offsetHeight + vOffset,
            xa1 = scrollLeft,
            ya1 = scrollTop,
            xc1 = scrollLeft + viewWidth,
            yc1 = scrollTop + viewHeight;

        return xa <= xc1 && ya <= yc1 && xc >= xa1 && yc >= ya1;
    };

    /**
     * 判断当前img是否已经加载完成
     * @param {Object} elm
     */
    var _isImageLoadCompleted = function (elm) {
        if ($(elm).attr('data-loaded') == '1') {
            return true;
        }
        return false;
    };

    /**
     * 将当前img的data-src赋值给src，以此实现图片延迟加载
     */
    var _renderImage = function () {
        if (!_intervaling) {
            _intervaling = true;
            _intervalId = window.setInterval(function () {
                if (_dataSrcImgStack.length === 0) {
                    window.clearInterval(_intervalId);
                    _intervaling = false;
                    return;
                }
                //遍历，请不要将这里的for改为S.forEach
                for (var i = 0; i < _dataSrcImgStack.length; i++) {
                    var elm = _dataSrcImgStack[i];


                    //img标签可见并且加载未完成
                    if (!_isImageLoadCompleted(elm) && _isVisible(elm)) {
                        if ($(elm).attr('data-loadfunc') != '1') {
                            $(elm).attr('data-loadfunc', 1);
                            $(elm).bind('load', function (evt) {
                                var $self = this;
                                var $elem = $(this);
                                $elem.attr('data-loaded', 1);
                                for (var idx = 0; idx < _dataSrcImgStack.length; idx++) {
                                    var item = _dataSrcImgStack[idx];
                                    if ($self === item) {
                                        _dataSrcImgStack.splice(idx, 1);
                                    }
                                }

                                // 执行回调
                                _callback && typeof _callback === 'function' && _callback($self);
                            });
                        }
                        var src = $(elm).attr('data-src') + '';
                        if (src.indexOf('http') > -1) {
                            $(elm).attr('src', src);
                            $(elm).removeAttr('data-src');
                        }
                    }
                }
            }, 800);
        }
    };


    /**
     * 扫描页面上所有的img标签并渲染
     * @param {Object} newDom
     */
    var _scanAndDoRender = function (newDom) {
        var isScanAll = false;
        if (!newDom) {
            newDom = document.body;
            isScanAll = true;
        }
        //扫描

        var imgList = [];
        $.each(newDom.getElementsByTagName('img'), function (i, elm) {
            if ($(elm).attr('data-src') && !_isImageLoadCompleted(elm)) {
                imgList.push(elm);
            }
        });

        //新节点入栈
        if (isScanAll) {
            _dataSrcImgStack = imgList;
        } else {
            _dataSrcImgStack = _dataSrcImgStack.concat(imgList);
        }

        //遍历
        _renderImage(_dataSrcImgStack);
    };

    /**
     * 给页面增加滚动条监听
     */
    var _bindScrollEvent = function () {

        $.each(['resize', 'scroll', 'load'], function (index, evtName) {
            $(window).bind(evtName, function (e) {
                if (_timeoutId) {
                    window.clearTimeout(_timeoutId);
                }
                _timeoutId = window.setTimeout(function () {
                    _timeoutId = 0;
                    _scanAndDoRender();
                }, 20);
                e.preventDefault();
                e.stopPropagation();
            });
        });

    };


    /**
     * 初始化
     */
    var _init = function (callback) {
        //设置回调方法
        _callback = callback;
        //扫描并初始化页面
        _scanAndDoRender();
        //给页面增加滚动条监听
        _bindScrollEvent();

    };

    return {
        init: _init,
        isVisible: _isVisible,
        scanAndDoRender: _scanAndDoRender
    };
})();

exports = imageLoad;