2012-07-19 79 views
0

我使用Nivo Slider Nivo Slider作为图像传送带。但是,我需要嵌入PowerPoint演示文稿,因此我将所有幻灯片转换为总共大约3.5 MB的JPG图像。现在需要一段时间才能加载所有图像。但在加载时,包含的div区域完全是空的,并显示页面背景。我可以显示一个加载指标,而javascript图像传送带加载36图像?

我的问题是我是否可以在加载全部36张图像时显示某种加载指示。另一个可能的选择是执行延迟加载的图像,以便仅加载第一个图像,并且当用户单击下一个箭头以转到下一个图像时,它会加载等等。这些选项中的任何一个都可能?

编辑:在回答下面的评论 - 图像加载静态的img标签

+0

两者都是可能的,请指定如何加载图像,是静态img标签还是加载了javascript? – sabithpocker 2012-07-19 23:38:21

+0

@sabithpocker - img的标签 – devcoder 2012-07-19 23:39:37

+0

为什么不直接显示加载指示器,直到DOM被加载?这不是非常用户友好的,但对于一个演示文稿,这应该是好的... – Amit 2012-07-19 23:47:39

回答

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就绪事件发生时,此时外部资源的开发等图像可能无法fullt加载。

当包括图像在内的所有资源都被加载并且页面已准备好呈现窗口加载事件时。

在NIVO滑块,他们使用这种样式:

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

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

+0

嗯,我不熟悉JavaScript代码写作。我不知道什么JavaScript代码来做这个东西会看起来像。有没有可以指给我的教程? 我现在看到这个http://nivo.dev7studios.com/support/jquery-plugin-usage/部分的含义。我认为它提到了轮播中的单个图像加载。我认为这可能会解决我的问题。 – devcoder 2012-07-20 00:05:14