从服务器中的文档中获取HTML元素，并在客户端中动态显示它们 [英] Get HTML elements from a document in the server and show them dynamically in the client
问题描述
我正在制作一个应用程序，用于向没有Internet访问的无线局域网中的大约50位观众显示同步的HTML5幻灯片.
I am making an application for showing a synchronized HTML5 slideshow to about 50 spectators in a wireless LAN with no internet access.
我在一台计算机上运行一个Node.js服务器，并通过Socket.IO与50个客户端连接(顺便说一句，其中只有一台控制演示文稿).
I run a Node.js server in one of the computers and connect with the 50 clients via Socket.IO (Btw, only one of them controlls the presentation).
硬件是家用无线802.11b/g路由器和50个移动设备(平板电脑，上网本，智能手机).
The hardware is a domestic wireless 802.11b/g router and 50 mobile devices (tablets, netbooks, smartphones).
幻灯片放映开始时，由于客户端必须同时将完整的幻灯片放映发送给所有客户端，因此客户端观看该幻灯片所需的时间太长(对于5 MB幻灯片，大约需要10分钟或更长时间). /p>
我的幻灯片显示如何
When the slideshow starts, it takes too long (about 10 minutes or more for a 5 MB slideshow) for the clients to see it, since the router has to send the complete slideshow to all the clients at the same time.
<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元素加载为空.
What I would like to do
At the beginning, I would like to load the slides-container element completely empty.
然后，当我浏览幻灯片时，我想从服务器获取代表下一张幻灯片的div，并将其附加到DOM上，这样，只有在这样做之后，客户端才开始下载图片和其他内容仅适用于该幻灯片(因此，大大减少了我的网络过载).
Then, as I advance through the slideshow, I'd like to GET from the server the div representing the next slide, and append it to the DOM so that only when that is done, the client starts to download the pictures and othet stuff only for that slide (thus, decreasing significantly my network overload).
另一个相关的事实是，幻灯片(包括slidesplayer.js)是由外部软件自动生成的，该软件将PowerPoint演示文稿解析为HTML5格式，并且我们将使用PowerPoint中已经制作的很多演示文稿.
Another relevant fact is that the slideshow (including the slidesplayer.js) is automatically generated from an external software that parses PowerPoint presentations to this HTML5 format and that we will use a lot of presentations that are already made in PowerPoint.
我的第一印象是我应该使用jQuery-ajax来完成此操作，但是我不知道该怎么做才是好方法，因为我的想法只是将div.slide元素复制到单独的文件中.
My first impression is that I should accomplish this by using jQuery-ajax, but I don't know exactly how to do it the good way, since my idea is just copying the div.slide elements in separate files.
更新:此答案建议在显示之前使用jQuery进行DOM操作.似乎每次您操作DOM对象时jQuery都会请求资源，即使该对象未插入到当前DOM中也是如此.因此，一种可能的解决方案是仅使用字符串.您可以在 this 和
Update: This answer suggests using jQuery for DOM manipulation before displaying. It seems that jQuery requests the resources everytime you manipulate a DOM object, even if it is not inserted into your current DOM. So, one possible solution would be working only with strings. You can see more about this issue in this and this questions.
推荐答案
操纵DOM元素将导致浏览器下载资源，即使您没有在其中插入使用该资源的元素也是如此.您的DOM.
As I said in the question, manipulating DOM elements will cause the browser to download the resources, even if you don't insert the elements that use that resources in your DOM.
就我而言，我能做的最好的解决方案是使用某种延迟加载至少用于img标签(但可以很容易地扩展到其他标签，例如audio和video).
In my case, the best solution I could make was to use some sort of lazy loading at least for the img tags (but it could be easily extended for other tags, such as audio and video).
我所做的是替换为src属性并替换为另一个名称(在本例中为xsrc)，并向所有img标签添加了一个自定义的空src属性.
What I did was replacing replacing the src attribute with another name (xsrc in this case) and adding a custom empty src attribute to all img tags.
<img id="someImg" src="#" xsrc="foo.png"></img>
然后，在需要下载图像时，使用jQuery我将src属性值更改为xsrc的值.
Then, with jQuery I changed the src attribute value to that of xsrc whenever I needed to dowload the image.
// When I want the image to be downloaded from the server
$('#someImg').attr( 'src' , $('#someImg').attr('xsrc') )
您可以在我已经提到的问题(此和
You can see more about the idea behind this in the questions I already mentioned (this and this).
这篇关于从服务器中的文档中获取HTML元素，并在客户端中动态显示它们的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
