☀【jQuery插件】DOM 延迟渲染

test.html

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="utf-8">

    <title></title>

    <style>

        .invisible {

            visibility: hidden;

        }

        #box1 {

            height: 1000px;

            background: #F00;

        }

        #box2 {

            height: 100px;

            background: #0F0;

        }

    </style>

</head>

<body>

    <div id="box1">box1</div>

    <textarea class="jq-datalazyload invisible">

        <script>

            alert('222');

        </script>

        <div id="box2">box2</div>

    </textarea>

    <script src="jquery-1.6.4.min.js"></script>

    <script src="datalazyload.js"></script>

    <script>

        var lazy = new $.Datalazyload()

        lazy.init()

    </script>

</body>

</html>

datalazyload.js

/**

 * Created with JetBrains PhpStorm.

 * User: Administrator

 * Date: 13-6-18

 * Time: 下午2:13

 * To change this template use File | Settings | File Templates.

 */

(function($) {

    var AREA_DATA_CLS = "jq-datalazyload";



    function Datalazyload(config) {

        var defaultConfig = {

        };

        this.setting = $.extend(defaultConfig, config || {});

    }



    $.extend(

        Datalazyload.prototype, {

            init: function() {

                var self = this;

                self._getAreaList();

                for (var i = 0; i < self.areaList.length; i++) {

                    self._loadAreaItem(self.areaList[i]);

                }

                $(window).bind("scroll resize", function() {

                    self._getAreaList();

                    for(var i = 0; i < self.areaList.length; i++){

                        self._loadAreaItem(self.areaList[i]);

                    }

                });

            },

            _getAreaList: function() {

                var self = this;

                var areaList = [];

                areaList = $("textarea").filter("." + AREA_DATA_CLS);

                self.areaList = areaList;

                if (areaList.length == 0) {

                    $(window).unbind("scroll resize");

                }

            },

            _replaceArea: function(area) {

                var self = this;

                var _area = $(area);

                var _html = _area.val();

                _area.removeClass(AREA_DATA_CLS);

                $(_html).insertBefore(_area);

                _area.hide();

            },

            _loadAreaItem: function(area) {

                var self = this;

                var top;

                var viewHeight = $(window).height();

                var scrollTop = $(window).scrollTop();

                if ($(area).offset().top != 0) {

                    top = $(area).offset().top;

                } else {

                    top = $(area).parent().offset().top;

                }

                if (top <= viewHeight + scrollTop) {

                    self._replaceArea(area)

                }

            }

        }

    );

    $.Datalazyload = Datalazyload;

})(jQuery);

 

你可能感兴趣的:(jquery插件)