The code is as follows.
Copy Code code as follows:
<div>
Render content immediately
<ul>
<li> John </li>
<li> Zhang four </li>
</ul>
</div>
<div>
<textarea id= "LazyRender01" style= "Display:none" >
Lazy Render Content
<ul>
<li> lie triple systems </li>
<li> Dick </li>
</ul>
</textarea>
</div>
<script>
settimeout (function () {//Lazy rendering
var el =document.getelementbyid (' LazyRender01 ');
El.parentNode.innerHTML = El.value;
},1000);
</script>
The advantage of the code is: let Lee Sanli the corresponding content, before lazy rendering, do not form a DOM node, do not request a picture.
But some students will ask: "TextArea content, the search engine is not friendly." ”
No problem, this is also very good to solve:
Copy Code code as follows:
<div>
Render content immediately
<ul>
<li> John </li>
<li> Zhang four </li>
</ul>
</div>
<div>
<script>document.write (' <textarea id= "LazyRender01" style= "Display:none" > ");</script>
Lazy Render Content
<ul>
<li> lie triple systems </li>
<li> Dick </li>
</ul>
</textarea>
</div>
<script>
settimeout (function () {//Lazy rendering
var el =document.getelementbyid (' LazyRender01 ');
El.parentNode.innerHTML = El.value;
},1000);
</script>
The difference between the code is very simple, just the ' <textarea id= ' LazyRender01 ' > ' This section through the document.write output of JS.
But the result is very different: even if the browser does not support JS, all content can still be displayed as is.
