全屏HTML信息亭應用程序的內存/性能問題

Question

我必須構建一個信息亭應用程序，該應用程序本質上是一堆全屏圖像，帶有一些交互式頁面，在它們之間也應該是可全屏滑動的。

硬件環境將是平板電腦和32英寸觸摸屏的混合體。 平板電腦將由站在展位上的家伙來處理，展示將免費提供給所有人。 我們可能將使用連接到觸摸屏的Win 8 Pro平板電腦和Windows PC。

這樣，我可以使用在Chrome的Kiosk模式下全屏運行的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以解決上述問題嗎？ 還是您知道我應該看看的任何方法/工具/框架？

Answer 1

我無法使用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);

全屏HTML信息亭應用程序的內存/性能問題

問題描述

1 個解決方案

解決方案1
0 2014-05-13 16:42:51

全屏HTML信息亭應用程序的內存/性能問題

問題描述

1 個解決方案

解決方案1 0 2014-05-13 16:42:51

解決方案1
0 2014-05-13 16:42:51