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插件】DOM 延迟渲染的更多相关文章

  1. 海量jQuery插件

    转自:http://blog.csdn.net/zzq58157383/article/details/6900142 提醒大家在使用的时候注意jQuery包的版本问题,最好是使用相同的版本,因为使用 ...

  2. 超经典~超全的jQuery插件大全

    海量的jQuery插件帖,很经典,不知道什么时候开始流传,很早以前就收藏过,为了工作方便还是发了一份放在日志里面. 其中有些已经无法访问,或许是文件移除,或许是被封锁.大家分享的东西,没什么特别的可说 ...

  3. DOM笔记（七）：开发JQuery插件

    在上一篇笔记本中,讲解了如何利用jQuery扩展全局函数和对象:DOM笔记(六):怎么进行JQuery扩展? 在这篇笔记本中,将开发一个简单的动画插件,名称是example-plugin,用其实现一个 ...

  4. jQuery插件jqplot的详细配置说明和渲染器

    jQuery插件jqplot的详细配置说明和渲染器 (2012-08-23 08:57:42) 转载▼ 标签: jqplot 详细配置 渲染器 it 分类: 技术类 jQuery.jqplot插件的官 ...

  5. 50个jQuery插件可将你的网站带到另一个高度

    Web领域一直在发生变化并且其边界在过去的每一天都在发生变化(甚至不能以小时为计),随着其边界的扩展取得了许多新发展.在这些进步之中,开发者的不断工作创造了更大和更好的脚本,这些脚本以插件方式带来更好 ...

  6. 40 个让你的网站更加友好的 jQuery 插件

    一个插件的基本功能是执行一个含有元素集合的函数数组.每个方法和jQuery核心组成一个插件,如.fadeOut()或.addClass().一个jQuery插件是一个基本的可以扩充jQuery 原型对 ...

  7. 40个让你的网站屌到爆的jQuery插件

    一 个插件的基本功能是执行一个含有元素集合的函数数组.每个方法和jQuery核心组成一个插件,如.fadeOut()或.addClass().一个 jQuery插件是一个基本的可以扩充jQuery 原 ...

  8. 20 个用于处理页面滚动效果的 jQuery 插件

    对设计和开发一个网站来说,web开发者不能低估了网站滚动效果的重要性.如今,设计者们都视为一大挑战了,在网站中设计出吸引眼球的高效视觉滚动效果.幸运的是有各种各样的jquery 滚动插件可供他们使用, ...

  9. 设计一种前端数据延迟加载的jQuery插件(2)

    背景 最近看到很多网站都运用到了一种前端数据延迟加载技术,包括淘宝,新浪网等等,这样做的目的可以使得一些未显示的图片随 着滚动条的滚动进行延迟显示. 好处显而易见,可以减少前端对于图片的Http请求, ...

随机推荐

  1. HTTP协议认识

    一.HTTP协议概念 HTTP协议(HyperText Transfer Protocol,超文本传输协议)是用于从WWW服务器传输超文本到本地浏览器的传送协议 HTTP是一个应用层协议,由请求和响应 ...

  2. 你喜欢使用eclipse+tomcat编程吗?!

    在eclipse中配置tomcat简直是一场灾难! 开源软件确实给开发者极大的自由,但,同时也带来额外的麻烦. eclipse+tomcat只是其中之一.我有幸碰到了N次,在N+1次时,不得不提笔撰文 ...

  3. CCPC网赛，HDU_5832 A water problem

    Problem Description           Two planets named Haha and Xixi in the universe and they were created ...

  4. 九度OJ 1042 Coincidence -- 动态规划（最长公共子序列）

    题目地址:http://ac.jobdu.com/problem.php?pid=1042 题目描述: Find a longest common subsequence of two strings ...

  5. 【ADO.NET】1、简单配置与使用

    1.一些基础的知识点 ExecuteReader(); //返回查询到的数据,一次一行,用于 selectExecuteNonQuery(); //返回影响的行数,用于 delete,insert,u ...

  6. .net ajax式上传文件

    今天在这里介绍一下ajax上传文件.其实也不算是真的使用xmlhttprequest上传,只是使用了iframe实现了无刷新上传而已,最多也只算 是仿ajax上传文件.然而网上关于使用xmlhttpr ...

  7. PHP trim去空格函数

    trim() 能除去的字符有“ ”空格."\t"水平制表符."\n"换行符."\r"回车符."\0字符串结束符".&qu ...

  8. js+jquery检测用户浏览器型号（包括对360浏览器的检测）

    做网站,js检测用户浏览器的版本,是经常要使用到,今天自己写了一个js,完成了对于一些常见浏览器的检测,但是,偏偏对于360浏览器的检测没有任 何办法,研究了一会儿,无果.无论是360安全浏览器,还是 ...

  9. [python]filter

  10. UISearchBar -- 备忘

    搜索功能的备忘 UISearchBar UISearchBar是一个搜索栏,继承自UIView,也是常用的控件之一,所以特别写一篇备忘方便以后做工具文章. 例子: let searchBar = UI ...