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>

差很少就这样啦，挺简单的。