谷歌浏览器是可以的。在IE中我能看到闪烁。解决方案在本贴底部。
我认为一个视频版本会比所有图像都要快速压缩和加载,但正如@Allendar所建议的绘制,它将是最传输效率高的。我建议使用画布或SVG。
另一种仅使用图像的方法是将各个组件作为图像或图标字体放置在显示器上,并在脚本中打开或关闭它们的位置。但那是一个非常复杂的解决方案。
我认为你今天解决问题的最简单和最快速的方法是调整你已有的解决方案。正如其他人所建议的那样,多图像方法不会非常高效,如果你要采用这种方法,请确保在Web服务器上设置缓存头以永久缓存;
Cache-Control: public
Expires: Mon, 31 Dec 2035 12:00:00 GMT
好的,那么闪烁问题只是IE渲染引擎中的一个错误/低效率问题,因此这里提供一种使用不同方法的解决方法。
基本上,将一个绝对定位的DIV
覆盖在body
上,而不是使用body
本身。实际上,在这种情况下,我们使用多个DIV
,每个图像都有一个并且它们相互重叠。您也可以在脚本中创建这些节点。
其次,再添加另一个DIV
用于您的内容,并将其覆盖在body
上。
<body>
<div id="b100" class="background" style="background-image:url('http://ingodwetrustthemovie.com/bgImage/100.jpg')"></div>
<!-- rest omitted -->
<div id="b113" class="background" style="background-image:url('http://ingodwetrustthemovie.com/bgImage/113.jpg')"></div>
<div id="content">
<div id="test">test div</div>
here is some text
</div>
</body>
它们只是一个接一个地显示,然后隐藏其余的;
function switchImage() {
var s = $(window).scrollTop()/10;
var index = Math.floor(s / 5);
$('.background').hide();
$('.background').eq(index).show();
}
我怀疑调整CSS显示选项会比更改src属性更不容易出现闪烁,而且它似乎起到了作用。
当然,您可能仍需要优化代码,以便首先显示第一个加载的图像而不是纯背景,但我认为这演示了修复原理。
您还可以考虑制作非常大的CSS Sprite,将图像捆绑成一个巨大的条带,然后使用background-position
。那可能会在body
标签本身上起作用。当然,这意味着在显示任何图像之前要下载一个巨大的文件,但有两个优点;
- 一张图片(尤其是具有相似性的图片)将比每个单独的图片孤立地压缩得更好。
- 使用相同的缓存指令,一旦您第一次获取图像,那只有一个HTTP / GET / 302周期,而不是13个,因此您的页面可能仍然加载得更快。
SVG
SVG元素的工作方式类似于DOM。如果您可以将内容作为SVG传递,则可以进入图形,定位元素,为其分配ID等,并像处理任何其他DOM元素一样对其进行操作。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<ellipse id="e1" cy="420" cx="200" rx="420" ry="30" style="fill:3f5566" />
<ellipse id="e2" cy="420" cx="170" rx="390" ry="20" style="fill:4f5566" />
<ellipse id="e3" cy="420" cx="145" rx="370" ry="15" style="fill:5f5566" />
<ellipse id="e4" cy="420" cx="100" rx="370" ry="20" style="fill:6f5566" />
<ellipse id="e5" cy="420" cx="45" rx="300" ry="15" style="fill:8f5566" />
</svg>
这是另一个根据滚动条隐藏/显示SVG元素的
示例。
最好假设设计师已将图形生成为“层”,请尝试让设计师提供一份SVG,其中将这些层转换为
组。例如,Adobe Illustrator可以
实现。
然后,您可以根据需要轻松关闭层/组以创建动画效果。