대형 웹 사이트, 특히 대형 전자 상거래 웹 사이트와 같은 더 많은 사진이있는 사진을 찾아보십시오. 첫 번째 화면이 첫 번째 화면 외부에 있음을 알 수 있습니다. 아래로 스크롤 할 때 그림이로드됩니다. 처음에 모든 사진을로드 할 필요가 없습니다. 이런 식으로 웹을 열는 속도가 크게 향상됩니다. 다음은 저자가 현재 생각한 아이디어입니다. 더 나은 아이디어가 있다면, 나는 당신이 나에게 조언을 주시기를 바랍니다.
실제로, 실시간로드 사진이라는 아이디어는 매우 간단합니다. 페이지가로드되기 시작하면 처음부터로드 할 필요가없는 그림 (예 : 두 번째 화면 아래 그림과 같이 어쨌든 아래로 스크롤해야합니다. <img src = "http://ctc ="http://qzonestyle.gtimg.cn/cn/b.gif "와 같은 사용자 정의 속성으로 실시간으로로드하는 것이 좋습니다. data-src = "http://y3.ifengimg.com/a/2014_37/03c4830691a6d8b.jpg"/>, src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif"는 1px*1px의 투과성 GIF 이미지입니다. 사용자 정의 속성 "http://y3.ifengimg.com/a/2014_37/03c4830691a6d8b.jpg"는 이미지의 경로입니다. 아래로 스크롤 할 때는 Data-SRC의 값을 SRC 값으로 바꾸고 Data-SRC 속성을 제거하십시오 ...
다음은 데모입니다
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w.w.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><Html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"/> <title> js 이미지 로딩 </title> {padding : 0; 여백 : 0;}. WP {너비 : 1000px; 마진 : 5px 자동; 패딩 : 10px 0; 국경-바닥 : 1px solid #dedede; 오버플로 : 숨겨진;} ul li {디스플레이 : 블록; 너비 : 250px; 플로트 : 왼쪽; 여백 : 5px 0; 목록 스타일 : 없음;}. aimg {display : block; 높이 : 300px; 최대 width : 348px; 국경 : 1px Solid #eee; 배경 : URL (http://ctc.qzs.qq.qq.com/aoi/img/icenter/loading.gif) no-repeat center center;} </style> </head> <body> <div> <a href = "http://www.cnblogs.com/xiaomou2014"> <img src = "http://pic.cnitblog.com/avatar/356740/20140716231521.png"> </a> <a href = "http://www.cnblogs.com/xiaomou2014"> http://www.cnblogs.com/xiaomou2014 </a> cont2 시작부터 시작하는 이미지는 실시간으로로드됩니다 </div> <div> <h2> cont1 </h2> <ul> <a <a <a. href = "http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1"target = "_ blank"> <img src = "http://e.hiphotos.baidu.com/image/w%3d310/sign=e0e3bbbb2e38292df597c3aa148c315ce2/c83d70cf3bc79f3d8cd19a31b8a1cd11728b29fa.jpa. /> </a> </li> <li> <img src = "http://h.hilhotos.baidu.com/image/w%3d310/sign=19bbb515ff1f4134e037037f151e95c1/b7fd526d016092414bd8aedd60735fae7cd 34af.jpg. /> < /li> <li> <img src = "http://g.hiphotos.baidu.com/image/w%3d310/sign=dbbeb83d4b540923aa69657fa258d1dc/b812c8fc3c3fdaa0ce16bd488d43f879427f9.jpg" /> </li> <li> <img src = "http://c.hilhotos.baidu.com/image/w%3d310/sign=8e78cf5936a85edffa8cf822795409d8/bba1cd11728b47108b5b5bc5c1cec3fdfc032346.jpg" /> < /li> <li> <img src = "http://e.hiphotos.baidu.com/image/w%3d310/sign=75538617df54564e565e23883de9cde/c2cec3fdfc039245e8f5b0b8594a4c27d1e25ff.jpg. /> < /li> <li> <img src = "http://d.hiphotos.baidu.com/image/w%3d310/sign=4e7eef2892ef76c6d0d2fd2aad17fdf6/a9d3fd1f4134970a9bed2d2697cad1c8a7865d18.jpg" /> </li> <li> <img src = "http://a.hilhotos.baidu.com/image/w%3d310/sign=222222E5B431BC096B63811958513C328733/AC345982B2B7D0A22477783C96094B369A15.JPG" /> < /li> <li> <img src = "http://g.hiphotos.baidu.com/image/w%3d310/sign=d76eb55fb33533faf5b6952f98d2fdca/ac6eddc451da81cbf76dbf9c506d016082431d.jpg" /> < /li> <li> <img src = "http://f.hiphotos.baidu.com/image/w%3d310/sign=7f41436edbf9d72a1764161ce42a282a/adaf2edda3cc7cd9e81d1383b01213fb80e91a.jpg" " /> </li> <li> <img src = "http://b.hiphotos.baidu.com/image/w%3d310/sign=d1e3fa4567380cd7e61ea4ec9145ad14/ae51f3deb48f8c54f573c0da38292df5e1fe7fa6.jpg" /> < /li> <li> <img src = "http://e.hiphotos.baidu.com/image/w%3d310/sign=03c6a3c73c737fae6cd0cb4ad603fb10f9e/b151f8198618367a4e593d2d2c738bd4b21ce56a.jpg. /> < /li> <li> <img src = "http://a.hiphotos.baidu.com/image/w%3d310/sign=2c2009a6d01b0ef46ce89e5fedc651a1/b219ebc4b74543a90ac4bb441c178a82b801145e.jpg" /> </a> </ul> </div> <div> <h2> cont2 </h2> <ul> <li> <a href = "http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1"target = "_ blank"> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif"data-src = "http://y3.ifengimg.com/a/2014_37/03c4830691a6d8b.jpg"/> </a> <li> <li> <a href = "http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1"target = "_ blank"> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://y2.ifeng.com/a/2014_37/89ed5c7eff33abf.jpg"/> </a> </li> <li> <a href = "http://news.ifeng.com/a/20140909/41906442_0.shtml#p=11616. > <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif"data-src = "http://y2.ifengimg.com/a/2014_37/d4dbca6004ab9b7.jpg"/> </a> <li> <li> <a href = "http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1"target = "_ blank"> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://y3.ifengimg.com/a/2014_37/9349a4b2ee90309.jpg"/> </a> </a> </li> <li> <a href = "http://news.f.ifeng.com/a/20140909/41904442_0.shtml#p=11. > <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif"data-src = "http://y2.ifengimg.com/a/2014_37/b2491836e230932.jpg"/> </a> </li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://e.hiphotos.baidu.com/image/w%3d310/sign=655bcf71d31373f0f53f699e940f4b8b/86d6277f9e2f07089c207d0aeb24b89a901f297.jpg" /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://d.hiphotos.baidu.com/image/w%3d310/sign=3629f39bad51f3dec3b2bf65a4eff0ec/94cad1c8a786c917d4016968cb3d70cf3bc7576.jpg" /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://f.hiphotos.baidu.com/image/w%3d310/sign=8c009502257f9e2f70351B092F31E962/9922720E0E0CF3D7CA56401892F01F096A99999999996B.JPG" " /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://a.hiphotos.baidu.com/image/w%3d310/sign=f62f43b6ab773912c4268360c8198675/a1ec08fa513d269759c20d5657fbb2fb4316d83.jpg" /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://e.hiphotos.baidu.com/image/w%3d310/sign=9ce0b545a918972ba33a06cbd6cc7b9d/a873912b31bb051b4ef3a79347adab44bbede09c.jpg" /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://a.hiphotos.baidu.com/image/w%3d310/sign=9d833f1b950a304e5222a6fbe1c9a7c3/d1160924ab18972bb49b4bd5e4cd7b899e510a0f.jpg" " /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://a.hiphotos.baidu.com/image/w%3D310/sign=4a93da2a552c11dfded1b92253266255/d62a6059252dd42a007e1c62013b5bb5c8eab887.jpg" /> </li> </ul> </div> <div> <h2> cont3 </h2> <ul> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://h.hilhotos.baidu.com/image/w%3d310/sign=71556df3d2160924dc25a41ae406359b/f703738da977391274b38fc4fa1986183777ae2fa.jpa.jpa.jpa.jpa.jpa.jpa.jpa.jpa. /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://d.hiphotos.baidu.com/image/w%3d310/sign=53e69395b8a1cd1105b674218913c8b0/ac4bd11373f08202f195e69a49fbfb641b.jpg" /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://h.hilhotos.baidu.com/image/w%3d310/sign=3749c38a4334970a4773162ea5cbd1c0/5366d0160924AB1808B1EA9237FAE6CD7A890BOB.JPG" " /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://e.hiphotos.baidu.com/image/w%3d310/sign=8563bf5757fbb2fb342b5e137f4b2043/3b87e950352ac65cccb5d179f9f2193138a0c.jpg. /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://f.hiphotos.baidu.com/image/w%3d310/sign=74856b065e6034a829e2be80fb1249d9/d000baa1cd11728baab06e25cafccc3cec3fd2c1c.jpg. /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://c.hilhotos.baidu.com/image/w%3d310/sign=49e22cda34d12f2ece05a8617fc2d5ff/cdbf6c81800a19d88e30c90831fa828ba61e468f.jpg. /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://d.hiphotos.baidu.com/image/w%3d310/sign=539b0d21347adab43dd01d42bbd5b36b/54fbb2fb43166d22e4c8ab9d442309f79052d278.jpg. /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://b.hiphotos.baidu.com/image/w%3d310/sign=5077c2c2c2c1cec3fd8b3ea174e689d4b6/4afbbbedab64034f9195fd08adc379310a551d67.jpg" /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://a.hilhotos.baidu.com/image/w%3d310/sign=50bdad348418367aad8979dc1e728b68/3c6d5fbb2fb43168dce1a67222222222222233333d3d3d3de.jpg. /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://b.hiphotos.baidu.com/image/w%3d310/sign=f3ef9fa4e9c4b7453494b117ffd1e78/0bd162d9f2d3572ce86585188133273d0c3bc.jpg. /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://a.hiphotos.baidu.com/image/w%3d310/sign=30a6338deb24b899de3c7f395e071d59/0b46f1fbe096b63ee47dd0e3338444ac9f.jpg" " /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://g.hiphotos.baidu.com/image/w%3d310/sign=75a14ae060d9f2d3201122ee999ec8a53/500fd9f9d72a60592b78941b2a34349b03bba 42.jpg" /> </li> </ul> </div> <cript> // ie 쌍 getElementsByClassNameif (navigator.appName == 'Microsoft Internet Explorer') {document.getElementsByClassName = function () {var ttagname = "*"; if (arguments.length> 1) {ttagname = arguments [1]; } if (arguments.length> 2) {var pobj = arguments [2]} else {var pobj = document; } var objarr = pobj.getElementsByTagName (ttagname); var trobj = 새로운 배열 (); for (var i = 0; i <objarr.length; i ++) {if (objarr [i] .classname == arguments [0]) {trobj.push (objarr [i]); }} return trobj; }} // 이미지로드 함수 loadimg (imgclass, imgsrc) {// data-src :로드 할 이미지를 저장하는 경로 var arrimg = document.getElementsByClassName (imgclass); // 실시간 창에 클래스 imgclass를 사용하여 이미지 배열을로드해야합니다. if (document.documentElement.scrolltop+document.body.scrolltop+document.documentElement.clientHeight > arrimg [i] .offsetTop) {arrimg [i] .setAttribute ( "src", arrimg [i] .getAttribute (imgsrc)); arrimg [i] .removeattribute (imgsrc);}}}}}}} <data-src "; </scrip");예를 들어, 위의 데모의 Cont1의 그림은 페이지가로드 되 자마자 표시됩니다. 홈페이지의 레이아웃이 고정되어 있습니다. 해당 사진이 두 번째 화면 아래에 있음을 확인할 수 있습니다. 그러나 콘텐츠 페이지의 경우 기본 콘텐츠 컨테이너의 그림 위치는 통제 할 수 없습니다. 이를 위해서는 실제 페이지가로드되면 시각적 범위 내에 있는지 여부가 결정됩니다. 시각적 범위 내에있는 경우로드됩니다 (물론 홈페이지도이를 수행 할 수 있지만 인터넷 속도가 매우 느리면 홈페이지를 열면 그림이 표시되기 전에 전체 페이지 아키텍처가로드 될 때까지 기다려야합니다). 그림은 너비와 높이 속성으로 설정되어야하므로 페이지의 위치를 차지할 수 있습니다. 그렇지 않으면로드하기 전에 투명한 GIF 이미지의 크기 만 차지합니다.
다음 데모는 컨텐츠 페이지를 약간 수정했으며 Window.onload 및 Window.onscroll이 모두 트리거 될 때로드가 트리거됩니다.
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w.w.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><Html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"/> <title> js 이미지 로딩 </title> {padding : 0; 여백 : 0;}. WP {너비 : 1000px; 마진 : 5px 자동; 패딩 : 10px 0; 국경-바닥 : 1px solid #dedede; 오버플로 : 숨겨진;}. fl {너비 : 700px; 패딩 : 25px; 플로트 : 왼쪽; 국경 : 1px solid #dedede; 라인 높이 : 40px; 오버플로 : 숨겨진;}. fr {너비 : 220px; 높이 : 800px; 플로트 : 오른쪽; 배경색 : #DEDEDE;}. AIMG {display : 블록; 최대 width : 700px; 여백 : 0 Auto; 배경 : URL (http://ctc.qzs.qq.qq.com/aoi/img/icenter/loading.gif) no-repeat center center;} </style> </head> <body> <div> <a href = "http://www.cnblogs.com/xiaomou2014"> <img src = "http://pic.cnitblog.com/avatar/356740/20140716231521.png"> </a> <a href = "http://www.cnblogs.com/xiaomou2014"> http://www.cnblogs.com/xiaomou2014 </a> </div> <div> <div> <h2> 7 년을 수축한 19 세 소녀 전 </h2> <p> http://www.cnblogs.com/xiaomou2014 </p> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://b.hiphotos.baidu.com/image/w%3d310/sign=f3ef9fa4e9c4b7453494b117ffd1e78/0bd162d9f2d3572ce86585188133273d0c3bc.jpg. /><P>http://www.cnblogs.com/xiaomou2014</p><Img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://a.hiphotos.baidu.com/image/w%3d310/sign=30a6338deb24b899de3c7f395e071d59/0b46f1fbe096b63ee47dd0e3338444ac9f.jpg" " /><P>http://www.cnblogs.com/xiaomou2014</p><Img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://g.hiphotos.baidu.com/image/w%3d310/sign=75a14ae060d9f2d3201122ee999ec8a53/500fd9f9d72a60592b78941b2a34349bbba 42.jpg"/>>>>>>>> 절단 7 년 전 암 소녀 </p> <a href = "http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1"target = "_ blank"> <img src = "http://ctc.qzonestyle.gtimg.cn/acn/ac/cn/cn/cn/cn/cn/ data-src = "http://y3.ifengimg.com/a/2014_37/03c4830691a6d8b.jpg"/> </a> <p> 7 년 전에 방광을 한 19 세 소녀 </p> <a href = "http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1"target = "_ blank"> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://y2.ifengimg.com/a/2014_37/89ed5c7eff33abf.jpg"/> </a> </a> </a> </a> href = "http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1"target = "_ blank"> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://y2.ifengimg.com/a/2014_37/d4dbca6004ab9b7.jpg"/> </a> <p> 7 년 전에 절단 된 고급 암을 가진 19 세 소녀 </p> <a href = "http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1"target = "_ blank"> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://y3.ifengimg.com/a/2014_37/9349a4b2ee90309.jpg"/> </a> </a> <p> 7 년 전에 절단 된 고급 암을 가진 19 세 소녀 </p> <a href = "http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1"target = "_ blank"> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://y2.ifengimg.com/a/2014_37/B2491836E230932.jpg"/> </a> </a> </a> </div> </div> <script> // IE 쌍과 호환 가능합니다. {document.getElementsByClassName = function () {var ttagname = "*"; if (arguments.length> 1) {ttagname = arguments [1]; } if (arguments.length> 2) {var pobj = arguments [2]} else {var pobj = document; } var objarr = pobj.getElementsByTagName (ttagname); var trobj = 새로운 배열 (); for (var i = 0; i <objarr.length; i ++) {if (objarr [i] .classname == arguments [0]) {trobj.push (objarr [i]); }} return trobj; }} // 이미지 로딩 함수 loadimg (imgclass, imgsrc) {// data-src :로드 해야하는 이미지를 저장하는 경로 var arrimg = document.getElementsByClassName (imgclass); // 클래스 IMGClass 클래스가있는 이미지 배열은 실시간으로로드해야합니다 (var i = 0; i <arrimg.length; i ++) {if (! arrimg [i] .getAttribute (imgsrc)) 계속; if (document.documentElement.scrolltop+document.body.scrolltop+document.documentElement.clientHeight > arrimg [i] .offsetTop) {arrimg [i] .setattribute ( "src", arrimg [i] .getAttribute (imgsrc)); arrimg [i] .removeattribute (imgsrc);}}} window.onload = wind