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. 那天有个小孩跟我说LINQ（六）转载

    2  LINQ TO SQL完结(代码下载)      我们还是接着上次那个简单的销售的业务数据库为例子,打开上次那个例子linq_Ch5 2.1 当数据库中的表建立了主外键 ①根据主键获取子表信息 ...

  2. 一、VSTO概述

    一.什么是VSTO? VSTO = Visual Studo Tools for Office,是.net平台下的Office开发技术.相对于传统的VBA(Visual Basic Applicati ...

  3. JavaScript使用技巧

    使用!!操作符转换布尔值 有时候我们需要对一个变量查检其是否存在或者检查值是否有一个有效值,如果存在就返回true值.为了做这样的验证,我们可以使用!!操作符来实现是非常的方便与简单.对于变量可以使用 ...

  4. Druid 简单介绍

    官方网址:http://code.alibabatech.com/wiki/display/Druid/Home 1.什么是Druid Druid首先是一个数据库连接池.Druid是目前最好的数据库连 ...

  5. 【制作镜像】virsh

    首先进入到图形界面 常用virsh指令: 1)virsh list 列出当前虚拟机列表,不包括未启动的 2)virsh list --all 列出所有虚拟机,包括所有已经定义的虚拟机 3)virsh ...

  6. 查内网虚拟机映射的公网IP

    1.访问ip138.com 2.curl ifconfig.me

  7. [转]利用maven的surefire插件实现单元测试与集成测试

    原文链接 http://my.oschina.net/dlpinghailinfeng/blog/301136 maven单元测试与集成测试 通过maven的Profile 配置生命周期 通过mave ...

  8. mvc中的OutputCache

    mvc4中有一个标记属性OutputCache,用来对ActionResult结果进行缓存,如何理解呢?概括地说,就是当你的请求参数没有发生变化时,直接从缓存中取结果,不会再走服务端的Action代码 ...

  9. 重构技巧 引入Null对象

    描述:有两个类,学生类和导师类,学生的导师类可能不存在,因此在获取学生导师名字等信息时都要先判断导师名字是否为空.重构后通过一个空导师类来处理导师为空的相应逻辑. Before # introduce ...

  10. 格式化分区，报/dev/sdb1 is apparently in use by the system; will not make a filesystem here!

    [root@RAC2 ~]# mke2fs /dev/sdb1mke2fs 1.39 (29-May-2006)/dev/sdb1 is apparently in use by the system ...