js 이미지 지연 기술_javascript 기술의 일반적인 아이디어 및 예-JS 튜토리얼-php.cn

이미지 지연 기술의 일반적인 개념

1. 이제 img 요소에 해당하는 src 경로를 배경 이미지로 설정하고, img에 해당하는 url 경로는 자체 설정된 속성에 저장됩니다(src 교체용). .

2. 스크롤 높이와 창 높이를 가져옵니다.

3 로드를 지연해야 하는 img 배열을 반복하여 img 높이를 가져오고 요소가 시각적 창 내에 있습니다. 요소가 시각적 창 내에 있는 경우 src

를 테스트 코드

html

코드 복사 코드는 다음과 같습니다. .wrap { margin: 20px auto; width: 150px; >.wrap div { 테두리: 1px 점선; 줄 높이: 30px; text-align: center; >너비 : 150px } .wrap .sortable { 배경색: #E6D6AB; 테두리: 1px 솔리드 #E29808 #showImg li{ 폭:30%; 여백-왼쪽: 15px; 높이:300px; 배경:#CCC; } #showImg li:nth-child(3n){ 여백-왼쪽:3% } #showImg li img{ width:100%; 높이: }

>&lt ;li> ;li&gt ; >&lt ;li> div>

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/tuysL3R1eXNpbWcwNC50YW9iYW9jZG4uY29tL2ltZ2V4dHJ hL2k0Lzc0MDY1MDAzMi9UMl9HbmVYanRhWFhYWFhYWFhfISE3NDA2NTAwMzIuanBn. jpg", "http://www.yishun.net/tuysL3R1eXNpbWcwMy50YW9iYW9jZG4uY29tL2ltZ2V4dHJhL2kzLzc0MDY1MDAzMi9UMkVHbF9YaVhjWFhYWFhYWFhfISE3NDA2NTAwMzIuanBn.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 str =' ' } $("#showImg").append(str); } $(document).ready(function(){ addImgEle(); }); (function(win){ varlazyLoad=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 if(Imgeles[i].getAttribute("resrc")=="show"){ 계속 ; } 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 offsetPage && postWindow var src=o.getAttribute("resrc") o.setAttribute("src", src); o.setAttribute("resrc", "show"); } } } }, getStyle:function(요소, 속성) { if(arguments.length != 2) return false; var value = element.style[camelize(property)]; if (!value) { if (document.defaultView && document.defaultView.getComputeStyle) { var css = document.defaultView.getCompulatedStyle(element, null); 값 = CSS ? css.getPropertyValue(속성) : null; } else if (element.currentStyle) { value = element.currentStyle[camelize(property)]; } } 반환 값 == 'auto' ? '' : 값; } } win.lazyLoad=lazyLoad; })(창); $(document).ready(function(){ lazyLoad.init($("img.lazyImg")); window.onscroll=function(){ lazyLoad.init($ ("img.lazyImg")) } });