向下滚动页面加载图片的js

小鱼儿 2022-01-06 13:37 259阅读 0赞

js代码 scroll.photo.js :

window.imgscroll = {
        options: {
            target: null, //插入图片的目标位置
            img_list: null, //图片数组 [{ url: "/CMF01_000.jpg"},{ url: "/CMF01_001.jpg"}]
            img_max: 0, //图片数量
            img_num: 0, //图片累计已加载的数量
            step_max: 3, //每轮加载图片的数量 从0开始计数
            step_num: 0, //每轮已加载图片的数量
            img_obj: new Image(),
            s_scroll: 0, //滑动条的Y轴位置
            w_height: 0, //页面内容的高度
            l_height: 500, //小于此参数则开始加载图片
            w_width: 640 //浏览器窗口宽度
        },
        onLoad: function(){
            if(this.options.img_num >= this.options.img_max){
                $("#img_load").hide(); //隐藏loading图标
                return;
            }
            this.options.img_obj.src = this.options.img_list[this.options.img_num].url;
            this.options.img_obj.onload = function(){
                imgscroll.endLoad(this.width);
            };
        },
        endLoad: function(width){
            width = this.options.w_width > width? width+"px": "98%";
            this.options.target.append('<div style="text-align:center;color:#999;padding-bottom:10px;"><img src="'+this.options.img_list[this.options.img_num].url+'" width="'+width+'"><br /><span>'+ (this.options.img_num+1) +'/'+ this.options.img_max +'</span></div>');
    　　　　 this.options.img_num += 1;
            if(this.options.step_num < this.options.step_max){
         this.options.step_num += 1;
                this.onLoad();
            }else{
                //结束一轮加载后将每轮已加载图片数量归零
                this.options.step_num = 0;
            }
        },
        beLoad: function(target,img_list){
            this.options.target = target;
            this.options.img_list = img_list;
            this.options.img_max = img_list.length;
            this.options.l_height = $(window).height()*2;
            this.options.w_width = $("body").width();
            //绑定滑动条的判定
            $(window).scroll(function(){
                imgscroll.options.s_scroll = $(window).scrollTop();
                imgscroll.options.w_height = $("body").height();
                if((imgscroll.options.w_height-imgscroll.options.s_scroll) < imgscroll.options.l_height){
                    if(imgscroll.options.step_num < 1) imgscroll.onLoad();
                }
            });
            this.onLoad();
        }
    
    };

页面代码 :

<!DOCTYPE html>
    <html>
    <head>
        <title>向下滚动页面加载图片</title>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
        <script type="text/javascript" src="js/scroll.photo.js"></script>
        <script type="text/javascript">var imglist = [{ url: "CMF01_000.jpg"},{ url: "CMF01_001.jpg"},{ url: "CMF01_002.jpg"},{ url: "CMF01_003.jpg"},{ url: "CMF01_004.jpg"},{ url: "CMF01_005.jpg"},{ url: "CMF01_006.jpg"}];
    
            $(function(){
                imgscroll.beLoad($("#img_list"),imglist);
            });
        </script>
    
    </head>
    <body style="background:#444;padding-top:20px;">
        <div id="img_list"></div>
        <div id="img_load" style="text-align:center;color:#AAA;"><img src="loading.gif" /><br /><span>少女读取中...</span></div>
    </body>
    </html>

转载于:https://www.cnblogs.com/caly/p/3168956.html

发表评论取消回复

表情：

评论列表（有 0 条评论，259人围观）

还没有评论，来说两句吧...

相关阅读

相关 js滚动加载

迎大家一起交流学习n(\*≧▽≦\*)n 效果： ![20190910110637264.gif][] **html** <div> <d...

Dear 丶/ 2024年04月18日 17:30/ 0 赞/ 38 阅读

相关 Vue向下滚动加载更多数据-scroll-案例

vue-infinite-[scroll][] 安装 npm install vue-infinite-scroll --save > 尽管官方也推荐了几

男娘i/ 2022年09月03日 14:25/ 0 赞/ 870 阅读

相关滚动加载图片（懒加载）实现原理

本文主要通过以下几方面来说明懒加载技术的原理，个人前端小菜，有错误请多多指出一、什么是图片滚动加载？　　通俗的讲就是：当访问一个页面的时候，先把img元素或是其他元素的

﹏ヽ暗。殇╰゛Y/ 2022年05月17日 05:35/ 0 赞/ 290 阅读

相关原生JS的（可视区域，向上滚动向下滚动两种）图片懒加载

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

Love The Way You Lie/ 2022年05月10日 06:28/ 0 赞/ 142 阅读

相关基于Jquery的（可视区域，向上滚动向下滚动两种）图片懒加载

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

ゞ浴缸里的玫瑰/ 2022年05月10日 06:24/ 0 赞/ 164 阅读

相关 js图片（加载已经滚动的区域的图片）懒加载的实现方法

这种方法，会加载已经滚动区域的所有图片，比如进入页面就到了底部，那么整个页面的图片都会加载。区别于[JS实现可视区域懒加载][JS] 、[Jquery实现可是区域懒加载][

﹏ヽ暗。殇╰゛Y/ 2022年05月10日 06:00/ 0 赞/ 163 阅读

相关 js实现一个长页面中的图片懒加载即滚动到其位置才加载

[js实现一个长页面中的图片懒加载即滚动到其位置才加载][js] <!DOCTYPE html> <html> <head>

谁借莪１个温暖的怀抱￠/ 2022年04月24日 04:40/ 0 赞/ 80 阅读

相关向下滚动页面加载图片的js

js代码 scroll.photo.js : window.imgscroll = { options: { target:

小鱼儿/ 2022年01月06日 13:37/ 0 赞/ 260 阅读

相关 Taro-定位及向下滚动加载

定位使用 `Taro` 提供的API // 提前将微信小程序的JSSDK准备好放到项目中 import AAMapWX from '../../../

- 日理万妓/ 2021年08月30日 21:59/ 0 赞/ 786 阅读

相关滚动加载图片（懒加载）实现原理

本文主要通过以下几方面来说明懒加载技术的原理，个人前端小菜，有错误请多多指出一、什么是图片滚动加载？通俗的讲就是：当访问一个页面的时候，先把`img`元素或是其他元

àì夳堔傛蜴生んèń/ 2021年06月26日 16:06/ 0 赞/ 635 阅读