语境
我有一个 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 也是如此。你可以看到我在这个问题中做了什么。