The code is as follows.
Render content immediately
- Zhang San

- Zhang Si

<script> <br>setTimeout(function(){//Lazy rendering <br>var el =document.getElementById('lazyRender01'); <br>el.parentNode.innerHTML = el.value; <br>},1000); <br></script>
The advantage of the code is that the content corresponding to Li San and Li Si will not form a dom node and will not request images before lazy rendering.
But some students will ask: "The content in Textarea is not friendly to search engines."
No problem, this is easy to solve:
Render content immediately
- Zhang San

- Zhang Si

< /ul>
<script>document.write('<textarea id="lazyRender01" style="display:none">'); </script>
Lazy rendering of content
- 李三

< li>李思
< ;script>
setTimeout(function(){//Lazy rendering
var el =document.getElementById('lazyRender01');
el.parentNode.innerHTML = el.value;
},1000 ;
But the result is very different: even if the browser does not support js, all content can still be displayed as is.