javascript - webpack可以按需加载图片么？

问题描述

问 题

webpack可以按需加载图片么？

之前弄图片按需加载（也叫懒加载），就是把需要的图片都push到数组里，然后当满足某个条件（比如图片外容器出现在可视区域），就把数组里的图片插入到src地址里。

**而webapck里有require.ensure()方法可以异步按需加载JS和html模板，达到按需加载一些遮罩层、弹出层的目的，但是webpack貌似操作不了html里的src,

那么具体要怎么做能按需加载图片？望解答拜谢!

**

解决方案

require.ensure可以按需加载图片的呀,只是这里ensure的资源必须是确定的静态资源
比如说有图片 1.png, 2.png, 3.png，你想根据情况异步加载这些图片，应该这样写
if (..) require.ensure(['1.png'], function(require) {..})
if (..) require.ensure(['2.png'], function(require) {..})
if (..) require.ensure(['3.png'], function(require) {..})
而不能这样写：
var a = '1.png'
var b = '2.png'
var c = '3.png'
require.ensure([a], function(require) {..}) // 这里不能使用变量的形式
require.ensure([b], function(require) {..}) // 这里不能使用变量的形式
require.ensure([c], function(require) {..}) // 这里不能使用变量的形式

补充：
require.ensure这种异步加载资源，是为了减小打包后的文件大小

这篇关于javascript - webpack可以按需加载图片么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！