<strong>原理と処理</strong> <br>1. ページスクロール読み込みイベント<br>2. ページ上の要素の先頭の値を取得し、スクロールバーの位置に基づいて画像を表示するタイミングを決定します<br>3. ロードする要素コレクションを取得します。 コレクションから過去の画像を削除します。 <br> エフェクト プレビュー: http://jsfiddle.net/dtdxrk/SkYNq/embedded/result/ <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="16254" class="copybut" id="copybut16254" onclick="doCopy('code16254')"> <u>コードをコピーします</u></a></span> コードは次のとおりです。 </div> <div class="codebody" id="code16254"> <br><br><br> <br><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <br><title>ネイティブ Js ページのスクロール遅延画像</title> ><style type="text/css" > <br>*{margin: 0;padding: 0} <br>img.scrollLoading{border: 1px Solid #ccc;display: block;margin-top: 10px; <br></style> <br></head> <br><div id="content"> <br></body> <br></html> <br> <script type="text/javascript"> <br>var _CalF = { <br>$ : function(object){//Selector<br>if(object = == 未定義 ) return; <br>var getArr = function(name,tagName,attr){ <br>var tagName = tagName || '*', <br>eles = document.getElementsByTagName(tagName), <br>class = (typeof document.body.style.maxHeight === "未定義") ? "className" : "class";//ie6 <br>attr = attr || <br>Arr = []; for(var i=0;i<eles .length>if(eles[i].getAttribute(attr)==name){ <br>Arr.push(eles[i]); >} <br>} <br>return Arr; <br>}; <br>if(object.indexOf('#') === 0){ //#id <br>return document.getElementById(object. substring(1)); <br>} else if(object.indexOf('.') === 0){ //.class <br>return getArr(object.substring(1)); if(object.match(/=/g )){ //attr=name <br>return getArr(object.substring(object.search(/=/g) 1),null,object.substring(0,object. search(/=/g))); <br>}else if(object.match(/./g)){ //tagName.className <br>return getArr(object.split('.')[1] ,object.split('.')[ 0]); <br>} <br>}, <br>getPosition : function(obj) { //ページ上の要素の位置、幅、高さを取得します <br>var top = 0, <br>left = 0, <br>width = obj.offsetWidth, <br>height = obj.offsetHeight; <br>while(obj.offsetParent){ <br>top = obj.offsetTop; <br>left = obj.offsetLeft; <br>obj = obj.offsetParent; <br>} <br>return {"top":top,"left":left,"width":width,"height":height }; <br>} <br>}; <br><br>//画像リストを追加 <br>var _temp = []; <br>for (var i = 1; i _temp.push('<img class="scrollLoading" data-src="http://images.cnblogs.com/cnblogs_com/Darren_code/311197/o_' i '.jpg" src="http:// Images.cnitblog.com/blog/150659/201306/23160223 -c81dd9aa9a2a4071a47b0ced2c9118bc.gif" />gt;<br />Picture' i); <BR>} <br>_CalF.$("#content").innerHTML = _temp.join(""); <br><BR>関数scrollLoad(){ <BR>this.init.apply(this, argument); <BR>scrollLoad.prototype ={ <BR>init : function(className){ <BR>var className = " img." className, <br>imgs = _CalF.$(className), <br>that = this.imgs = <BR>that; .loadImg(); <BR>window.onscroll = function (){ <BR>that.time = setTimeout(function(){ <BR>that.loadImg(); <BR>},400); <BR>}, <BR>loadImg : function() { <BR>var imgs = this.imgs.reverse(), //配列の反転を取得します <BR>len = imgs.length; length===0){ <BR>clearTimeout(this.time); <BR>} <BR>for(var j=len-1;j>=0;j--){ // <BR>var img = imgs[j]、<BR>imgTop = _CalF.getPosition(img).top、<BR>imgSrc = img.getAttribute("data-src")、<BR>offsetPage = window.pageYOffset を減らす? window.pageYOffset : window.document.documentElement.scrollTop,/ /スクロールバーの上部の値<BR>bodyHeight = document.documentElement.clientHeight //ボディの高さ<BR>if((offsetPage bodyHeight/2) ) > (imgTop-bodyHeight/2)){ <br>img.src = imgSrc; <br>} <br>} <br> <br><br>var img1 = newscrollLoading("scrollLoading"); <br></script></eles> </div>
