☀【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);

相关阅读:
如何实现浏览器内多个标签页之间的通信？
vue组件库的基本开发步骤（源代码）
vue组件库的基本开发步骤
 Websocket原理
 TCP和UDP的区别
 一句话概括 tcp三次握手
 简单说一下你对http和https的理解
 .Ajax(async异步与sync同步)
get和post请求方式的区别
 面试易忽略状态码
原文地址：https://www.cnblogs.com/jzm17173/p/3407411.html