RPi Win10 IoT上的Javascript和DOM操作效率 出身背景

我已经用asp.net（C#）和html5/css3/javascript（带有一点jQuery）创建了一个幻灯片应用程序。我正试图在运行Windows 10（物联网版本）的Raspberry Pi 2设备上，在Windows Universal WebView组件中显示这一点

我的幻灯片有问题。我的幻灯片是基于一个div和3个背景图像：

顶部图像为幻灯片图像。以

背景尺寸显示：包含

中间图像是一个透明的渐变，用于覆盖底部图像以产生效果

底部图像是服务器在图像上传时生成的，它是一个缩放和模糊的图像，用于提供一种颜色热区的渐变飞溅贴图。此过程中留下的任何图像瑕疵都将通过图像#2平滑

问题 我用一行代码切换背景图像：

slide.style.backgroundImage = "url(" + slides[slideIndex % slides.length] + "), " +
                              "url(../images/egg-shell.png), " +
                              "url(" + blurred[slideIndex % blurred.length] + ")";

在我的浏览器中效果很好，但是，在Raspberry Pi上，底部图像与中间图像重叠显示在顶部图像之前

异常 为了使Raspberry Pi和Webview组件能够正常工作，我不得不做一些事情，我只列出了这些，因为它们可能会导致我的问题：

• 更改背景图像后，我必须将幻灯片元素的“显示”属性设置为“无”，然后返回“块”以重新绘制背景图像，否则它不会更改
• 我通过加载一堆具有webservice指定路径的JS

  Image

  对象来预加载图像，然后等待每个图像完成报告

  。onload

  开始幻灯片放映

---

整个应用程序相当轻量级。如果需要，我可以提供它，但一定有一些简单的我错过了。如果将每个图像加载到单独的

元素中，然后设置z-indexs，我不知道效率如何。我也不知道如果让图像加载到当前幻灯片后面的单独幻灯片中，效率是否会提高。这就是为什么这个问题是关于DOM操作和Javascript的。无论如何，感谢您阅读这篇冗长的解释，希望您能提供帮助

像这样：或者如果你愿意

$（函数（$）{
变量$slides=$（'.slide'）；
函数转换（）{
变量$current=$（'.slide.showing'），
$next=$（'.slide[data number=“'+parseInt（$current.data（'number'）+1）+''“]）；
如果（！$next.length）{
$next=$（'.slide[data number=“1”]”）；
}
requestAnimationFrame（函数（）{
$current.removeClass（'showing'）；
$next.addClass（'showing'）；
});
}
设置间隔（转换，1000）；
})($);
。幻灯片{
宽度：99%；
身高：99%；
位置：绝对位置；
排名：0；
右：0；
左：0；
底部：0；
显示：无；
保证金：0自动；
}
.幻灯片.放映{
显示：块；
}

一
二
三个
如果要预加载所有内容，为什么不在每张幻灯片中使用一个元素？这也为您提供了各种在幻灯片之间切换的好选择。如何切换以获得最佳性能？Translate3d将利用硬件加速，但与z索引相比，在RPi上可能太难了。但我也不知道，最好的取决于WebView的实现，而你可能需要对它进行实验。对于即时转换，您可能需要在回调中隐藏最后一张幻灯片，并使用CSS显示下一张幻灯片。如果不清楚，我可以写一个简单的例子。请写。我会试试看它是否有效。请记住，Windows Universal WebView组件以IE11文档模式呈现（附带一些注意事项）。Css3动画在RPi上运行非常慢。我探索的大多数可行的解决方案都没有通过这两个类别中的一个（IE11兼容性或对RPi来说足够有效）。我已经有了类似的解决方案，但它不起作用。我在制作幻灯片方面没有问题。我在使幻灯片中的图像（使用CSS3多个背景堆叠）一次加载时遇到问题，即使使用预加载，似乎绘制图像花费的时间太长。您是否尝试过通过将三张图像绝对放置在一个容器中来堆叠它们？是的，但这不起作用，因为图像具有动态大小，因此将主幻灯片图像居中将非常困难。最后，我删除了中间图像，并将底部元素设置为绝对位置，然后将顶部图像设置为显示块，最大宽度和最大高度设置为
100%
和边距：auto！但仍然存在性能问题。我将尝试加载事件驱动的动作（我已经做了，但我还要重构几次lol）哦，你可以将普通图像放在一个固定宽度的容器中：我认为更大的问题是欺骗WebView将图像预加载到它从哪个缓冲区中提取，如果你让它们在屏幕外“可见”（比如在顶部：-1000px），然后将它们移动到视图中，这是可能的？大概