JQuery

1个成员

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

发表于 2017-02-10 2835 次查看

昨天我在用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>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p><img src2='123/634163694373622742.jpg'  /></p>
  <p>&nbsp;</p>
  <p><img src2="123/634261180485937500.gif" width="312" height="60" /></p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p><img src2="123/634278539257545000.gif" width="312" height="60" /></p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p><img src2="123/634279184165670000.gif" width="312" height="60" /></p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p><img src2="123/happy.jpg" width="312" height="60" /></p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p><img src2="123/school.jpg" width="120" height="75" /></p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p><img src2="123/yap.jpg" width="312" height="60" /></p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p><img src2='123/zuli.jpg' width="312" height="60" /><img src2="123/zgc.jpg" width="312" height="60" /></p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</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下载-->

发表回复
你还没有登录,请先登录注册