ContextI have a HTML5+CSS+JS slideshow designed to be synchronized between 50 clients in a domestic LAN with one wireless router.ProblemSince the contents of the slides (mainly pictures) may be too heavy, I want to load them dynamically for each slide (e.g. as the client clicks a "next" button), since currently the site GETs all the files for every slide from the server at the beginning when the page is loaded, overloading the router.In this question (another approach for the same problem) an user suggested me using AJAX to get only the DOM and then loading its contents dynamically. Nevertheless, his solution doesn't work for me, as the contents are loaded before the moment I want to.Is this AJAX based approach correct? If so, what may I be doing wrong?My codeslideshow.html (slideshow structure)\[code\]<html> <head> <title>My Slideshow</title> <script src="http://stackoverflow.com/questions/14042634/javascripts/slidesplayer.js"></script> <link rel="stylesheet" href="http://stackoverflow.com/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>\[/code\]slideshow-placeholder.html (loaded when I enter to the slideshow URL)\[code\]<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="http://stackoverflow.com/path/to/ajaxSlidesScript.js"></script> </head> <body> <h1>Hello slides!</h1> </body> </html>\[/code\]ajaxSlidesScript.js\[code\]$(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
Avoid GET of all contents of the HTML DOM
- Thread starter Anastasia
- Start date