【发布时间】：2012-10-19 18:25:36
【问题描述】：
对于冗长的解释提前道歉。我觉得这个画得最好！ :P
假设我有 10 个绝对 (css) 放置在彼此之上的 div。每个 div 包含几个透明的 png，它们也相互叠加，共同形成一个视觉整体。我当时只显示 1 个 div，用户可以通过单击箭头或按钮切换到下一个 div。这个箭头/按钮包含一个标签，它告诉我下一个要显示的 div，因此我通过 javascript 隐藏了所有 div，然后在此之后显示适当的。
为什么在大多数浏览器中会这么慢？有没有更好的方法来做这样的事情？ IE 和 Firefox 似乎可以快速流畅地切换 div，而 Chrome 显示延迟。以下是 html 和 javascript 的概述：
HTML：
<div id="div1" class="active generic">
<img src="sample00.png" width="1000" height="564" class="a1" />
<img src="sample01.png" width="1000" height="564" class="a2" />
<img src="sample02.png" width="1000" height="564" class="a3" />
<img src="sample03.png" width="1000" height="564" class="a4" />
<img src="sample04.png" width="1000" height="564" class="a5" />
</div>
<div id="div2" class="generic">
<img src="sample05.png" width="1000" height="564" class="a1" />
<img src="sample06.png" width="1000" height="564" class="a2" />
<img src="sample07.png" width="1000" height="564" class="a3" />
<img src="sample08.png" width="1000" height="564" class="a4" />
<img src="sample09.png" width="1000" height="564" class="a5" />
</div>
等等……
Javascript：
a++;
var gen = $('.generic');
var div = $('#div' + a);
gen.hide().removeClass('activeFrame');
div.show().addClass('activeFrame');
对于任何人来说，给出更好的解决方案可能都太模糊了。但是如果有人可以向我解释为什么这在某些浏览器/低端系统上会很慢以及我如何能够解决这个问题，我可以利用这些知识自己思考一些事情（或者接受它就是这样） .
【问题讨论】：
-
使用链式方法样式
$('.generic').hide().removeClass('active'); -
将 $('.generic') 和 $('#div' + a) 存储为变量可能会更快，以避免返回 DOM 以分别获取它们两次。或者像之前的评论一样链接。
-
diEcho：我编辑了它，现在使用它。它并没有真正表现得更快，但当然这是更好的做法:) 感谢 dougajmcdonald，我会这样做！
-
知道为什么它在 IE 上运行得更快吗？是不是因为 IE 应该使用显卡来渲染网页？
-
为什么不使用一个 img 元素而只更改
src属性？不过先预加载图片，或者使用精灵。
标签： javascript html css dom html-rendering