Question

我正在用html创建一个演示文稿。它应该像MS Office中的powerpoint。它将包含所有幻灯片的预览，并且将在窗口中一次显示一张幻灯片。我有一个幻灯片列表，可以通过Javascript与他们一起玩。我可以将它们缩小到预览中。

关于显示的一张幻灯片： 我想知道在一个包装器div中复制所有显示的幻灯片是否更好，并通过设置display属性逐个显示它们。或者，如果将一张幻灯片一次复制到此包装器div中会更好。

为了清楚起见......我得到了类似的东西

<body>
 <div class="slide">/*slide stuff*/</div>
 <div class="slide">/*slide stuff*/</div>
 <div class="slide">/*slide stuff*/</div>
 <div class="slide">/*slide stuff*/</div>
</body>

我把它转换成这个

<body>
 <div id=preview>
  <div class="slide" id="1">/*slide stuff*/</div>
  <div class="slide" id="2">/*slide stuff*/</div>
  <div class="slide" id="3">/*slide stuff*/</div>
  <div class="slide" id="4">/*slide stuff*/</div>
 </div>
 ...

现在我应该通过更改显示属性来显示它们。所以html继续这样：

...
 <div id="mainwindow">
  <div class="slide" id="p1" display="none">/*slide stuff*/</div>
  <div class="slide" id="p2" display="none">/*slide stuff*/</div>
  <div class="slide" id="p3" display="none">/*slide stuff*/</div>
  <div class="slide" id="p4" display="none">/*slide stuff*/</div>
 </div>
</body>

或者我应该将mainwindow div设为空并在每次幻灯片更改时将幻灯片复制到其中？

...
 <div id="mainwindow">
 </div>
</body>

请感谢任何关于两种解决方案的速度的评论（如果幻灯片包含其他标签），并且由于它是学校作业，我想知道什么解决方案被认为是“更干净”和/或更“专业”。

Answer 1

使用element.style.display隐藏将比转到下一张幻灯片时复制元素快得多。复制需要更改DOM，这总是比简单地隐藏元素更昂贵。

我能看到的唯一情况是，当你有数百张幻灯片的订单时。页面的剪切大小可能会使浏览器变慢。

是否可以通过style.display隐藏或复制整个DIV更快？

1 个答案: