0

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

A）将数据存储在一个数组中并在幻灯片出现时创建dom元素（主要是图像和文本的div），在消失时删除

或者

B）在页面加载时创建所有div（已经从服务器端）并在z-index周围移动它们（使用显示/可见性属性）？

可能影响选择的因素：

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

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

- - - - 更新 - - - - -

另一个相关的问题（因为我已经得到了一个“接近”的投票，所以我不敢开始另一个像这样的线程，最好在这里继续）：

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

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

4

3 回答 3

2

最好在初始 DOM 加载时加载所有元素。当您移动“浏览器可见”图像的 z-indexes 时，您将使用大量资源“绘画”，因为谷歌开发工具将其称为“绘画”，这根本不会表现得很好。浏览器仍然必须“绘制”每个图像。使用hide()和show()。基本上设置display:none; . 浏览器不必在 DOM 中绘制隐藏元素。

编辑：问题更新：下面的答案回答了您的 iFrame 问题，但没有解决您关于占用资源的问题。我不知道 chrome 如何处理 iFrame，但是如果您的所有脚本都在一个页面上，则由浏览器使用系统端资源来处理数据。Chrome 的 V8 引擎在多线程 js 进程方面表现出色。我会说有两个页面，不仅双功能工作会添加资源，chrome 可能无法在 iFrames 中对多个脚本进行多线程处理。不确定，但有可能。

编辑：问题更新：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;
        }
    });
}
于 2013-11-06T16:33:06.070 回答
1

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

如果您要预加载很多内容，您可以选择保持显示的图像直到它们全部加载或设置某种标志，以便如果您想要操作，则从当前加载的图像池中挑选下一个图像尽快，

简单的图像预加载器：

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

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

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

否则，您将使用多个 z 索引，如果您有 50 .. 这也可以简单地扩展到任意数量的图像。

我不能确定速度方面，但我的猜测是除非机器功率非常低，否则它不会很明显。

如果您将元素滑入，UL / LI 布局将起作用。将 UL 设置为 position:absolute 并调整 style.left 以显示下一个。同样，您可以为每个图像设置一个 LI，或者只设置 2 个并按照上述方式进行操作 - 例如，如果您的图像是 100 像素宽，则将 UL 设置为 200 像素，并使用包含 100 像素宽度的遮罩 DIV。 侧滑滚轮布局示意图 在 LI no.2 中加载图像 2，然后将 UL 左侧从偏移量 0 转换为 -100px，显示 #2。然后将相同的图像 2 加载到 LI no.1 并将 UL 的 style.left 设置回 0 - 重复该过程..

于 2013-11-06T17:02:31.163 回答
0

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

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

于 2013-11-06T16:41:59.807 回答