Question

我正在使用Nivo Slider Nivo Slider作为图像轮播。但是，我需要嵌入一个powerpoint演示文稿，因此我将所有幻灯片转换为总计大约3.5 MB的JPG图像。现在加载所有图像需要一段时间。但是在加载时，包含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就绪事件，此时外部资源如图像可能无法完整加载。

当加载包括图像在内的所有资源并准备好呈现页面时，窗口加载事件就会发生。

在nivo滑块中，他们使用以下样式：

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

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

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

1 个答案: