我使用 HTML5 和 CSS 创建了一个大文件图片的幻灯片页面。问题是它们需要大约一分钟的时间来加载。如果图像没有完全加载,幻灯片将不会转到下一张幻灯片。
我想添加一个进度条,让用户在后台加载时看到它。
这是代码的基础:
http://tutorialzine.com/2010/09/html5-canvas-slideshow-jquery/
有什么建议吗?
我的 JavaScript 知识非常有限,这就是为什么我试图找到 HTML5 和 CSS3 的答案。
最佳答案
一个想法 - 如果你想避免 JS,然后使用 css3 将图像横向旋转,并将其裁剪成一个进度条(你甚至可以添加 CSS 过滤器使其成为一种颜色)。
加载时(由于 CSS 旋转,从左到右而不是从上到下),它看起来像一个“进度”栏。
在没有 JS 的情况下加载时没有真正的提示方式。
关于css - HTML5 进度条 - 浏览器加载大图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13710803/