A-A+

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

2016年01月07日前端设计暂无评论阅读 6 views 次

昨天我在用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">
<img src2='123/634163694373622742.gif' />
<img src2='123/634163694373622742.jpg' />
<img src2="123/634261180485937500.gif" width="312" height="60" />
<img src2="123/634278539257545000.gif" width="312" height="60" />
<img src2="123/634279184165670000.gif" width="312" height="60" />
<img src2="123/happy.jpg" width="312" height="60" />
<img src2="123/school.jpg" width="120" height="75" />
<img src2="123/yap.jpg" width="312" height="60" />
<img src2='123/zuli.jpg' width="312" height="60" /><img src2="123/zgc.jpg" width="312" height="60" />
<img src2='123/zp.jpg' width="312" height="60" /><img src2="123/zgs.jpg" width="312" height="60" />
</div>
<script type="text/javascript">
lazyload({defobj:jquery("div[class^=content]"),defheight:0});
</script>
</body>
</html>

本文加载实现原因是反src修改成src2然后，加载完后由jquery遍历所有src2再判断可视区别，再加载src2中的图片地址，这样就实现的真正的节省流量较长片延迟加载代码。

夏日博客