HTML 延迟加载显示

html-css019

HTML 延迟加载显示,第1张

HTML 延迟加载显示

<div id="vodid1">第一个按钮直接显示</div>

<input type="submit" value=""  style="width: 1pxheight: 1pxbackground-color: transparentborder: 0FILTER: alpha(opacity=0)" />

间隔线来咯---------------------

<div id="vodid2">第二个按钮/图片,延迟加载显示</div>//广告位置,想延迟加载

    <script type="text/javascript">

        var html="<img src='http://static.cnblogs.com/images/logo_small.gif'/>"

        setTimeout("document.getElementById('vodid2').innerHTML=html",5000)//延时5秒

    </script>

懒加载也叫延迟加载,指的是在长网页中延迟加载图片的时机,当用户需要访问时,再去加载,这样可以提高网站的首屏加载速度,提升用户的体验,并且可以减少服务器的压力。它适用于图片很多,页面很长的电商网站的场景。懒加载的实现原理是,将页面上的图片的src属性设置为空字符串,将图片的真实路径保存在一个自定义属性中,当页面滚动的时候,进行判断,如果图片进入页面可视区域内,则从自定义属性中取出真实路径赋值给图片的src属性,以此来实现图片的延迟加载。