이미지 지연 기술의 일반적인 개념 1. 이제 img 요소에 해당하는 src 경로를 배경 이미지로 설정하고, img에 해당하는 url 경로는 자체 설정된 속성에 저장됩니다(src 교체용). . 2. 스크롤 높이와 창 높이를 가져옵니다. 3 로드를 지연해야 하는 img 배열을 반복하여 img 높이를 가져오고 요소가 시각적 창 내에 있습니다. 요소가 시각적 창 내에 있는 경우 src 를 테스트 코드 html 코드 복사 코드는 다음과 같습니다. <br>.wrap { <br>margin: 20px auto; <br>width: 150px; >.wrap div { <br>테두리: 1px 점선; <br>줄 높이: 30px; <br>text-align: center; >너비 : 150px <br>} <br>.wrap .sortable { <br>배경색: #E6D6AB; <br>테두리: 1px 솔리드 #E29808 <br>#showImg li{ <br>폭:30%; <br>여백-왼쪽: 15px; <br>높이:300px; <br>배경:#CCC; } <br>#showImg li:nth-child(3n){ <br>여백-왼쪽:3% <br>} <br>#showImg li img{ <br>width:100%; 높이: <br>} <br></head> <br><br><body> >< ;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><br></body> <br><br> <br>js 부분<br><br><br><br><br>코드 복사<br><br><br> 다음과 같습니다:<br><div class="codebody" id="code78430"> <br>var imgsglobal=[ <br>"http://cdn.duitang.com/uploads/item/201306/07/20130607171626_QkC3T.thumb.600_0.jpeg", <br>"http://img4 .duitang.com/uploads/item/201306/07/20130607172438_Teijr.jpeg", <br>"http://cdn.duitang.com/uploads/item/201306/08/20130608190311_BYwcA.thumb.600_0.jpeg", <br>"http://g-ec4.images-amazon.com/images/G/28/BOOK-Catalog/Liaoxiaojun/B003U5TATY_01_AMZN.jpg", <br>"http://www.yishun.net/tuysL3R1eXNpbWcwNC50YW9iYW9jZG4uY29tL2ltZ2V4dHJ hL2k0Lzc0MDY1MDAzMi9UMl9HbmVYanRhWFhYWFhYWFhfISE3NDA2NTAwMzIuanBn. jpg", <br>"http://www.yishun.net/tuysL3R1eXNpbWcwMy50YW9iYW9jZG4uY29tL2ltZ2V4dHJhL2kzLzc0MDY1MDAzMi9UMkVHbF9YaVhjWFhYWFhYWFhfISE3NDA2NTAwMzIuanBn.jpg", 🎜>"http://img4.duitang.com/uploads/item/201306/08/20130608190125_3kFty.jpeg", <br>"http://img4.duitang.com/uploads/item/201304/29/20130429142901_SQjJv.thumb.600_0.jpeg", <br>"http://img4.duitang.com/uploads/item/201112/ 04/20111204170801_fiBKm.jpg", <br>"http://img2.duitang.com/uploads/item/201211/06/20121106233027_LdQaS.thumb.600_0.jpeg", <br>"http://i2.sinaimg. cn/gm/2011/0127/U5238P115DT20110127111837.jpg", <br>"http://img2.duitang.com/uploads/item/201209/24/20120924162953_hLPJe.jpeg", <br>"http://wenwen. soso.com/p/20110624/20110624085901-745594320.jpg", <br>"http://img4.duitang.com/uploads/item/201206/15/20120615185646_uzmrt.thumb.600_0.jpeg", <br>" http://img4.duitang.com/uploads/item/201202/11/20120211213039_U4Sj8.thumb.600_0.jpg", <br>"http://cdn.duitang.com/uploads/item/201201/25/20120125145922_n4Vz8 .thumb.600_0.jpg" <br>]; <br>function addImgEle(){ <br>var str=''; <br>for(var i=0, len=imgsglobal.length; i<len i ){ <BR>str ='<li><img class="lazyImg" src="wait" resrc="' imgsglobal[i] '" /></li>' <br>} <br>$("#showImg").append(str); <br>} <br>$(document).ready(function(){ <br>addImgEle(); <br>}); <br>(function(win){ <br>varlazyLoad=win['lazyLoad']||{}; <br>var camelize = function(s) { <br>return s.replace(/-(w) /g, function (strMatch, p1) { <br>return p1.toUpperCase(); <br>}) <br>lazyLoad={ <br>init:function(ImgClass){ <br> var offsetPage = window.pageYOffset ? window.pageYOffset : window.document.documentElement.scrollTop, <br>offsetWindow = offsetPage Number(window.innerHeight ? window.innerHeight : document.documentElement.clientHeight) <br>var Imgeles=ImgClass; <br>for(var i=0, len=Imgeles.length; i<len; i ){ <BR>if(Imgeles[i].getAttribute("resrc")=="show"){ <BR>계속 ; <BR>} <BR>var o=Imgeles[i]; <BR>if(o){ <BR>postPage = o.getBoundingClientRect().top window.document.documentElement.scrollTop window.document.body.scrollTop ; <BR>postWindow = postPage Number(this.getStyle(o, 'height').replace('px', '')) <BR>if ((postPage > offsetPage < postPage < offsetWindow) || ( postWindow > offsetPage && postWindow < offsetWindow)){ <br>var src=o.getAttribute("resrc") <br>o.setAttribute("src", src); <br>o.setAttribute("resrc", "show"); <br>} <br>} <br>} <br>}, <br>getStyle:function(요소, 속성) { <br>if(arguments.length != 2) return false; <br>var value = element.style[camelize(property)]; <br>if (!value) { <br>if (document.defaultView && document.defaultView.getComputeStyle) { <br>var css = document.defaultView.getCompulatedStyle(element, null); <br>값 = CSS ? css.getPropertyValue(속성) : null; <br>} else if (element.currentStyle) { <br>value = element.currentStyle[camelize(property)]; <br>} <br>} <br>반환 값 == 'auto' ? '' : 값; <br>} <br>} <br>win.lazyLoad=lazyLoad; <br>})(창); <br>$(document).ready(function(){ <br>lazyLoad.init($("img.lazyImg")); <br>window.onscroll=function(){ <br>lazyLoad.init($ ("img.lazyImg")) <br>} <br>}); <br><br> </div> </div>