文章/答案/技术大牛

发布

社区首页 >问答首页 >Fullscreen HTML kiosk应用程序的内存/性能问题

问Fullscreen HTML kiosk应用程序的内存/性能问题
EN

Stack Overflow用户

提问于 2014-05-13 23:14:11

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

我必须建立一个kiosk应用程序，本质上是一堆全屏图像与一些互动页面，也全屏，在之间，应该是可滑动的。

硬件环境将是平板电脑和32英寸触摸屏的混合。平板电脑将由站在展台前的人操作，显示器将免费供每个人使用。我们可能会使用Win 8 Pro平板电脑和Windows PC，它们都与触摸屏相连。

这样，我就可以在Chrome's Kiosk Mode中构建全屏运行的HTML/JS/CSS应用程序。我在考虑使用RoyalSlider，它可以很好地将图片和html幻灯片结合在一起，并且可以很好地使用触摸输入。

所有的图像都会有1920 x 1080的分辨率，大约有200个。构建一个原型，我看到这将RoyalSlider推向了极限。

问题是，我要么将numImagesToPreload设置为较小的值，导致图像在滑动太快时无法立即准备就绪，要么将numImagesToPreload设置为较高的值，最终导致浏览器使用大量内存，然后在我尝试滑动第一页时立即崩溃。

这是我做的原型

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">

    <link rel="stylesheet" href="royalslider/royalslider.css">
    <link rel="stylesheet" href="royalslider/skins/default/rs-default.css"> 

    <script src="royalslider/jquery-1.8.3.min.js"></script>
    <script src="royalslider/jquery.royalslider.min.js"></script>

    <style type="text/css">
        html,body,div {
            margin:0; padding:0;
        }

        html, body {
            width: 100%;
            height: 100%;
            overflow:hidden; // to avoid scrollbars
        }

        .royalSlider {
            position: absolute;
            width: auto;
            height: auto;
            left: 0px;
            top: 0px;
            right: 0px;
            bottom: 0px;
        }
    </style>

    <script type="text/javascript">

        function processXML () {
            var xml = loadXML("data.xml");

            var xmlDoc = $.parseXML(xml);
            var $xml = $(xmlDoc);

            $xml.find('page').each(function(index)
            {
                var src = $(this).find('src').text();
                var ext = src.split('.').pop();

                var newElement = 'None';

                if (ext === 'html') 
                {
                    newElement = loadHTMLFile(src);
                }
                else if (ext === 'jpg' || ext === 'jpeg' || ext === 'png') 
                {
                    newElement = '<img src="' + src + '" />';
                };

                $('.royalSlider').append(newElement);
            });
        }

        function loadHTMLFile (filename) {
            return loadFile(filename, 'html');
        }

        function loadXML (filename) {
            return loadFile(filename, 'xml');
        }

        function loadFile (filename, filetype) {
            return $.ajax({
                type: "GET",
                url: filename,
                dataType: filetype,
                async: false
                }).responseText;
        }
    </script>
</head>
<body>
    <div class="royalSlider rsDefault">
    </div>

    <script>
        jQuery(document).ready(function($) {
            processXML();

            $(".royalSlider").royalSlider({
                controlNavigation: 'none',
                arrowsNav: false,
                navigateByClick: false,
                autoScaleSlider:false,
                autoHeight: false,
                imageScaleMode: 'none',
                slidesSpacing: 0
            });
        });
    </script>
</body>

和我的data.xml的一小段

<?xml version="1.0" encoding="utf-8"?>
<content>
<page>
    <src>fullhd/page_001.jpg</src>
</page>
<page>
    <src>fullhd/page_002.jpg</src>
</page>
<page>
    <src>fullhd/page_003.jpg</src>
</page>
<page>
    <src>fullhd/page_004.jpg</src>
</page>
...
</content>

有人知道我如何优化RoyalSlider来解决上面的问题吗？或者你知道有什么方法/工具/框架是我应该看一下的吗？

html

performance

memory

fullscreen

javascript

回答 1

Stack Overflow用户

发布于 2014-05-14 00:42:51

我对RoyalSlider无能为力，但它确实将此列为功能之一：

内存管理

Gallery只在显示列表中保留了几张幻灯片，并且没有使用“克隆”技术来节省移动设备上的内存。

这很好；正如您已经注意到的，同时将每个图像加载到内存中可能会出错。相反，您只需利用浏览器缓存即可。

您的应用程序和服务器需要允许对图像进行缓存；如果不允许，请对其进行更改。

然后诀窍就是把图像放到缓存中。。

这是一个jQuery解决方案，它可以自动将每个图像放入缓存(我还没有测试过它)。它加载一个图像，删除它，然后移动到下一个图像：

var urls = ['img001.jpg', 'img002.jpg'],
    $image;

function loadImage(i) {

    if ($image) {
        // unload the image (but now its in the browser cache)
        $image.remove();
    }

    var url = urls[i];
    if (!url) {
        // no more images
        return;
    }

    $image = $('<img>', { src: urls[i], style: 'display: none' }).on('load', function () {
        // done loading this image; move to next one
        loadImage(i + 1);
    });

    // add the image to the DOM to make it load
    $(document.body).append($image);
}

loadImage(0);

票数 0

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

原文链接：

https://stackoverflow.com/questions/23635168

复制

相似问题

问Fullscreen HTML kiosk应用程序的内存/性能问题
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Fullscreen HTML kiosk应用程序的内存/性能问题EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Fullscreen HTML kiosk应用程序的内存/性能问题
EN