A-A+

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

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

昨天我在用jquery lazyload 那种是网站很流行的图片加载方法,但那种只是先把图片加载,再遍历把图片src给替换了,再把用户可视区别加载进来,如果这样我觉得就没必要了,今天自己改写了一个能真正实现图片延迟或节省流量的做法,代码如下。

  1. <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="content-type" content="text/html; charset=gb2312" />  
  5. <title>真正节省带宽的lazyload图片延迟加载代码</title>  
  6. <script language="网页特效" src="jquery-1.2.6.pack.js"></script>  
  7. <script language="javascript"  src="lazyload.js"></script>  
  8.   
  9. </head>  
  10.   
  11. <body>  
  12. <div class="content">  
  13.   <p><img src2='123/634163694373622742.gif' /></p>  
  14.   <p>&nbsp;</p>  
  15.   <p>&nbsp;</p>  
  16.   <p>&nbsp;</p>  
  17.   <p><img src2='123/634163694373622742.jpg'  /></p>  
  18.   <p>&nbsp;</p>  
  19.   <p><img src2="123/634261180485937500.gif" width="312" height="60" /></p>  
  20.   <p>&nbsp;</p>  
  21.   <p>&nbsp;</p>  
  22.   <p>&nbsp;</p>  
  23.   <p><img src2="123/634278539257545000.gif" width="312" height="60" /></p>  
  24.   <p>&nbsp;</p>  
  25.   <p>&nbsp;</p>  
  26.   <p>&nbsp;</p>  
  27.   <p>&nbsp;</p>  
  28.   <p>&nbsp;</p>  
  29.   <p>&nbsp;</p>  
  30.   <p><img src2="123/634279184165670000.gif" width="312" height="60" /></p>  
  31.   <p>&nbsp;</p>  
  32.   <p>&nbsp;</p>  
  33.   <p>&nbsp;</p>  
  34.   <p>&nbsp;</p>  
  35.   <p>&nbsp;</p>  
  36.   <p><img src2="123/happy.jpg" width="312" height="60" /></p>  
  37.   <p>&nbsp;</p>  
  38.   <p>&nbsp;</p>  
  39.   <p>&nbsp;</p>  
  40.   <p>&nbsp;</p>  
  41.   <p>&nbsp;</p>  
  42.   <p><img src2="123/school.jpg" width="120" height="75" /></p>  
  43.   <p>&nbsp;</p>  
  44.   <p>&nbsp;</p>  
  45.   <p>&nbsp;</p>  
  46.   <p><img src2="123/yap.jpg" width="312" height="60" /></p>  
  47.   <p>&nbsp;</p>  
  48.   <p>&nbsp;</p>  
  49.   <p>&nbsp;</p>  
  50.   <p>&nbsp;</p>  
  51.   <p>&nbsp;</p>  
  52.   <p>&nbsp;</p>  
  53.   <p><img src2='123/zuli.jpg' width="312" height="60" /><img src2="123/zgc.jpg" width="312" height="60" /></p>  
  54.   <p>&nbsp;</p>  
  55.   <p>&nbsp;</p>  
  56.   <p>&nbsp;</p>  
  57.   <p>&nbsp;</p>  
  58.   <p>&nbsp;</p>  
  59.   <p>&nbsp;</p>  
  60.   <p><img src2='123/zp.jpg' width="312" height="60" /><img src2="123/zgs.jpg" width="312" height="60" /></p>  
  61. </div>  
  62.   
  63. <script type="text/javascript">  
  64.         lazyload({defobj:jquery("div[class^=content]"),defheight:0});  
  65. </script>  
  66.   
  67. </body>  
  68. </html>  

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

标签:

给我留言