JS將圖片存儲到數組中,滾動時加載


<html>
    <head>

    </head>

    <body onscroll="show()">

        <img src="images/nm.jpg" />

        <p>我聲明我第一節不是針對羅霖是針對我們班10幾個同學</p>
        <p>我聲明我第一節不是針對羅霖是針對我們班10幾個同學</p>
        <p>我聲明我第一節不是針對羅霖是針對我們班10幾個同學</p>
        <p>我聲明我第一節不是針對羅霖是針對我們班10幾個同學</p>
        <p>我聲明我第一節不是針對羅霖是針對我們班10幾個同學</p>
        <p>我聲明我第一節不是針對羅霖是針對我們班10幾個同學</p>
        <p>我聲明我第一節不是針對羅霖是針對我們班10幾個同學</p>
        <p>我聲明我第一節不是針對羅霖是針對我們班10幾個同學</p>
        <p>我聲明我第一節不是針對羅霖是針對我們班10幾個同學</p>
        <p>我聲明我第一節不是針對羅霖是針對我們班10幾個同學</p>
        <p>我聲明我第一節不是針對羅霖是針對我們班10幾個同學</p>
        <p>我聲明我第一節不是針對羅霖是針對我們班10幾個同學</p>
        <p>我聲明我第一節不是針對羅霖是針對我們班10幾個同學</p>
        <p>我聲明我第一節不是針對羅霖是針對我們班10幾個同學</p>
        <p>我聲明我第一節不是針對羅霖是針對我們班10幾個同學</p>
        <p>我聲明我第一節不是針對羅霖是針對我們班10幾個同學</p>
        <p>我聲明我第一節不是針對羅霖是針對我們班10幾個同學</p>
        <p>我聲明我第一節不是針對羅霖是針對我們班10幾個同學</p>
        <p>我聲明我第一節不是針對羅霖是針對我們班10幾個同學</p>
        <p>我聲明我第一節不是針對羅霖是針對我們班10幾個同學</p>
        <p>我聲明我第一節不是針對羅霖是針對我們班10幾個同學</p>
        <p>我聲明我第一節不是針對羅霖是針對我們班10幾個同學</p>
        <p>我聲明我第一節不是針對羅霖是針對我們班10幾個同學</p>
        <p>我聲明我第一節不是針對羅霖是針對我們班10幾個同學</p>
        <p>我聲明我第一節不是針對羅霖是針對我們班10幾個同學</p>
        <p>我聲明我第一節不是針對羅霖是針對我們班10幾個同學</p>
        <p>我聲明我第一節不是針對羅霖是針對我們班10幾個同學</p>
        <p>我聲明我第一節不是針對羅霖是針對我們班10幾個同學</p>
        <p>我聲明我第一節不是針對羅霖是針對我們班10幾個同學</p>
        <p>我聲明我第一節不是針對羅霖是針對我們班10幾個同學</p>
        <p>我聲明我第一節不是針對羅霖是針對我們班10幾個同學</p>

        <img src="images/nm2.jpg" />

        <p>男子漢大丈夫,說話算話</p>
        <p>男子漢大丈夫,說話算話</p>
        <p>男子漢大丈夫,說話算話</p>
        <p>男子漢大丈夫,說話算話</p>
        <p>男子漢大丈夫,說話算話</p>
        <p>男子漢大丈夫,說話算話</p>
        <p>男子漢大丈夫,說話算話</p>
        <p>男子漢大丈夫,說話算話</p>
        <p>男子漢大丈夫,說話算話</p>
        <p>男子漢大丈夫,說話算話</p>
        <p>男子漢大丈夫,說話算話</p>
        <p>男子漢大丈夫,說話算話</p>
        <p>男子漢大丈夫,說話算話</p>
        <p>男子漢大丈夫,說話算話</p>
        <p>男子漢大丈夫,說話算話</p>
        <p>男子漢大丈夫,說話算話</p>
        <p>男子漢大丈夫,說話算話</p>
        <p>男子漢大丈夫,說話算話</p>
        <p>男子漢大丈夫,說話算話</p>
        <p>男子漢大丈夫,說話算話</p>
        <p>男子漢大丈夫,說話算話</p>
        <p>男子漢大丈夫,說話算話</p>
        <p>男子漢大丈夫,說話算話</p>
        <p>男子漢大丈夫,說話算話</p>
        <p>男子漢大丈夫,說話算話</p>
        <p>男子漢大丈夫,說話算話</p>
        <p>男子漢大丈夫,說話算話</p>
        <p>男子漢大丈夫,說話算話</p>
        <p>男子漢大丈夫,說話算話</p>
        <p>男子漢大丈夫,說話算話</p>
        <p>男子漢大丈夫,說話算話</p>
        <p>男子漢大丈夫,說話算話</p>
        <p>男子漢大丈夫,說話算話</p>
        <p>男子漢大丈夫,說話算話</p>
        <p>男子漢大丈夫,說話算話</p>
        <p>男子漢大丈夫,說話算話</p>
        <p>男子漢大丈夫,說話算話</p>
        <p>男子漢大丈夫,說話算話</p>
        <p>男子漢大丈夫,說話算話</p>
        <p>男子漢大丈夫,說話算話</p>
        <p>男子漢大丈夫,說話算話</p>
        <p>男子漢大丈夫,說話算話</p>

        <img src="images/nm3.jpg" />

        <p>寫作業,別老抄,抄啥抄啊</p>
        <p>寫作業,別老抄,抄啥抄啊</p>
        <p>寫作業,別老抄,抄啥抄啊</p>
        <p>寫作業,別老抄,抄啥抄啊</p>
        <p>寫作業,別老抄,抄啥抄啊</p>
        <p>寫作業,別老抄,抄啥抄啊</p>
        <p>寫作業,別老抄,抄啥抄啊</p>
        <p>寫作業,別老抄,抄啥抄啊</p>
        <p>寫作業,別老抄,抄啥抄啊</p>
        <p>寫作業,別老抄,抄啥抄啊</p>
        <p>寫作業,別老抄,抄啥抄啊</p>
        <p>寫作業,別老抄,抄啥抄啊</p>
        <p>寫作業,別老抄,抄啥抄啊</p>
        <p>寫作業,別老抄,抄啥抄啊</p>
        <p>寫作業,別老抄,抄啥抄啊</p>
        <img src="images/nm4.jpg" />
        <br />
        <img src="images/nm5.jpg" />

        

        <script>
            //取出所有圖片,圖片的位置一旦超過了offsetHeight即讓圖片src干掉,並且賦值給另外一個數組來保存
            //同時將圖片的偏移位置也賦值給一個數組,就知道哪批圖片該出來了

        

                var imgs=document.images;
                //保存,圖片距離頂端的高
                var height=new Array();
                //保存圖片的路徑
                var paths=new Array();

                //保存圖片對象
                var objs=new Array();


                //第一屏讓顯示,超過第一屏統統不加載
                var i=0;
                for(temp in imgs){

                    if(imgs[temp].offsetTop>document.body.offsetHeight){
                        
                        paths[i]=imgs[temp].src;
                        height[i]=imgs[temp].offsetTop;
                        imgs[temp].src='';
                        objs[i]=imgs[temp];
                        i++;
                    }

                }

            

                function show(){
                    //當前縱軸移動了多少個像素

                    //移動的像素+ body.offsetHeight 只要小於這個區間的圖片全部要顯示出來

                    var h=document.body.scrollTop+document.body.offsetHeight;

                    for(i=0;i<height.length;i++){

                        if(height[i]<h){

                            objs[i].src=paths[i];
                        }

                    }

                }
            

        
                
        </script>

    </body>

</html>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM