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>

差很少就這樣啦，挺簡單的。