Fullscreen HTML kiosk應用程序的內存/性能問題

我必須建立一個自助服務終端應用程序，它基本上是一些全屏圖像，帶有一些交互式頁面，也是全屏，介於兩者之間，應該可以滑動。Fullscreen HTML kiosk應用程序的內存/性能問題

硬件環境將混合使用平板電腦和32英寸觸摸顯示器。這些平板電腦將由站在展臺上的傢伙處理，顯示屏可供所有人免費使用。我們可能會使用Win 8 Pro平板電腦和連接到觸摸顯示器的Windows PC。

這樣我就可以用HTML/JS/CSS在Chrome's Kiosk Mode上全屏運行來構建應用程序。我正在考慮使用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解決上述問題？或者你知道任何方法/工具/框架，我應該看看嗎？

來源

2014-05-13 taymless

你可能是在一個棘手的時間，因爲在內存中存儲如此多的大圖像（未壓縮的位圖）是一定要去佔用空間。嘗試使用IE11的內存分析器，爲初學者。（另外，您可以首先確定您計劃使用的平板電腦具有1920x1080屏幕，而不是像素更少嗎？） – Katana314

這可能有所幫助 - http://help.dimsemenov.com/kb/royalslider-jquery-plugin -faq /滑塊性能的提示 –

我不能RoyalSlider幫助，但它確實上榜的特色之一：

內存管理

庫只保存在顯示列表中的幾張幻燈片，並且不使用「克隆」技術來節省移動設備上的內存。

這很好;正如您已經注意到的那樣，將每張圖像同時加載到內存中可能會出錯。相反，您應該只使用利用瀏覽器緩存。

您的應用程序和服務器需要允許緩存圖像;如果不是，請改變它們，以便它們能夠做到。

然後訣竅是將圖像放入緩存中......。

這是一個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);

來源

2014-05-13 16:42:51

Fullscreen HTML kiosk應用程序的內存/性能問題

回答

相關問題