Textarea与懒惰渲染实现代码


Posted in Javascript onJanuary 04, 2012

代码如下。

<div> 
立即渲染内容 
<ul> 
<li>张三<img src="p01.jpg"/></li> 
<li>张四<img src="p02.jpg"/></li> 
</ul> 
</div> 
<div> 
<textarea id="lazyRender01" style="display:none"> 
懒惰渲染内容 
<ul> 
<li>李三<img src="p11.jpg"/></li> 
<li>李四<img src="p12.jpg"/></li> 
</ul> 
</textarea> 
</div> 
<script> 
setTimeout(function(){//懒惰渲染 
var el =document.getElementById('lazyRender01'); 
el.parentNode.innerHTML = el.value; 
},1000); 
</script>

代码的好处是:让李三李四对应的内容,在懒惰渲染之前,不形成dom节点,不请求图片。
但有的同学会问:“Textarea里的内容,对搜索引擎不友好。”
没问题,这个也很好解决的:
<div> 
立即渲染内容 
<ul> 
<li>张三<img src="p01.jpg"/></li> 
<li>张四<img src="p02.jpg"/></li> 
</ul> 
</div> 
<div> 
<script>document.write('<textarea id="lazyRender01" style="display:none">');</script> 
懒惰渲染内容 
<ul> 
<li>李三<img src="p11.jpg"/></li> 
<li>李四<img src="p12.jpg"/></li> 
</ul> 
</textarea> 
</div> 
<script> 
setTimeout(function(){//懒惰渲染 
var el =document.getElementById('lazyRender01'); 
el.parentNode.innerHTML = el.value; 
},1000); 
</script>

代码的区别很简单,只是把'<textarea id="lazyRender01">'这一段通过js的document.write输出来。
但结果却有了很大的不同:就算浏览器不支持js,一切内容也还是能原样显示出来。
Javascript 相关文章推荐
JS 创建对象(常见的几种方法)
Nov 03 Javascript
jQuery 白痴级入门教程
Nov 11 Javascript
仿中关村在线首页弹出式广告插件(jQuery版)
May 03 Javascript
Javascript全局变量var与不var的区别深入解析
Dec 09 Javascript
node.js中的fs.fsyncSync方法使用说明
Dec 15 Javascript
原生JS简单实现ajax的方法示例
Nov 29 Javascript
深入剖析Express cookie-parser中间件实现示例
Feb 01 Javascript
vuejs 动态添加input框的实例讲解
Aug 24 Javascript
Vue中Axios从远程/后台读取数据
Jan 21 Javascript
Vue分页插件的前后端配置与使用
Oct 09 Javascript
完美解决通过IP地址访问VUE项目的问题
Jul 18 Javascript
vue element和nuxt的使用技巧分享
Jan 14 Vue.js
js中有关IE版本检测
Jan 04 #Javascript
国外大牛IE版本检测!现在IE都到9了,IE检测代码
Jan 04 #Javascript
IE的有条件注释判定IE版本详解(附实例代码)
Jan 04 #Javascript
js变量以及其作用域详解
Jul 18 #Javascript
分享一个asp.net pager分页控件
Jan 04 #Javascript
调试Node.JS的辅助工具(NodeWatcher)
Jan 04 #Javascript
DOM和XMLHttpRequest对象的属性和方法整理
Jan 04 #Javascript
You might like
PHP文件读写操作之文件读取方法详解
2011/01/13 PHP
php入门学习知识点八 PHP中for循环基本应用之九九乘法口绝表
2011/07/14 PHP
php中数字、字符与对象判断函数用法实例
2014/11/26 PHP
通过chrome浏览器控制台(Console)进行PHP Debug的方法
2016/10/19 PHP
Zend Framework实现自定义过滤器的方法
2016/12/09 PHP
基于yaf框架和uploadify插件,做的一个导入excel文件,查看并保存数据的功能
2017/01/24 PHP
PHP时间类完整代码实例
2021/02/26 PHP
JQ获取动态加载的图片大小的正确方法分享
2013/11/08 Javascript
JQuery弹出层示例可自定义
2014/05/19 Javascript
基于jquery实现放大镜效果
2015/08/17 Javascript
AngularJS使用ngOption实现下拉列表的实例代码
2016/01/23 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
2016/12/24 Javascript
JS获得多个同name 的input输入框的值的实现方法
2017/01/09 Javascript
基于canvas粒子系统的构建详解
2017/08/31 Javascript
nodejs中Express与Koa2对比分析
2018/02/06 NodeJs
JavaScript实现获取select下拉框中第一个值的方法
2018/02/06 Javascript
vue动态绑定class选中当前列表变色的方法示例
2018/12/19 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
2020/02/11 Javascript
JavaScript中break、continue和return的用法区别实例分析
2020/03/02 Javascript
vue-i18n实现中英文切换的方法
2020/07/06 Javascript
[01:14:35]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第一局
2016/02/26 DOTA
[01:06:59]完美世界DOTA2联赛PWL S2 Magma vs FTD 第一场 11.29
2020/12/02 DOTA
python 生成目录树及显示文件大小的代码
2009/07/23 Python
对pandas中apply函数的用法详解
2018/04/10 Python
PyCharm设置SSH远程调试的方法
2018/07/17 Python
利用python读取YUV文件 转RGB 8bit/10bit通用
2019/12/09 Python
Python获取excel内容及相关操作代码实例
2020/08/10 Python
css3 2D图片转动样式可以扩充到Js当中
2014/04/29 HTML / CSS
Halston Heritage官网:简洁的日装,稍显奢华的晚装
2018/11/20 全球购物
德国玩具商店:Planet Happy DE
2021/01/16 全球购物
彪马香港官方网上商店:PUMA香港
2020/12/06 全球购物
党员入党表决心的话
2014/03/11 职场文书
品德评语大全
2014/05/05 职场文书
基层党支部公开承诺书
2014/05/29 职场文书
学术会议领导致辞
2015/07/29 职场文书
Nginx使用Lua模块实现WAF的原理解析
2021/09/04 Servers