Taobao 이미지 처리 토론
Taobao의 페이지는 매우 크지 만 매우 빨리 열립니다. 이미지 처리는 스크롤 로딩을 사용합니다. 즉, 스크롤 축이 롤링하는 위치와 그림이로드되는 위치를 의미합니다. 그러나 소스 코드를 확인하려면 코드 압축 및 병합이 잘 수행되기 때문에 많은 노력이 필요합니다! 이미지가 스크롤에로드되고 초기화 중에 이미지가로드되지 않기 때문에 페이지 하단의 페이지를 새로 고치면 하단 페이지가 일반적으로로드되지 않습니다. Taobao의 접근 방식은 (연산을 기반으로하는 소스 코드를 보지 않았기 때문에) 페이지를 상단으로 되돌리기 위해 새로 고침되는 것 같습니다.
Taobao를 모방하고 사진을 스크롤하여로드하십시오
다음은 다음을 생각하는 세 가지 방법입니다.
1. JavaScript Lazy Loading Visual Area Loading
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> harooms 프론트 엔드 블로그-시행 영역 JavaScript </title> <style> img {너비 : 100%; Margin-Bottom; Min-Height : 400px; 배경색 : #ddd;} </style> </head> <body> <img haroomslazyload = "chrysanthemum.jpg"src = ""> <img haroomslazyload = "desert.jpg"src = "> <img haroomslazyload ="destert.jpg "> <img. haroomslazyload = "Hydrangeas.jpg"src = "" "> <img haroomslazyload ="koala.jpg "src =" "> <img haroomslazyload ="lighthouse.jpg "src ="> <img haroomslazyload = "penguins.jpg"src = ""> < ""> haroomslazyload = "tulips.jpg"src = ""> <cript> var imgnum = document.getElementsByTagName ( 'img'). length; var imgobj = document.getElementsByTagName ( "IMG"); var l = 0; window.onscroll = function () {var seeheight = document.documentElement.clientHeight; var scrolltop = document.documentElement.scrolltop || document.body.scrolltop; for (var i = l; i <imgnum; i ++) {if (imgobj [i] .offsetTop <seeHeight+scrollTop) {console.log (imgobj [i] .getAttribute ( "src")); console.log (imgobj [i] .src); if (imgobj [i] .getAttribute ( "src") == "") {imgobj [i] .src = imgobj [i] .getAttribute ( "haoroomslazyload"); }} if (imgobj [i] .offsetTop> seeheight + scrolltop) {l = i; 부서지다; }}}}} </script>두 개의 콘솔 출력 인 Console.log (imgobj [i] .src)에주의를 기울이십시오. 전체 브라우저 주소를 얻으려면!
2. jQuery Lazy Loading Visual Area Loading
위의 JS는 jQuery로 번역됩니다!
var l = 0 // js 메소드 번역 버전 $ (창). if ( "img"). eq (i) .attr ( "src") == ") {var lazyloadsrc = $ ( 'img') .attr ("haoroomslazyload. if ( "img"). eq (i) .offset (). parseint ($ (Window)) + parseint ($ (Window)) {l = i;3. 시각적 영역 하중 확장
예를 들어, 애니메이션 효과 또는 캔버스 이미지는 내가 달성하고자하는 효과는 처음에로드하지 않는다는 것입니다. 애니메이션이나 차트로 스크롤하면로드됩니다. 그런 다음 위의 코드를 기반으로 다음과 같은 개선을 할 수 있습니다.
$ (Wind 상단 var var picturetop = parseint ($ (Window) .offset (). top); 여기에서 로딩 기능을 실행하면 로딩 기능이 원본 문서에서 여기로 이동합니다.
위로 다시 새로 고치십시오
시각적 영역 로딩을 할 때는 보통 상단으로 다시 새로 고칠 수 있습니다. 타오 바오처럼. 위로 다시 새로 고치십시오.
타오 바오가 어떻게하는지 모르겠습니다. 상단으로 다시 새로 고쳐서 onbeforeunload 이벤트를 사용했습니다.
onbeforeunload 및 onunload 이벤트, OnOnload 및 OnBeforeUnload는 모두 새로 고침되거나 닫을 때 호출됩니다. Window.onload 또는 <body>를 통해 <cript> 스크립트로 지정할 수 있습니다. 차이점은 OnOnload 전에 OnBeforeUnload가 실행되며 OnOnload의 실행을 방지 할 수도 있다는 것입니다.
페이지가 새로 고침되거나 닫히면 onbeforeunload가 호출됩니다. onbeforeunload는 새 페이지를 읽기 위해 서버로 이동하려고 할 때 호출되지만 아직 읽지 않았습니다. OnUnload는 서버에서로드 해야하는 새 페이지를 읽었으며 현재 페이지를 교체하려고 할 때 호출됩니다. OnOnload는 페이지 업데이트 및 마감을 방지 할 수 없습니다. 그리고 onbeforeunload가 할 수 있습니다.
1. 페이지가로드되면 onload 만 실행됩니다.
2. 페이지가 닫히면 onbeforeunload를 먼저 실행하고 최종적으로 OnOnload를 실행합니다.
3. 페이지를 새로 고치면 먼저 onbeforeUnload를 실행 한 다음 OnOnload 및 Onload를 실행하십시오.
맨 위로 다시 새로 고침하는 것은이 이벤트를 사용하는 것입니다. 이렇게 쓸 수 있습니다.
window.onbeforeunload = function () {$ (창) .scrolltop (0);}웹 사이트의 모든 사진이 사용되지만 영역이로드되고 CSS 및 JS가 병합되어 압축되면 웹 사이트 속도와 성능이 훨씬 향상됩니다!
Taobao처럼하고 싶다면 코드를 개선 할 수 있습니다.
실제로 지연된 로딩이라는 아이디어는 이미지를 데이터 SRC 또는 속성에 먼저 배치하는 것입니다. 페이지가 시각적 영역으로 미끄러지면 저장된 이미지 주소를 SRC에 할당하십시오.
여기에 코드를 나열하지 않을 것입니다.