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>
原文地址:https://www.cnblogs.com/ahwu/p/3440321.html