RPiWin10IoT上的Javascript和DOM操作效率-JavascriptandDOMmanipulationefficiencyonRPiWin10IoT

I've created a slideshow application with asp.net (C#) and html5/css3/Javascript (w/ a bit of jQuery). I'm trying to display this on a Raspberry Pi 2 device running Windows 10 (IoT version) inside the Windows Universal WebView component.

我用asp.net(C#)和html5 / css3 / Javascript(带有点jQuery)创建了一个幻灯片应用程序。我试图在Windows Universal WebView组件中运行Windows 10(IoT版本)的Raspberry Pi 2设备上显示它。

I'm having issues with slides lagging. My slideshow is based off of one div with 3 background images:

我遇到了幻灯片滞后的问题。我的幻灯片演示基于一个带有3个背景图像的div:

1. The top image is the slide image. Displayed with background-size: contain.

顶部图像是幻灯片图像。显示背景大小:包含。

2. The middle image is a transparent gradient meant to lay over the bottom image for affect.

中间的图像是一个透明的渐变,旨在覆盖底部图像的影响。

3. The bottom image is server generated on image upload and is a zoomed and blurred image meant to give a kind of gradient splash mapping of color hot zones. Any image artifacts left from this process are smoothed by image #2.

底部图像是在图像上传时生成的服务器,是一个缩放和模糊的图像,旨在提供一种颜色热区的渐变溅射映射。图像#2对从该过程留下的任何图像伪像进行平滑处理。

I switch the background image with one line of code:

我用一行代码切换背景图像:

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

Works great in my browser, however, on the Raspberry Pi the bottom image with middle image overlayed displayed way before the top image.

在我的浏览器中工作得很好,但是,在Raspberry Pi上,底部图像与中间图像重叠显示在顶部图像之前。

I have had to do a couple things to make this work with the Raspberry Pi and Webview component, I only list these because they might be causing my problem:

我不得不做几件事来使用Raspberry Pi和Webview组件,我只列出这些因为它们可能导致我的问题:

• After changing the background image, I have to set the slide element's display property to none, then back to block to redraw the background image else it won't change.

更改背景图像后,我必须将幻灯片元素的显示属性设置为无,然后返回到块以重绘背景图像,否则它将不会更改。

• I'm preloading images by loading a bunch of JS Image objects with paths specified by webservice, then waiting for each image to finish reporting .onload to start the slideshow.

我通过加载一堆带有webservice指定的路径的JS Image对象来预加载图像,然后等待每个图像完成报告.onload以启动幻灯片放映。

The whole application is pretty lightweight. If needed I can provide it but there must be something simple I'm missing. I don't know the efficiency if I were to load each image in a separate element and then set z-indexs. Nor do I know if the efficiency would increase by letting the images load in separate slides behind the current one. This is why the question is asking about DOM manipulation and Javascript. At any rate, thanks for reading this long explanation and hopefully you can help!

整个应用程序非常轻量级。如果需要我可以提供它,但必须有一些我想念的简单。如果我要在单独的元素中加载每个图像然后设置z-indexs,我不知道效率。我也不知道是否通过让图像加载到当前幻灯片后面的单独幻灯片来提高效率。这就是为什么问题是询问DOM操作和Javascript。无论如何,感谢您阅读这篇长篇解释,希望您能提供帮助!

1 个解决方案

$(function($){

var $slides = $('.slide');
  
function transition(){
    var $current = $('.slide.showing'),
        $next = $('.slide[data-number="' + parseInt($current.data('number') + 1) + '"]');
    if (!$next.length) {
        $next = $('.slide[data-number="1"]');
    }
    requestAnimationFrame(function(){
      $current.removeClass('showing');
      $next.addClass('showing');
    });
}
  
setInterval(transition, 1000);

})($);

.slide {
  width: 99%;
  height: 99%;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  display: none;
  margin: 0 auto;
}

.slide.showing {
  display: block;
}

one
two
three