萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> js圖片延遲技術一般的思路與示例

js圖片延遲技術一般的思路與示例

 現將img元素對應的src路徑設置為背景圖片,而該img所對應的url路徑存放在一個自設的屬性中

圖片延遲技術一般的思路    1.現將img元素對應的src路徑設置為背景圖片,而該img所對應的url路徑存放在一個自設的屬性中(以便進行src替換)。    2.獲取卷軸的高度和窗口的高度    3循環需要延遲加載的img數組,獲取img的高度,判斷該元素是否在可視窗口內。若該元素在可視窗口內,則進行src替換    一下為測試代碼    html   代碼如下: <style>  .wrap {  margin: 20px auto;  width: 150px;  }  .wrap div {  border: 1px dotted #E29808;  height: 30px;  line-height: 30px;  margin: 5px auto;  text-align: center;  width: 150px;  }  .wrap .sortable {  background-color: #E6D6AB;  border: 1px solid #E29808;  }  #showImg li{  width:30%;  margin-left:2%;  margin-top:15px;  height:300px;  float:left;  background:#CCC;  }  #showImg li:nth-child(3n){  margin-left:3%;  }  #showImg li img{  width:100%;  max-height:100%;  }  </style>  </head>    <body>  <div id="showImg">  <li><img src="http://img4.duitang.com/uploads/item/201306/08/20130608190125_3kFty.jpeg" alt="test" /></li>  <li><img src="http://cdn.duitang.com/uploads/item/201306/07/20130607171626_QkC3T.thumb.600_0.jpeg" alt="test" /></li>  <li><img src="http://i2.sinaimg.cn/gm/2011/0127/U5238P115DT20110127111837.jpg" alt="test" /></li>  </div>  </body>    js部分  代碼如下: var imgsglobal=[  "http://cdn.duitang.com/uploads/item/201306/07/20130607171626_QkC3T.thumb.600_0.jpeg",  "http://img4.duitang.com/uploads/item/201306/07/20130607172438_Teijr.jpeg",  "http://cdn.duitang.com/uploads/item/201306/08/20130608190311_BYwcA.thumb.600_0.jpeg",  "http://g-ec4.images-amazon.com/images/G/28/BOOK-Catalog/Liaoxiaojun/B003U5TATY_01_AMZN.jpg",  "http://www.yishun.net/tuysL3R1eXNpbWcwNC50YW9iYW9jZG4uY29tL2ltZ2V4dHJhL2k0Lzc0MDY1MDAzMi9UMl9HbmVY anRhWFhYWFhYWFhfISE3NDA2NTAwMzIuanBn.jpg",  "http://www.yishun.net/tuysL3R1eXNpbWcwMy50YW9iYW9jZG4uY29tL2ltZ2V4dHJhL2kzLzc0MDY1MDAzMi9UMkVHbF9Ya VhjWFhYWFhYWFhfISE3NDA2NTAwMzIuanBn.jpg",  "http://img4.duitang.com/uploads/item/201306/08/20130608190125_3kFty.jpeg",  "http://img4.duitang.com/uploads/item/201304/29/20130429142901_SQjJv.thumb.600_0.jpeg",  "http://img4.duitang.com/uploads/item/201112/04/20111204170801_fiBKm.jpg",  "http://img2.duitang.com/uploads/item/201211/06/20121106233027_LdQaS.thumb.600_0.jpeg",  "http://i2.sinaimg.cn/gm/2011/0127/U5238P115DT20110127111837.jpg",  "http://img2.duitang.com/uploads/item/201209/24/20120924162953_hLPJe.jpeg",  "http://wenwen.soso.com/p/20110624/20110624085901-745594320.jpg",  "http://img4.duitang.com/uploads/item/201206/15/20120615185646_uzmrt.thumb.600_0.jpeg",  "http://img4.duitang.com/uploads/item/201202/11/20120211213039_U4Sj8.thumb.600_0.jpg",  "http://cdn.duitang.com/uploads/item/201201/25/20120125145922_n4Vz8.thumb.600_0.jpg"  ];  function addImgEle(){  var str='';  for(var i=0, len=imgsglobal.length; i<len; i++){  str+='<li><img class="lazyImg" src="wait" resrc="'+imgsglobal[i]+'" /></li>'  }  $("#showImg").append(str);  }  $(document).ready(function(){  addImgEle();  });  (function(win){  var lazyLoad=win['lazyLoad']||{};  var camelize = function (s) {  return s.replace(/-(w)/g, function (strMatch, p1) {  return p1.toUpperCase();  });  };  lazyLoad={  init:function(ImgClass){  var offsetPage = window.pageYOffset ? window.pageYOffset : window.document.documentElement.scrollTop,  offsetWindow = offsetPage + Number(window.innerHeight ? window.innerHeight : document.documentElement.clientHeight);  var Imgeles=ImgClass;  for(var i=0, len=Imgeles.length; i<len; i++){  if(Imgeles[i].getAttribute("resrc")=="show"){  continue;  }  var o=Imgeles[i];  if(o){  postPage = o.getBoundingClientRect().top + window.document.documentElement.scrollTop +window.document.body.scrollTop;  postWindow = postPage + Number(this.getStyle(o, 'height').replace('px', ''));  if ((postPage > offsetPage && postPage < offsetWindow) || (postWindow > offsetPage && postWindow < offsetWindow)){  var src=o.getAttribute("resrc");  o.setAttribute("src", src);  o.setAttribute("resrc", "show");  }  }  }  },  getStyle:function (element, property) {  if (arguments.length != 2) return false;  var value = element.style[camelize(property)];  if (!value) {  if (document.defaultView && document.defaultView.getComputedStyle) {  var css = document.defaultView.getComputedStyle(element, null);  value = css ? css.getPropertyValue(property) : null;  } else if (element.currentStyle) {  value = element.currentStyle[camelize(property)];  }  }  return value == 'auto' ? '' : value;  }  }  win.lazyLoad=lazyLoad;  })(window);  $(document).ready(function(){  lazyLoad.init($("img.lazyImg"));  window.onscroll=function (){  lazyLoad.init($("img.lazyImg"));  }  }); 
copyright © 萬盛學電腦網 all rights reserved