背景

Question

背景

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

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

顶部图片是幻灯片图片。显示为background-size: contain。
中间图像是一个透明渐变，旨在覆盖效果的底部图像。
底部图片是在图片上传时生成的服务器，是一个缩放和模糊的图像，旨在提供一种颜色热区的渐变溅射映射。图像＃2平滑了此过程中留下的任何图像瑕疵。

问题

我用一行代码切换背景图片：

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

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

的异常

我必须做一些事情来使用Raspberry Pi和Webview组件，我只列出这些因为可能导致我的问题：

更改背景图片后，我必须将slide元素的display属性设置为none，然后返回block以重绘背景图像，否则它不会改变。
我通过加载一堆JS Image对象来预加载图像，这些对象具有webservice指定的路径，然后等待每个图像完成报告.onload以开始幻灯片放映。

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

Answer 1

像这样：http://jsfiddle.net/utwqsb45/或者如果你喜欢

＆＃13;

#example-wrapper

＆＃13;

$(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);

})($);

＆＃13;

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

＆＃13;

RPi Win10 IoT上的Javascript和DOM操作效率

背景

问题

的异常

1 个答案: