javascript - 幻灯片的预加载图像没有按预期更快地呈现
问题描述
我创建了一个图像轮播,并希望预加载图像只是为了更快的渲染和更好的用户体验。但是加载速度似乎并没有那么快。我可以看到文件正在加载到 windows/chrome 的缓存文件夹中,但看起来浏览器仍然没有从那里获取它们,而是从图像所在的 js 文件中获取它们。
window.onload = function () {
const europeMap = []
for (let pic of countries) {
const photo = pic.imagebig.split("/")[1]
europeMap.push(photo)
}
const pics = [...europeMap, ...images]
for (var i = 0; i < pics.length; ++i) {
let imageObject = new Image();
imageObject.onload = function () {
console.log(`${pics.length} images loaded!`);
}
imageObject.src = `images/${pics[i]}`;
}
}
解决方案
推荐阅读
- django - 为包含相同多对多关系子集的对象过滤 django
- reactjs - 使用 imageSharp 卡在 Gatsby 中的 GraphQl 查询
- powerbi - 从第1页的切片器中选择日期后,第2页的切片器设置为“日期+1个月”
- linux - 根据行号排除/忽略(不删除)第一行和最后一行
- android-graphview - 自定义的 Android GraphView x 轴日期标签未按 setNumHorizontalValues() 显示
- php - 会话后标头位置输出为空
- php - 使用参数排序(查询生成器)
- dependency-injection - 使用 lombok 与 Inject 构造函数之间的区别
- c# - 如何在主菜单中创建可以通过在关卡中收集更多硬币来增加的硬币 GUI 标签?
- svg - SVG 不使用 inkscape 命令行打开,但使用 gui 打开