代碼如下。
復制代碼 代碼如下:
<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，一切內容也還是能原樣顯示出來。