• 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>
  • 相关阅读:
    状态机的常见问题
    基于quartus的高级时序分析
    FPGA中的时钟域问题
    quartus中的时序约束常用方法
    时序约束与时序分析
    FPGA的PCB设计
    AXI4的主机协议代码分析
    selenium 笔记 场景判断
    Codeforces Round #676 (Div. 2) XORwice、Putting Bricks in the Wall、Palindromifier
    Trap HDU
  • 原文地址:https://www.cnblogs.com/ahwu/p/3440321.html
Copyright © 2020-2023  润新知