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