Textarea与懒惰渲染实现代码

代码如下。


代码如下:

<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，一切内容也还是能原样显示出来。

赞 (0)

相关推荐

  • 关于textarea提交的内容无法换行的解决办法

    当我们在页面上通过 textarea 提交数据的时候,我们我们输入的内容在提交后都会被处理为了一段内容,即使我们在 textarea 里面输入了很多的换行,提交后也是一段内容,那如果我们需要将我们输入的信息按照输入的形式保存下来该如何做呢? 这里面存在一个主要的问题是在页面显示的时候换行符是 <br /> 标签,而内容在 textarea 中显示时的换行符是 \n ,下面介绍一种方法通过 js 将输入的内容中的换行符转换为网页中的换行符.在网页数据提交钱作如下处理即可. 复制代码 代码如下:

  • JS在textarea光标处插入文本的小例子

    下面是代码: 复制代码 代码如下: --------------------------------------------------------------------------------<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html x

  • 从textarea中获取数据之后按原样显示实现代码

    步骤: 1. 用<pre><c:out value="<%=从数据库显示的字段%>"></c:out></pre> 2. 显示页面中增加: 复制代码 代码如下: <style type="text/css"> pre { white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space:

  • TextArea设置MaxLength属性最大输入值的js代码

    标准的DHTML文档中TEXTAREA的MAXLENGTH属性默认情况下不起作用,只有当事件发生时才起作用 如下:http://spiderscript.net/site/spiderscript/examples/ex_textarea_maxlength.asp 但TEXT中有且起作用<input type="text" maxlength="20">, 那么在TEXTAREA中怎么实现输入内容不能超过多少个字符呢. 方法1.如果只需要截取多少个字符

  • Textarea与懒惰渲染实现代码

    代码如下. 复制代码 代码如下: <div> 立即渲染内容 <ul> <li>张三<img src="p01.jpg"/></li> <li>张四<img src="p02.jpg"/></li> </ul> </div> <div> <textarea id="lazyRender01" style=&quo

  • JQuery为textarea添加maxlength属性的代码

    通过JQuery的keyup事件: 复制代码 代码如下: <html> <head> <title>JQuery为textarea添加maxlength</title> <script type="text/javascript" src="jquery-1.4.js"></script> </head> <body> <textarea style="w

  • c#唯一值渲染实例代码

    该着色方法一句着色图层中要素类的某个数值字段的属性值,按这个属性值为每种不同值得要素单独分配一种显示符号样式.关键在于获取该字段所有要素的唯一值(即将所有在该字段中属性值相同的要素归为一种),利用UniqueValueRenderer的AddValue方法即可进行渲染 需要添加的类库 复制代码 代码如下: using System.Collections;using System.Windows.Forms;using ESRI.ArcGIS.Display;using ESRI.ArcGIS.

  • 非主流的textarea自增长实现js代码

    其中大部分是靠scrollHeight(非W3C标准,由IE引入),keyup事件来完成.有一种比较有意思的是 通过"镜像元素(mirror element)", 和setTimeout轮询实现.大致的实现思路如下: 把一个单独的pre元素,通过position:absolute的方式定位于client view之外,并且把它和textarea的样式设置的一样,我们把这个pre元素称为"mirror",然后通过setTimeout进行200ms的轮询,把textar

  • 让textarea自动调整大小的js代码

    复制代码 代码如下: <!doctype html> <html> <head> <title>自动调整大小的textarea </title> <meta charset = "utf-8" /> <style type = "text/css"> .editable{cursor:text; font-size:13px; color:#003366;width:80px;lin

  • 动态调整textarea中字体的大小代码

    选择阅读字体 for (i=9;i"+i+"pt字体\n");} function NYSfont() {if((fontslt.selectedIndex!=-1)&&(fontslt.selectedIndex!=0)){readcontent.style.fontSize=fontslt.options[fontslt.selectedIndex].value;}} 欢迎光临我们 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • 微信小程序 textarea 组件详解及简单实例

    微信小程序textarea 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 多行输入框. 属性名 类型 默认值 说明 value String   输入框的内容 placeholder String   输入框为空时占位符 placehold

  • 代码着色之SyntaxHighlighter项目(最流行的代码高亮)

    下载地址:http://www.dreamprojections.com/syntaxhighlighter/                或http://code.google.com/p/syntaxhighlighter/演示地址:http://www.dreamprojections.com/syntaxhighlighter/Tests/PHP.html 使用方法: 1.假设网页文件test.htm存放在一个目录,则将dp.SyntaxHighlighter解压缩到该目录下的子目录,

  • Flex中实现对一个text渲染不同的字体颜色示例

    开始把控件局限在label上,发现实现起来似乎不太现实.应该用textarea控件: 复制代码 代码如下: <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx=&quo

随机推荐