최근 예전에 썼던 유용한 플러그인들을 정리하기 시작했어요...^-^!!!
특히 Taobao, JD.com과 같은 쇼핑 웹사이트에서 페이지 정보가 점점 더 풍부해지고 풍부해짐에 따라 홈페이지는 그들의 생명선입니다. -||||
최근 한 은행 홈페이지 작업을 하다가 홈페이지에 밀어넣어야만 더 많은 관심을 받을 수 있을 것 같아서 여러 영업직원들이 홈페이지 자리를 놓고 전쟁을 진압하기 시작했습니다. 나의 관대하고 포용력 있는 모습을 반영해서 ㅎㅎㅎ
홈페이지에 필요한 내용이 다 들어있고 만족스럽게 떠났습니다. 그런데 기술관리자가 와서 홈페이지가 왜 이렇게 용량이 크니 줄여보세요! ! !
가장 먼저 K의 사진 수를 줄이는 것입니다. 충분하지 않으면 어떻게 해야 할까요? 긴 페이지의 표시되지 않은 부분을 로드할 수 없습니다. 트래픽을 절약하는 것은 돈을 절약하는 것입니다. ! !
페이지에서 이미지의 위치를 결정하는 것이 아이디어입니다. 이미지의 위치가 현재 화면 높이보다 크거나 작으면 이미지를 표시하고, 그렇지 않으면 이미지를 숨깁니다.
처음에 이미지를 숨기는 방법은 매우 간단합니다. ce091f924070695188c38d548e7f8a98 이미지를 표시해야 할 경우에는 브라우저에서 인식하지 못하는 csii_src 속성을 사용하세요. element.src=element.getAttribute ("csii_src"); 아이디어는 매우 간단합니다. 코드를 작성하기만 하면 됩니다.
function lazyLoad() { var map_element = {}; var element_obj = []; var download_count = 0; var last_offset = -1; var doc_body = null; var doc_element = null; var lazy_load_tag = []; function initVar(tags) { doc_body = document.body; doc_element = document.compatMode == 'BackCompat' ? doc_body : document.documentElement; lazy_load_tag = tags || [ "img", "iframe" ]; } ; function initElementMap() { for ( var i = 0, len = lazy_load_tag.length; i < len; i++) { var el = document.getElementsByTagName(lazy_load_tag[i]); for ( var j = 0, len2 = el.length; j < len2; j++) { if (typeof (el[j]) == "object" && el[j].getAttribute("csii_src")) { element_obj.push(el[j]); } } } for ( var i = 0, len = element_obj.length; i < len; i++) { var o_img = element_obj[i]; var t_index = getAbsoluteTop(o_img); if (map_element[t_index]) { map_element[t_index].push(i); } else { var t_array = []; t_array[0] = i; map_element[t_index] = t_array; download_count++; } } } ; function initDownloadListen() { if (!download_count) return; /*var offset = (window.MessageEvent && !document.getBoxObjectFor) ? doc_body.scrollTop : doc_element.scrollTop;*/ var offset; if(os.firefox){ offset = doc_element.scrollTop; }else{ offset = doc_body.scrollTop; } var visio_offset = offset + doc_element.clientHeight; if (last_offset == visio_offset) { // setTimeout(initDownloadListen, 200); return; } last_offset = visio_offset; var visio_height = doc_element.clientHeight; var img_show_height = visio_height + offset + 20; for ( var key in map_element) { if (img_show_height > key) { var t_o = map_element[key]; var img_vl = t_o.length; for ( var l = 0; l < img_vl; l++) { element_obj[t_o[l]].src = element_obj[t_o[l]] .getAttribute("csii_src"); } delete map_element[key]; download_count--; } } // setTimeout(initDownloadListen, 200); } ; function getAbsoluteTop(element) { if (arguments.length != 1 || element == null) { return null; } var offsetTop = element.offsetTop; while (element = element.offsetParent) { offsetTop += element.offsetTop; } return offsetTop; } function init(tags) { initVar(tags); initElementMap(); initDownloadListen(); $(window).scroll(function(){ initDownloadListen(); }); } ; init(); }
단점은 페이지 구조를 결정해야 하고 이미지 높이를 설정해야 한다는 점입니다. 그렇지 않으면 위에서부터 이미지의 높이를 계산할 수 없습니다. 주의가 필요합니다.
다른 친구가 어떻게 달성했는지 살펴보겠습니다
<!-- var temp = -1;//用来判断是否是向下滚动(向上滚动就不需要判断延迟加载图片了) window.onscroll = function() { var imgElements = document.getElementsByTagName("img"); var lazyImgArr = new Array(); var j = 0; for(var i=0; i<imgElements.length; i++) { if(imgElements[i].className == "lazy"){ lazyImgArr[j++] = imgElements[i]; } } var scrollHeight = document.body.scrollTop;//滚动的高度 var bodyHeight = document.body.offsetHeight;//body(页面)可见区域的总高度 if(temp < scrollHeight) {//为true表示是向下滚动,否则是向上滚动,不需要执行动作。 for(var k=0; k<lazyImgArr.length; k++) { var imgTop = lazyImgArr[k].offsetTop;//1305(图片纵坐标) if((imgTop - scrollHeight) <= bodyHeight) { lazyImgArr[k].src = lazyImgArr[k].alt; lazyImgArr[k].className = "notlazy" } } temp = scrollHeight; } }; // -->
아이디어는 다음과 같습니다. 먼저 a1f02c36ba31691bcfe87b2722de723b 태그의 src 값을 매우 작은 이미지 파일 경로로 설정하고, alt 속성의 값을 스크롤할 때 표시할 실제 이미지 파일 경로로 설정합니다. 이미지 위치까지 src 값을 alt 값으로 바꾸면 표시될 실제 이미지가 자동으로 로드됩니다. 동시에 레이블에 게으른 값으로 클래스를 설정합니다. 로드한 후 해당 값을 notlazy로 설정하세요. 로드해야 할 이미지와 로드하지 말아야 할 이미지를 결정하세요.
코드의 주석은 매우 명확하므로 직접 읽어보시기 바랍니다. 벽돌을 던지는 것도 환영하며, 개선과 개선을 위한 제안도 환영합니다.