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 回答