美文网首页
web网页图片预加载,并显示加载进度

web网页图片预加载,并显示加载进度

作者: 风筝啊 | 来源:发表于2019-05-06 17:43 被阅读0次

如果是图片多的H5,可以加一个loading动画,预加载需要用到的图片。

        //图片加载方法
        function load(imgSrc,callback) {
            var imgs = [];
            var c = 0;
            for (var i = 0; i < imgSrc.length; i++) {
                imgs[i] = new Image();
                imgs[i].src = imgSrc[i];
                imgs[i].onload = function(){
                    c++
                    if(callback){
                        callback(c,imgSrc);
                    }
                }
            }
            return imgs;
        }
        //需要操作这里的方法
        function imgStatus(n,imgSrc){
            //加载进度百分比 (加载数量 / 图片数量 * 100)
            var loadImgNum = parseInt(parseFloat(n / imgSrc.length).toFixed(2) * 100);
            //做加载动画处理
            console.log( loadImgNum );

            //如果加载完成执行
            if(n == imgSrc.length){
                console.log('ok');
            }
        }

        //图片列表(可以替换成网络图片,图片越多效果越明显)
        var imgList = [
            '5cc69f249ae6f.jpg',
            '5cc69f2394f4d.jpg',
            '5cc69f2284c11.jpg',
            '5cc69f21ae754.jpg',
            '5cc69f25a3474.jpg',
            '5cc69f26b71ec.jpg',
            '5cc69f27c78d2.jpg',
            。。。
        ];

        //调用
        load(imgList,imgStatus);

相关文章

  • web网页图片预加载,并显示加载进度

    如果是图片多的H5,可以加一个loading动画,预加载需要用到的图片。

  • Canvas下

    一、绘制img/video图片预加载,获取图片文件,顾名思义,WEB中的预加载就是在网页全部加载之前,对一些主要内...

  • 图片预加载、瀑布流+图片预加载

    图片预加载 图片预加载是为了解决网络卡等一些其他情况造成该显示的图片不能及时的显示,但为了提高网页的完整性,给未能...

  • 前端图片加载优化

    预加载 图片预加载可以提高用户体验,对于图片画廊和图片占比很大的网页内容尤其重要 css预加载 利用css的bac...

  • JavaScript--预加载与延迟加载

    JavaScript--预加载与延迟加载 1. 预加载:就是页面打开,图片什么的都加载好了(优先显示图片) 2. ...

  • 网页图片预加载

    正常情况下,网页加载图片会从上到下像"瀑布"一样加载出来,而预加载就是等所有图片加载完毕后一次性将图片显示出来,提...

  • 场景加载管理

    通常的场景加载(切换)过程如下: 从场景A要进入场景B 系统显示加载界面,显示场景B的预加载进度 场景B加载完成,...

  • Android带顶部进度条和标题的自定义WebView

    1.简介 开发中经常用到WebView加载网页,加载时需要显示进度条和网页标题,下面提供一个自动加载进度条和标题的...

  • FlatList显示图片列表

    需求: 加载网络图片,列表形式展示,并缓存不显示的item不加载图片正在加载的图片,取消加载(不显示情况下) 参考...

  • JS

    JS 懒加载,预加载 概念:懒加载也叫延迟加载:JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片。预加...

网友评论

      本文标题:web网页图片预加载,并显示加载进度

      本文链接:https://www.haomeiwen.com/subject/gbpdoqtx.html