1

コンテクスト

1つのワイヤレスルーターを使用して、国内LAN内の50のクライアント間で同期するように設計されたHTML5 + CSS+JSスライドショーがあります。

問題

スライド（主に写真）の内容が重すぎる可能性があるため、現在サイトはすべてのスライドのすべてのファイルをから取得するため、スライドごとに動的にロードします（たとえば、クライアントが[次へ]ボタンをクリックするとき）。ページがロードされたときの最初のサーバー、ルーターの過負荷。

この質問（同じ問題に対する別のアプローチ）では、ユーザーがAJAXを使用してDOMのみを取得し、そのコンテンツを動的にロードすることを提案しました。それにもかかわらず、コンテンツは私が望む瞬間の前にロードされるので、彼の解決策は私にはうまくいきません。

このAJAXベースのアプローチは正しいですか？もしそうなら、私は何を間違っているのでしょうか？

私のコード

slideshow.html（スライドショー構造）

<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 calling a function defined in slidesplayer.js
    </script>
  </body>
</html>

slideshow-placeholder.html（スライドショーのURLを入力すると読み込まれます）

<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="/path/to/ajaxSlidesScript.js"></script>
  </head>
  <body>
    <h1>Hello slides!</h1>
  </body>  
</html>

ajaxSlidesScript.js

$(document).ready(function() {
  $.ajax('/path/to/slideshow.html', {
    async : false,
    complete : function ajaxCallback(slidesDOM) {

      // Pull out the individual slides from the slideshow HTML
      $slides = $(slidesDOM.responseText).find('.slide');

      // For each one ...
      $slides.each(function prepareSlide() {

        // Store a reference to the slide's contents        
        var $slideContent = $($(this).html());  // <--- GETs all the files for this slide which I want to avoid.

        // Empty the contents and keep only the slide element itself
        var $slideWrapper = $(this).empty();

        // Attach to focus event handled by the slideware
        $slideWrapper.appendTo('body').on('focus', function injectContent() {
        // Put the content in — NOW external resources should be downloaded via GET and loaded, not before.
          $slideWrapper.append($slideContent);
        });
      });
    }
  });
});

更新： DOMオブジェクトを操作すると、DOMにリソースを挿入しなくてもリソースがダウンロードされるため、このアプローチは機能しません。この質問で私が何をしたかがわかります。

4

1 に答える 1

0

Ajax は、あなたの問題に適した技術であると確信していますが、私が見る限り、あなたの問題は単純です。

<script src="javascripts/slidesplayer.js"></script>
<link rel="stylesheet" href="/stylesheets/style.css">

このコードでは、CSS ファイルを既に読み込んでおり、この CSS ファイルで参照されているすべての画像が最初に直接読み込まれるため、ajax を使用するかどうかは問題ではありません。さらに、すべてのファイルを非同期でロードする必要があります。

JavaScript を介してタグを追加<img>し、画像を非同期で読み込むことができます...

于 2012-12-26T15:40:09.533 に答える