webpack4 H5 loading页图片预加载

WytheChan
  • 766

问题描述

H5图片比较多的项目,常规做法都需要做一个loading页,在进入H5之前就需要把所有图加载完,我以前的做法是再JS那里先写好每张图的路径,再用一个函数创建一个img标签来加载。
我开始学习用wepack4来构建项目了,不再用以前直接引用JQ就开干的做法,现在问题是在webpack的入口文件写图片路径是会报错的,在HTML里引入就没问题,用的url-loader只是打包时有用吧。

问题出现的环境背景及自己尝试过哪些方法

相关代码

以前预加载的代码

var imgSrc = [
    'img/loading.png',
    'img/banner.jpg',
    'img/t1.png',
    'img/t2.png',
    'img/t3.png',
    'img/t4.png',
    'img/p1-text1.png',
    'img/p1-text2.png',
    'img/p1.jpg',
    'img/flag.png',
    'img/play.png',
    'img/p2-p1.png',
    'img/p2-p2.png',
    'img/p2-p3.png',
    'img/p2-p4.png',
    'img/p2-t1.png',
    'img/p2-t2.png',
    'img/p2-t3.png',
    'img/p2-t4.png',
    'img/p2-tc.png',
    'img/p2-text1.png',
    'img/p2-text2.png',
    'img/p3-text1.png',
    'img/p3-text2.png',
    'img/p3-text4.png',
    'img/p3-text3.png',
    'img/p3-text5.png',
    'img/p4-bottom.png',
    'img/p4-text1_2.png',
    'img/p4-text2.png',
    'img/poster-2.png'
];

perload2(imgSrc, function () {
    $('.loading').hide()
    $('#container').show()  
    
})

//图片预加载
function perload2(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++
            var num = parseInt((c / imgSrc.length) * 100);
            var poress = num + '%'
            $('.loading_num').text(poress) //百分比
            if (c == imgSrc.length) {
                $('.loading_num').text('100%')

                if (callback) {
                    setTimeout(function () {
                        callback();
                    }, 500)
                }
            }
        }
    }
    return imgs; //返回加载的图片列表,这个省略也没有问题
}

以前项目的效果图:
图片描述

现在我webpack关于图片的配置

{ //处理图片
        test: /\.(png|jpg|gif|jpeg)/,
        use: [{
          loader: 'url-loader',
          options: {
            limit: 500,
            outputPath: 'img' //打包后图片的存放路径
          }
        }]
      },
      {
        test: /\.(htm|html)$/i,
        use: ['html-withimg-loader']
      },

你期待的结果是什么?实际看到的错误信息又是什么?

现在在main.js入口文件引入图片的报错信息:
图片描述

不可能我每一张图片都应import引入吧,大家在用webpack做H5的时候,这个loading页的问题是怎么解决的?

文件目录:
图片描述

回复
阅读 2.6k
4 个回答

等大佬来解答

目录层级看一下
不过应该能通过webpack的reslove配置来解决

你用js这样导入图片,webpack本地开发是没有你这个目录的,本地开发应该是也会打包出一个dist目录用于浏览器访问的,这个目录是你浏览器能访问的静态资源,像/img/...肯定没有这个目录的,而且img也有hash值,怎么样都不能对的。你试下这样?

var imgSrc = [
    require('./img/loading.png')
];

可以看下我的解决方案。现在是用一段node爬取文件夹收集图片生成js文件到项目中,再在index.js中引入动态创建标签引入这个js文件拿到图片列表,逐一请求,使后边用到的图片缓存。虽然解决了但是不美观,将来会修改成 在处理图片的部分 写个loader 收集使用的片 生成图片列表的json文件到 图片目录下。再通过plugin在html文件中写入预加载的js.https://github.com/outsourcin... 可以看下交流下。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏