即时创建dom元素或隐藏/显示

Question

在幻灯片应用程序中哪个性能更好，

A）在数组中存储数据并创建dom元素（主要是图像和文本的div），当要显示幻灯片时，删除何时消失

或者

B）在页面加载时创建所有div（已经从服务器端创建）并在z-index下移动它们（使用display / visibility属性）？

可能影响选择的因素：

1）幻灯片可以是5或50，这两种方法对于小/大幻灯片是否更受欢迎？

2）在幻灯片之间切换时将使用过渡效果，如果在当前幻灯片下隐藏了45个其他幻灯片（显示/可见性css）或堆叠的z-index明智，则使用例如淡入淡出会更耗费资源吗？或者浏览器渲染页面有多少其他对象无关紧要？

-------更新---------

另一个相关的问题（因为我已经有一个＆＃34;关闭＆＃34;对此投票我不敢开始像这样的另一个线程，最好继续这里）：

我在同一页面上有多个幻灯片。目前我通过IFRAME解决它（我知道，没有人再喜欢它们了，但他们为我做了诀窍）。

现在，我对浏览器/客户端资源感到好奇，让两个IFRAME同时运行单独的文档和脚本进程更加贪婪，或者将两个幻灯片保存在一个DOM中并运行更贪婪那里有两个幻灯片吗？

Answer 1

最好加载初始DOM加载的所有元素。当你移动“浏览器可见”图像的z索引时，你将使用大量资源“绘画”，因为谷歌开发工具会调用它。它根本不会表现得非常好。浏览器仍然需要“绘制”每个图像。使用隐藏（）和隐藏（）。基本上设置 display：none; 。浏览器不必在DOM中绘制隐藏元素。

编辑：问题更新：以下答案回答了您的iFrame问题，但未解决有关占用资源的问题。我不知道chrome如何处理iFrame，但是如果你的所有脚本都在一个页面上，那么它就可以通过浏览器使用系统端资源来处理数据。 Chrome的V8引擎在多线程js进程中令人惊叹。我要说两页，不仅双功能工作添加资源，chrome可能无法在iFrame中多线程多线程。不确定，但它有可能。

编辑：问题更新：iFrames？可怕。当你可以让你的JS动态时，让两个脚本异步运行是不好的。例如。

第一页的代码：

var imgArray = [];
function fetchImageArray() {
    $.ajax({
        url:"thispagesimages.php"
        success: function(data) {
            imgArray = data.imgs;
        }
    });
}

第二页：

var imgArray = [];
function fetchImageArray() {
    $.ajax({
        url:"thatpagesimages.php"
        success: function(data) {
            imgArray = data.imgs;
        }
    });
}

或动态功能 - 无iFrame。 单页提取功能

function fetchImageArray(urlg, ss) {
    $.ajax({
        url: urlg
        data: {whichSlideShow: ss}
        success: function(data) {
            return data.imgs;
        }
    });
}

Answer 2

如果您有图像和文字，我会预先加载图像并将每张幻灯片的文本存储在一个数组中。它取决于幻灯片之间的转换效果，以及我如何在DOM中设置它们。

如果您正在预加载很多，您可以选择保持暂停图像，直到它们全部加载或设置某种标记，以便从当前加载的图像池中选取下一个图像，如果你想尽快采取行动，

简单图像预加载器：

twdc.preloadimage = function(imagepath) {
var oImg = new Image();     
oImg.onload = function(){}
oImg.src = imagepath;
}

您可以使用onload函数将图像路径推送到一个完全加载的图像数组中，并使滚轮循环完成。

如果我正在逐渐淡出一个，那么我只有两个幻灯片元素 - 用较低的Z-index加载DIV中的下一张幻灯片（或其他任何内容）然后淡出当前幻灯片，显示下一个。然后我将背景幻灯片的内容复制到前台（用户不会注意到这一点）并将其不透明度设置为100.然后你可以重复这个过程。

否则你正在捣乱多个z指数，如果你有50 ..这也只是缩放到任意数量的图像。

我无法确定速度方面，但我的猜测是，除非机器电量非常低，否则不会引人注意。

如果您正在滑动元素，则UL / LI布局将起作用。将UL设置为position：absolute并调整style.left以显示下一个。同样，您可以为每个图像设置一个LI，或者只有2并按上述方式执行 - 例如，如果您的图像宽度为100px，则使用包含100px宽度的屏蔽DIV将UL设置为200px。 在LI no.2中加载图像2然后将UL从偏移0转移到-100px，显示＃2。然后将相同的图像2加载到LI no.1中并将UL的style.left设置为0 - 重复该过程..

Answer 3

我的建议是将数据保存在一个数组中，并保留生成页面的缓存，其中包括当前可见页面和相邻页面。这样，当用户导航到页面时，页面将顺利转换，因为它们已经加载。

当用户切换页面时，从缓存中删除最远的页面，并按用户导航的方向生成下一页。您可以在jQuery动画函数（例如fadeIn()，fadeOut()，slideUp()等）中执行此操作。