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. WPF:保存窗口当前状态截图方法

    在制作软件使用手册或者操作示范市,比较常用方式有截图和视频制作.如果软件内置当前状态的截图和操作视频的导出功能,则将极大简化这方面的工作.使用wpf编写的UI界面,截图的导出功能逻辑相对简单,通用的实 ...

  2. Java I/O重定向

    1.输入重定向 命令行:java [java类文件] < [输入文件路径名] 代码:InputStream inputStream = new FileInputStream(          ...

  3. 命令精解之DOS批处理

    前言 最近对于批处理技术的探讨比较热,也有不少好的批处理程序发布,但是如果没有一定的相关知识恐怕不容易看懂和理解这些批处理文件,也就更谈不上自己动手编写了,古语云:“授人以鱼,不如授人以渔.”因为网上 ...

  4. 如何理解systemstate

    什么是systemstate一个systemstate是由在实例中调用生成systemstats时由每一个进程的进程状态组成.而每一个进程状态是由每一个进程所持有的当前对象所对应的详细对象状态信息组成 ...

  5. 执行mysql脚本

    方法1: mysql -uroot -p123456 -Ddatabasename < sql文件路径 方法2: source 路径全名 \. 路径全名

  6. mysql 根据某个字段将多条记录的某个字段拼接成一个字段

    未合并情况 SELECT a.id, b.name AS "role" FROM sys_user a INNER JOIN sys_user_role c ON a.id=c.u ...

  7. Fibonacci数列的java实现

    关于Fibonacci应该都比较熟悉,0,1,1,2,3..... 基本公式为f(n) = f(n-1) + f(n-2); f(0) = 0; f(1) =1; 方法1:可以运用迭代的方法实现: p ...

  8. git revert all changes

    点击打开链接https://www.kernel.org/pub/software/scm/git/docs/git-reset.html # Revert changes to modified f ...

  9. android BitmapFacty.Options的用法

    通常我们在开发android应用程序时,在加载图片时常常需要与Bitmap打交道,一般会使用BitmapFactory中提供的相关decode方法获取: 如果一张很大的图片,我们不加处理直接decod ...

  10. php 验证码生成方法 及使用

    基本思路是: 在生成图片的页面中(as: yzm.php)1.设置生成的图片的宽度和高度:2.设置图片要写入的字符:3.截取显示在图片上的字符;4.开启session,把上面截取的字符存放在sessi ...