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. 前不久一个swift项目用uicollectionview 用sdwebimage 加载图片，发生内存猛增，直接闪退的情况，简单说一下解决方案。

    1.首先在appdelegate方法 didFinishLaunchingWithOptions SDImageCache.sharedImageCache().maxCacheSize=1024*1 ...

  2. window redis 安装配置

    1 下载 https://github.com/MSOpenTech/redis/releases 当前最新版本为 redis-2.8.21   下载的为zip包,下载连接为:https://gith ...

  3. Java中ArrayList类详解

    1.什么是ArrayList ArrayList就是传说中的动态数组,用MSDN中的说法,就是Array的复杂版本,它提供了如下一些好处: 动态的增加和减少元素 实现了ICollection和ILis ...

  4. 查看编译后的calss文件编译jdk版本

    使用UtralEdit或者sublime text打开编译后的.class文件, 其中cafe babe为magic number(魔数),标识这个文件是java的class文件. 0033转换成10 ...

  5. 安装"MySQLdb"一波三折.

    在慕课网学习课程"Python操作MySQL数据库",安装"MySQLdb"时遇到问题. 先是找错地方: 百度搜索"Mysql for Python& ...

  6. HDU 1176 免费馅饼（数字三角形）

    免费馅饼 Problem Description 都说天上不会掉馅饼,但有一天gameboy正走在回家的小径上,忽然天上掉下大把大把的馅饼.说来gameboy的人品实在是太好了,这馅饼别处都不掉,就掉 ...

  7. HDU 3555 Bomb （数位DP）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3555 题目大意:从0开始到给定的数字N所有的数字中遇到“49”的数字的个数. Sample Input ...

  8. Yii Swiftmailer 发送中文附件

    所用的是Yii2 的basic框架.它本身集成了邮件发送插件swiftmailer,发送邮件是很方便的,但是当发送的邮件带有中文名称的附件时,就出现了问题,邮件所带的附件显示名称错误.比如原名&quo ...

  9. tomcat配置虚拟目录的步骤

    1.在tomcat中.....\conf\Catalina\localhost中创建一个test.xml文件 2.然后在\conf的server.xml中的 <Host > 元素里面 添加 ...

  10. python的一些学习资料(持续更新中)

    Markdown在线编辑器 廖雪峰官方博客[基础入门好资料] python-guide[传说中的巨牛写的] the5fire的技术博客[全职python程序员博客]