0

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

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

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

4

1 回答 1

0 
$(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;
}

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

于 2012-07-19T23:49:00.333 回答