我可以在 javascript 图像轮播加载 36 张图像时显示加载指示器吗？

Question

我使用 Nivo Slider Nivo Slider 作为图像轮播。但是，我需要嵌入一个 powerpoint 演示文稿，所以我将所有幻灯片转换为 JPG 图像，总共大约 3.5 MB。现在加载所有图像需要一段时间。但是在加载时，包含的 div 区域是完全空的并显示页面背景。

我的问题是我是否可以在加载所有 36 张图片时显示某种加载指示器。另一种可能的选择是延迟加载图像，以便仅加载第一张图像，当用户单击下一个箭头转到下一张图像时，它会加载等等。这些选项中的任何一个都可能吗？

编辑：响应下面的评论 - 图像加载了静态 img 标签

Answer 1

$(window).load(function() { 
    //all resources including external are loaded
    //remove loading messages and fadein presentation
    }); 

$('#presentation img').load(function(){
    //track individual image load
    //you can keep a gloabl count and increment as each image load is triggered
    });

对于延迟加载：

将图像位置保留为 Json，然后随时随地创建图像元素并附加到演示文稿。

编辑

上面提到的是一般方法，但是对于 nivo 滑块，看起来他们已经有了加载指示器和东西，你还在寻找什么？是否错过了添加加载图像？

解释：

当关联的 html 页面完全加载到浏览器并创建相应的 DOM 时，会发生 DOM 就绪事件，此时可能无法完全加载图像等外部资源。

当包括图片在内的所有资源都加载完毕并且页面准备好渲染时，window load 事件发生。

在 nivo 滑块中，他们使用这种样式：

.theme-default .nivoSlider img {
    display: none;
    left: 0;
    position: absolute;
    top: 0;
}

所以现代浏览器默认不加载图像，因为它的显示是无的。 window.load 将在所有图像实际加载之前触发（它们不需要显示页面，因为它们是隐藏的）