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>
  • 相关阅读:
    Powershell数据处理
    Powershell About Active Directory Group Membership of a domain user
    Powershell About Active Directory Server
    Oracle Schema Objects——Tables——TableStorage
    Oracle Schema Objects——Tables——TableType
    English Grammar
    Oracle Database Documentation
    Oracle Schema Objects——Tables——Oracle Data Types
    Oracle Schema Objects——Tables——Overview of Tables
    What is Grammar?
  • 原文地址:https://www.cnblogs.com/ahwu/p/3440321.html
Copyright © 2011-2022 走看看