從服務器中的文檔中獲取HTML元素，並在客戶端中動態顯示它們

Question

上下文

我正在申請在沒有互聯網接入的無線局域網中向大約50名觀眾展示同步的HTML5幻燈片。

我在其中一台計算機上運行一個Node.js服務器，並通過Socket.IO與50個客戶端連接（順便說一句，只有其中一個控制演示文稿）。

硬件是國內無線802.11b / g路由器和50個移動設備（平板電腦，上網本，智能手機）。

問題

幻燈片啟動時，客戶端需要花費太長時間（大約10分鍾或更長時間才能播放5 MB幻燈片），因為路由器必須同時向所有客戶端發送完整的幻燈片。

我的幻燈片看起來如何

<html>
  <head>
    <title>My Slideshow</title>
    <script src="javascripts/slidesplayer.js"></script>
    <link rel="stylesheet" href="/stylesheets/style.css">
  </head>

  <body>    
    <div id="slides-containter">

      <div class="slide" id="slide_1">
        <!--Contents such as images, text, video and audio sources -->
      </div>

      <div class="slide" id="slide_2">
        <!--Contents -->
      </div>

      <!--A bunch of slides here-->

    </div>
    <script>
      // Here I load the slides
    </script>
  </body>
</html>

我想做什么

一開始，我想將slides-container元素加載完全為空。

然后，我通過幻燈片前進，我想從服務器獲取div表示下一個幻燈片，並追加到DOM所以，只有當做到這一點，客戶端開始下載圖片和othet東西只對於那張幻燈片 （因此，顯着減少了我的網絡過載）。

另一個相關的事實是幻燈片（包括slidesplayer.js ）是從外部軟件自動生成的，該軟件將PowerPoint演示文稿解析為HTML5格式，並且我們將使用許多已在PowerPoint中制作的演示文稿。

我的第一印象是我應該通過使用jQuery-ajax來實現這一點，但我不知道如何以好方式完成它，因為我的想法只是將div.slide元素復制到單獨的文件中。

更新： 這個答案建議在顯示之前使用jQuery進行DOM操作。 似乎jQuery每次操作DOM對象時都會請求資源，即使它沒有插入到當前的DOM中。 因此，一種可能的解決方案是僅使用字符串。 你可以看到更多的關於這個問題在這個和這個問題。

Answer 1

一種解決方案是將其視為前端解決方案。 前端應該可以說只吃任何時候都可以吃的東西。

我假設它是外部資源（圖像等），而不是幻燈片標記本身構成5MB的大部分，在這種情況下，DOM不應該嘗試在需要之前調用這些資源。

我建議將整個幻燈片文檔提供給ajax調用，但只在每個幻燈片調用時引入標記。 像這樣的東西：

$.ajax('path/to/slides', {
  async:    false,
  complete: function ajaxCallback(slidesDOM){
    // Pull out the individual slides from your slideshow HTML 
    $slides = $(slidesDOM).find('.slide');

    // For each of these...
    $slides.each(function prepareSlide(){
      // Store a reference to the slide's contents
      var $slideContent = $($(this).html());
      // Empty the contents and keep only the slide element itself
      var $slideWrapper = $(this).empty();

      $slideWrapper
        // Put the slide where you want it
        .appendTo('.slidesContainer')
        // And attach some kind of event to it 
        // (depending on how your slideware works, you might want to bind this elsewhere)
        .on('focus', function injectContent(){
          // Put the content in — NOW external resources will load
          $slideWrapper.append($slideContent);

          // Unbind this function trigger
          $slideWrapper.off('focus', injectContent);
        });
    })
  }
});

Answer 2

1）您不應該使用SocketIO來傳輸有效負載。 插座是為低負載而制造的。 如果您需要傳輸en-masse，我建議使用標准的HTTP AJAX請求。 然后，您可以使用Socket.IO來控制您所在的幻燈片。

2）嘗試AngularJS。 他們基本上已經完成了關於視圖切換的所有想法（這基本上就是你在做什么）。 他們有一個很棒的教程，這很有幫助。

3）為簡化Socket調用，我建議在客戶端和服務器端使用ConversationJS。

Answer 3

正如我在問題中所說，操縱DOM元素將導致瀏覽器下載資源，即使您沒有在DOM中插入使用該資源的元素。

在我的情況下，我可以做的最好的解決方案是至少對img標簽使用某種延遲加載（但它可以很容易地擴展到其他標簽，如audio和video ）。

我所做的是用另一個名稱替換src屬性（在本例中為xsrc ），並為所有img標簽添加一個自定義的空src屬性。

<img id="someImg" src="#" xsrc="foo.png"></img>

然后，使用jQuery，每當我需要下載圖像時，我將src屬性值更改為xsrc值。

// When I want the image to be downloaded from the server
$('#someImg').attr( 'src' , $('#someImg').attr('xsrc') )

您可以在我已經提到過的問題中看到更多關於這背后的想法（這個和這個）。

從服務器中的文檔中獲取HTML元素，並在客戶端中動態顯示它們

問題描述

上下文

問題

我的幻燈片看起來如何

我想做什么

3 個解決方案

解決方案1
2 2012-12-21 15:16:16

解決方案2
1 2012-12-21 15:05:02

解決方案3
1 已采納 2013-01-03 15:36:01

從服務器中的文檔中獲取HTML元素，並在客戶端中動態顯示它們

問題描述

上下文

問題

我的幻燈片看起來如何

我想做什么

3 個解決方案

解決方案1 2 2012-12-21 15:16:16

解決方案2 1 2012-12-21 15:05:02

解決方案3 1 已采納 2013-01-03 15:36:01

解決方案1
2 2012-12-21 15:16:16

解決方案2
1 2012-12-21 15:05:02

解決方案3
1 已采納 2013-01-03 15:36:01