Javascript 如何在ioinc 4上为图像设置预加载背景 我的问题是如何在图像加载之前设置背景色（预加载）

我正在用

爱奥尼亚4.1

构建一个电子商务移动应用程序。问题是页面上的图像太多，因此当它被加载时，应用程序看起来丑陋

我使用

ion img

标签进行延迟加载甚至会让事情变得更糟加载前的图像显示一个破损标记--然后正常加载

我搜索了这个，发现了一个名为

ionic image loader

的库，所以我尝试了一下，但不幸的是，它不适用于ionic 4

我需要的是这样的东西！如果你打开这篇文章，我需要相同的效果，发生在图像加载时

---

[编辑]

所以我做了一些研究，得出了这个结果：

window.onload=function（）{
var placeholder=document.querySelector（'.placeholder'），
small=占位符.querySelector（'.img small'）
//1：加载小图像并显示它
var img=新图像（）；
img.src=small.src；
img.onload=函数（）{
small.classList.add（'loaded'）；
};
//2：加载大图像
var imgLarge=新图像（）；
imgLarge.src=placeholder.dataset.large；
imgLarge.onload=函数（）{
setTimeout（函数（）{imgLarge.classList.add（'loaded'）；}，2000）；
};
占位符.appendChild（imgLarge）；
}

占位符{
背景色：#f6f6f6；
背景尺寸：封面；
背景重复：无重复；
位置：相对位置；
溢出：隐藏；
}
.占位符img{
位置：绝对位置；
不透明度：0；
排名：0；
左：0；
宽度：100%；
过渡：不透明度1s线性；
}
.占位符img.loaded{
不透明度：1；
}
.img小型{
过滤器：模糊（50px）；
/*这是必要的，所以Safari保持锋利的边缘*/
变换：比例（1）；
}

Ionic现在有一个内置的叫做（ion skeleton text）的功能，具有相同的动画和所有内容，我使用它。实际上，我的问题是，当使用ion img加载图像时，图像需要给它一个背景，比如媒体。Comi如果你打开这篇文章，你会明白我的意思，看看图像是如何加载的？！