萬盛學電腦網 >> 腳本專題 >> 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")); } });javascript排行
程序編程推薦
相關文章
copyright © 萬盛學電腦網 all rights reserved