dom元素分屏加载

　　载入一个内容较多的页面的时候，如果不做任何处理，则会在一开始就把全部内容加载出来，影响了性能和体验，所以现在常用分屏加载的功能，就是dom内容出现在屏幕可视范围内的时候，再加载dom节点，起到优化的作用。

　　我在项目中用的是textarea,原理就是把需要滚动加载的dom内容放进一个textarea里，然后用一个容器包裹住,当这部分内容高度出现在屏幕中的时候，就释放出textarea中的值append到容器中，实现滚动加载。

　　代码不多，js部分就两个函数，直接上代码吧：

　　完整版去github看: demo

//定义空间命名
    var GLOBAL = {};  //window
    $(function () {
        GLOBAL.lazyLoad = {
            //循环每一个指定textarea,如果在可见区域就写入html，如果有回调函数执行回调函数
            eachElem: function ($elem, scollTop, windowH, callback) {
                $elem.each(function (index, el) {
                    var $this = $(el);
                    var elemTop = $this.parent().offset().top;
                    var htmls = $this.text();

                    if ((elemTop > scollTop - 100) && (elemTop - scollTop < windowH)) {  //容器出现在屏幕可视范围的时候
                        if ($this.data("addYet") != 1) {
                            $this.parent().append((htmls));   //容器添加textarea释放出的html
                            $this.data("addYet", "1");

                            if (callback && $.type(callback) == "function") {  //如果该html是绑定了js功能的，则传入绑定函数名，比如轮播等，或者其他第三方插件等等
                                callback(htmls, $this.parent());
                            }
                        }
                    }
                });
            },
            //动态创建dom元素
            creatEle: function (targetElm, callback) {
                var $elem = $.type(targetElm) == "string" ? $(targetElm) : $("textarea.js_addToDom"),
                        $window = $(window),
                        windowH = $window.height(),
                        that = this;
                var _blank = null;
                that.eachElem($elem, $window.scrollTop(), windowH, callback);

                $window.scroll(function () {   //滚动时检测
                    var scrollTop = $(this).scrollTop();

                    if (_blank) {
                        clearTimeout(_blank);
                    }
                    _blank = setTimeout(function () {   //加载dom
                        that.eachElem($elem, scrollTop, windowH, callback);
                    }, 300);
                });
            }
        }
        GLOBAL.lazyLoad.creatEle("textarea.img_load");   //绑定需要加载的内容
    });

html部分：

<img src="img/a1.jpg" alt=""/><br/>
<img src="img/a1.jpg" alt=""/><br/>
<img src="img/a1.jpg" alt=""/><br/>

<div class="wrap">
    <textarea class="img_load none">
        <img src="img/a1.jpg" alt=""/><br/>
    </textarea>
</div>

当容器wrap出现在可视范围内后，则会释放textarea中的内容，添加进wrap，起到加载作用.

GLOBAL.lazyLoad.creatEle("textarea.img_load");绑定，如果有js功能，则需要传入第二个参数绑定函数，比如轮播插件flexslider:

function initBuyerShowImg(htmls, $warp) {
            $warp.flexslider({
                namespace: "",
                animation: "slide",
                selector: ".slider > li",
                pauseOnAction: false,
                itemWidth: 150,
                controlNav: false,
                animationLoop: false
            });
        }

        GLOBAL.lazyLoad.creatEle("textarea.js_buyShowslide", initBuyerShowImg);

html:

<!--轮播-->
<div class="buyer-show-slide">
    <a href="javascript:;" rel="nofollow" target="_blank" class="buyer-show-cover"></a>
    <textarea class="js_buyShowslide none">
        <ul class="slider">
            <li><a href="javascript:;"><img src="img/flower.jpg" height="210" rel="nofollow"/></a></li>
            <li><a href="javascript:;"><img src="img/flower.jpg" height="210" rel="nofollow"/></a></li>
            <li><a href="javascript:;"><img src="img/flower.jpg" height="210" rel="nofollow"/></a></li>
            <li><a href="javascript:;"><img src="img/flower.jpg" height="210" rel="nofollow"/></a></li>
            <li><a href="javascript:;"><img src="img/flower.jpg" height="210" rel="nofollow"/></a></li>
            <li><a href="javascript:;"><img src="img/flower.jpg" height="210" rel="nofollow"/></a></li>
            <li><a href="javascript:;"><img src="img/flower.jpg" height="210" rel="nofollow"/></a></li>
            <li><a href="javascript:;"><img src="img/flower.jpg" height="210" rel="nofollow"/></a></li>
            <li><a href="javascript:;"><img src="img/flower.jpg" height="210" rel="nofollow"/></a></li>
            <li><a href="javascript:;"><img src="img/flower.jpg" height="210" rel="nofollow"/></a></li>
            <li><a href="javascript:;"><img src="img/flower.jpg" height="210" rel="nofollow"/></a></li>
            <li><a href="javascript:;"><img src="img/flower.jpg" height="210" rel="nofollow"/></a></li>
            <li><a href="javascript:;"><img src="img/flower.jpg" height="210" rel="nofollow"/></a></li>
        </ul>
    </textarea>
</div>

差不多就这样啦，挺简单的。