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 相关文章推荐
给Javascript数组插入一条记录的代码
Aug 30 Javascript
需要做特殊处理的DOM元素属性的访问
Nov 05 Javascript
在表单提交前进行验证的几种方式整理
Jul 31 Javascript
Jquery动态添加及删除页面节点元素示例代码
Jun 16 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
May 01 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
Aug 14 Javascript
js控制按钮,防止频繁点击响应的实例
Feb 15 Javascript
详解angularjs实现echart图表效果最简洁教程
Nov 29 Javascript
详解如何实现一个简单的Node.js脚手架
Dec 04 Javascript
JavaScript如何把两个数组对象合并过程解析
Oct 10 Javascript
jquery实现简单拖拽效果
Jul 20 jQuery
微信小程序基于高德地图API实现天气组件(动态效果)
Oct 22 Javascript
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 删除记录同时删除图片文件的实现代码
2010/05/12 PHP
在VS2008中编译MYSQL5.1.48的方法
2010/07/03 PHP
thinkPHP5框架闭包函数与子查询传参用法示例
2018/08/02 PHP
解决laravel 出现ajax请求419(unknown status)的问题
2019/09/03 PHP
JavaScript 参考教程
2006/12/29 Javascript
用一段js程序来实现动画功能
2007/03/06 Javascript
jQuery 打造动态渐变按钮 详细图文教程
2010/04/25 Javascript
JavaScript常用全局属性与方法记录积累
2013/07/03 Javascript
jquery获取一个元素下面相同子元素的个数代码
2014/07/31 Javascript
jQuery oLoader实现的加载图片和页面效果
2015/03/14 Javascript
jQuery 移动端artEditor富文本编辑器
2016/01/11 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
2016/04/14 Javascript
JavaScript事件学习小结(一)事件流
2016/06/09 Javascript
onmouseover事件和onmouseout事件全面理解
2016/08/15 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
2016/08/31 Javascript
Vue父组件调用子组件事件方法
2018/02/23 Javascript
vue.js 使用axios实现下载功能的示例
2018/03/05 Javascript
vue-baidu-map 进入页面自动定位的解决方案(推荐)
2018/04/28 Javascript
Vue Cli3 创建项目的方法步骤
2018/10/15 Javascript
JavaScript和TypeScript中的void的具体使用
2019/09/12 Javascript
JavaScript canvas仿代码流瀑布
2020/02/10 Javascript
解决父组件将子组件作为弹窗调用只执行一次created的问题
2020/07/24 Javascript
[01:32]dota2拉比克至宝(222)
2018/12/20 DOTA
在Pycharm中使用GitHub的方法步骤
2019/06/13 Python
PyTorch 对应点相乘、矩阵相乘实例
2019/12/27 Python
python 基于卡方值分箱算法的实现示例
2020/07/17 Python
Python+Xlwings 删除Excel的行和列
2020/12/19 Python
设计师家具购买和委托在线市场:Viyet
2016/11/16 全球购物
美国独家设计师眼镜在线光学商店:Glasses Gallery
2017/12/28 全球购物
日本热销NO.1胶原蛋白冻:Aishitoto爱希特多
2019/06/20 全球购物
行政监察建议书
2014/05/19 职场文书
2014年教师批评与自我批评思想汇报
2014/09/20 职场文书
2014年自愿离婚协议书
2014/10/10 职场文书
2016保送生自荐信范文
2016/01/29 职场文书
《秋天的图画》教学反思
2016/02/19 职场文书
总结Python连接CS2000的详细步骤
2021/06/23 Python