zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    2017.12.07 postgresql使用with recursive完成迭代查询
    jackson/fastJson boolean类型问题
    postgres sql merge upsert
    postgresql 清除数据并清除自增ID
    elasticsearch7.2深度分页实现(查询全部数据)
    SpringBoot集合SpringSecurity流程及代码详解和导图详解
    SpringBoot整合JWT框架及JWT介绍
    浅析JWT中token过期后解析报错ExpiredJwtException的解决及过期之后如何进行后续业务处理
    SpringSecurity整合JWT一些异常了解及处理io.jsonwebtoken.SignatureException: JWT signature does not match locally computed signature解决及UnsupportedJwtException:Signed Claims JWSs are not supported
    浅析request.getInputStream()得到的流及接参流程
  • 原文地址:https://www.cnblogs.com/ahwu/p/3440321.html
Copyright © 2011-2022 走看看