1

语境

我有一个 HTML5+CSS+JS 幻灯片,旨在通过一个无线路由器在国内 LAN 中的 50 个客户端之间同步。

问题

由于幻灯片的内容(主要是图片)可能太重,我想为每张幻灯片动态加载它们(例如,当客户端单击“下一步”按钮时),因为目前该站点从服务器在开始加载页面时,使路由器超载。

这个问题(同一问题的另一种方法)中,用户建议我使用 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">

使用这段代码,是否使用 ajax 并不重要,因为您已经加载了 CSS 文件,并且此 CSS 文件中引用的所有图像都直接在开头加载。此外,您应该异步加载所有文件。

您可以<img>通过 JavaScript 添加标签并异步加载图像...

于 2012-12-26T15:40:09.533 回答