文章/答案/技术大牛

发布

社区首页 >问答首页 >RPi Win10 IoT上的Javascript和DOM操作效率

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

Stack Overflow用户

提问于 2015-10-28 18:03:54

回答 1查看 74关注 0票数 0

背景

我用asp.net (C#)和html5 5/css3 3/javascript (w/ bit of jQuery)创建了一个幻灯片应用程序。我试图在组件中运行Windows 10 ( WebView版本)的Raspberry 2设备上显示这一点。

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

顶部图像是幻灯片图像。用background-size: contain显示。
中间图像是一种透明的渐变，用于放置在底部图像上。
底层图像是在图像上传时生成的服务器，是一种缩放模糊的图像，目的是给出一种彩色热点区域的梯度飞溅映射。这个过程中留下的任何图像工件都会被图像#2平滑。

问题

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

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

在我的浏览器中工作很好，然而，在Raspberry上，底部图像与中间图像重叠显示的方式在顶级图像之前。

异常

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

更改背景图像后，我必须将幻灯片元素的显示属性设置为none，然后返回块重新绘制背景图像，否则不会更改。
我正在预装图像，方法是用webservice指定的路径加载一组JS Image对象，然后等待每个图像完成报告.onload以启动幻灯片显示。

整个应用程序非常轻量级。如果需要，我可以提供它，但肯定有一些简单的东西，我错过了。如果我将每个映像加载到一个单独的<img>元素中，然后设置z-索引，我就不知道效率了。我也不知道通过将图像加载到当前幻灯片后面的不同幻灯片中，效率是否会提高。这就是为什么问题是关于DOM操作和Javascript的。无论如何，谢谢你阅读了这篇长篇解释，希望你能帮上忙！

javascript

performance

dom

background

raspberry-pi

回答 1

Stack Overflow用户

发布于 2015-10-28 19:22:59

就像这样：http://jsfiddle.net/utwqsb45/或者你喜欢的话

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="slide showing" data-number="1">one</div>
<div class="slide" data-number="2">two</div>
<div class="slide" data-number="3">three</div>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/33398399

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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