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

标签 css html progress-bar

我使用 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/

相关文章:

html - 在具有动态高度的垂直居中的 div 上垂直滚动

c# - AJAX 进度条显示页面加载的加载进度百分比

javascript - 根据数据属性值获取 <tr> 中的输入元素

html - CSS 似乎不影响 TD 结构

css - 将 div 居中并使其在固定容器内滚动

css - 位置固定且top>0时的隐藏内容

html - 用背景图像覆盖正文

html - 什么是 CSS 网格系统?

c# - 带有命令模式部分 -1 的进度条 C#

java - 根据视频长度倒计时器