有时候制作网页的时候,要在某些地方加载一些体积比较大的内容或者广告等,这些内容常常会导致页面加载变慢,因为这些内容还没有加载完的时候,下面的内容就要继续等待加载。
于是我们可以让影响页面加载速度的内容在整个页面的其他内容加载完之后,再进行加载。
当然有人会用各种延迟加载的技术,但ajax什么的过于复杂了。
这里提供两种最简单的方法。
方法一:纯CSS实现HTML页面指定内容延迟加载
把整个页面外部的div的CSS属性设置为“position:relative”,然后我们要延迟加载的内容所在的div的CSS设置为:“position:absolute;”。然后把延迟加载内容的HTML代码放到页面源代码的最后面。例如:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
#layout { color:blue; position:relative; margin:0 auto; width:960px; height:800px; clear:both; } #version { position:absolute; color:red; left:600px; top:20px; width:200px; height:40px; } |
方法二:JS实现HTML页面指定内容延迟加载
1 2 3 4 5 6 |
<div id="preload">咦,网速好像不是不给力,正在努力加载中···</div> <div>这里是中间的其他页面内容</div> <div id="content">这里是加载完成后显示的内容,要延迟加载的内容放这里</div> <script type="text/javascript">// <![CDATA[ document.getElementById("preload").innerHTML = document.getElementById(" content ").innerHTML; document.getElementById(" content ").innerHTML = ""; // ]]></script> |