您的位置：首页 > 其它

真正节省带宽的lazyload图片延迟加载

2013-09-05 20:23 369 查看
昨天我在用jquery lazyload 那种是网站很流行的图片加载方法，但那种只是先把图片加载，再遍历把图片src给替换了，再把用户可视区别加载进来，如果这样我觉得就没必要了，
今天自己改写了一个能真正实现图片延迟或节省流量的做法，代码如下。
-->
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>真正节省带宽的lazyload图片延迟加载代码</title>
<script language="网页特效" src="jquery-1.2.6.pack.js"></script>
<script language="javascript" src="lazyload.js"></script>
</head>
<body>
<div class="content">
<p><img src2='123/634163694373622742.gif' /></p>
<p> </p>
<p> </p>
<p> </p>
<p><img src2='123/634163694373622742.jpg' /></p>
<p> </p>
<p><img src2="123/634261180485937500.gif" width="312" height="60" /></p>
<p> </p>
<p> </p>
<p> </p>
<p><img src2="123/634278539257545000.gif" width="312" height="60" /></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p><img src2="123/634279184165670000.gif" width="312" height="60" /></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p><img src2="123/happy.jpg" width="312" height="60" /></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p><img src2="123/school.jpg" width="120" height="75" /></p>
<p> </p>
<p> </p>
<p> </p>
<p><img src2="123/yap.jpg" width="312" height="60" /></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p><img src2='123/zuli.jpg' width="312" height="60" /><img src2="123/zgc.jpg" width="312" height="60" /></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p><img src2='123/zp.jpg' width="312" height="60" /><img src2="123/zgs.jpg" width="312" height="60" /></p>
</div>
<script type="text/javascript">
lazyload({defobj:jquery("div[class^=content]"),defheight:0});
</script>
</body>
</html>
<!--
本文加载实现原因是反src修改成src2然后，加载完后由jquery遍历所有src2再判断可视区别，再加载src2中的图片地址，这样就实现的真正的节省流量较长片延迟加载代码。
jquery-1.2.6.pack.js下载 lazyload.js下载-->
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航