HTML5 进度条 - 浏览器加载大图片

Question

我使用 HTML5 和 CSS 创建了一个包含大文件图片的幻灯片页面。问题是它们需要大约一分钟才能加载。如果图像尚未完全加载，幻灯片将不会转到下一张幻灯片。

我想添加一个用户在后台加载时看到的进度条。

这是代码的基础：

http://tutorialzine.com/2010/09/html5-canvas-slideshow-jquery/

有什么建议吗？

我对 JavaScript 的了解非常有限，这就是我试图找到 HTML5 和 CSS3 答案的原因。

Answer 1

一个想法 - 如果你想避免 JS，然后用 css3 将图像旋转到一边，然后裁剪它，使其看起来像一个进度条（你甚至可以添加 CSS 过滤器以使其成为一种颜色）。

加载时（由于 CSS 旋转，从左到右而不是从上到下），它看起来像一个“进度”栏。

在没有 JS 的情况下加载时没有真正的提示方式。