Delay data that browser gets
<p>To start, i don't know if this is the right category for it. If not please tell me.</p>

<p>I'm making a website that is basically a big automatic powerpoint presentation.</p>

<p>I load in all the images and videos, and show them 1 by 1.</p>

<p>However i have a problem...</p>

<p>It was al working well in the beginning. But now i'm about 60% done of filling in all the photos and videos. And now my videos wont load in to the website anymore.</p>

<p>I went on and checked the Network traffic, and saw the following:</p>

<p><a href="https://i.stack.imgur.com/tN9ph.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tN9ph.png" alt="Network Traffic"></a></p>

<p>As you can see, it loads all of the images (Wich is true because that is the only thing is see). And it cancels all the Media (Wich is also true because i only get a black screen then). </p>

<blockquote>
  <p>Is there a way to add a delay to what the browser gets?</p>
</blockquote>

<p>For example one Slide is minimal 6 seconds long. And in those 6 seconds i only show 1 image. but the website asks for all of them to load.</p>

<p>If you want to see the code, below here is an short version. However you might not need that.</p>

<p>The code i have for the slideshow (A short version)</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;VASIG | Innotrans 2016&lt;/title&gt;
        &lt;link rel="stylesheet" href="Css/style.css"&gt;
        &lt;script src="scripts/jquery-3.1.1.min.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div id="wrapper"&gt;
            &lt;div id="background"&gt;
&lt;!--
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@ High Speed @@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
--&gt;
        &lt;!--
        @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
        @@@@@@ Asset Optimization @@@@@@
        @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
        --&gt;
                &lt;div class="slide" data-timing=12 data-fadein=0.5 data-fadeout=0.5&gt;
                    &lt;div id="begin"&gt;
                        Asset Optimization&lt;br /&gt;
                        &lt;b&gt;Condition Based Wheelset Maintenance Planning&lt;/b&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="slide" data-timing=16 data-fadein=0.5 data-fadeout=1 data-videopause=false&gt;
                    &lt;header&gt;Asset Optimization - Condition Based Wheelset Maintenance Planning&lt;/header&gt;
                    &lt;video autoplay&gt;
                        &lt;source src="media/I_High_Speed/I_3/I-3_HighSpeed_01.mp4" type="video/mp4"&gt;
                    &lt;/video&gt;
                &lt;/div&gt;
                &lt;div class="slide" data-timing=6 data-fadein=0.5 data-fadeout=0.5&gt;
                    &lt;header&gt;Asset Optimization - Condition Based Wheelset Maintenance Planning&lt;/header&gt;
                    &lt;img src="media/I_High_Speed/I_3/HighSpeed-I-3-1_Wheelset-maint_set-summary.png" /&gt;
                &lt;/div&gt;
                &lt;div class="slide" data-timing=6 data-fadein=0.5 data-fadeout=0.5&gt;
                    &lt;header&gt;Asset Optimization - Condition Based Wheelset Maintenance Planning&lt;/header&gt;
                    &lt;img src="media/I_High_Speed/I_3/HighSpeed-I-3-2_Wheelset-maint_set-configuration.png" /&gt;
                &lt;/div&gt;
                &lt;div class="slide" data-timing=21 data-fadein=0.5 data-fadeout=0.5 data-videopause=true&gt;
                    &lt;header&gt;Asset Optimization - Condition Based Wheelset Maintenance Planning&lt;/header&gt;
                    &lt;video autoplay&gt;
                        &lt;source src="media/I_High_Speed/I_3/I-3_HighSpeed_03.mp4" type="video/mp4"&gt;
                    &lt;/video&gt;
                &lt;/div&gt;
                &lt;div class="slide" data-timing=6 data-fadein=0.5 data-fadeout=0.5&gt;
                    &lt;header&gt;Asset Optimization - Condition Based Wheelset Maintenance Planning&lt;/header&gt;
                    &lt;img src="media/I_High_Speed/I_3/HighSpeed-I-3-3_Wheelset-details.png" /&gt;
                &lt;/div&gt;
                &lt;div class="slide" data-timing=6 data-fadein=0.5 data-fadeout=0.5&gt;
                    &lt;header&gt;Asset Optimization - Condition Based Wheelset Maintenance Planning&lt;/header&gt;
                    &lt;img src="media/I_High_Speed/I_3/HighSpeed-I-3-4_Maintain-axles.png" /&gt;
                &lt;/div&gt;
                &lt;div class="slide" data-timing=19 data-fadein=0.5 data-fadeout=0.5 data-videopause=true&gt;
                    &lt;header&gt;Asset Optimization - Condition Based Wheelset Maintenance Planning&lt;/header&gt;
                    &lt;video autoplay&gt;
                        &lt;source src="media/I_High_Speed/I_3/I-3_HighSpeed_02.mp4" type="video/mp4"&gt;
                    &lt;/video&gt;
                &lt;/div&gt;
                &lt;div class="slide" data-timing=6 data-fadein=0.5 data-fadeout=0.5&gt;
                    &lt;header&gt;Asset Optimization - Condition Based Wheelset Maintenance Planning&lt;/header&gt;
                    &lt;img src="media/I_High_Speed/I_3/HighSpeed-I-3-5_Wheelset-detail-after-turn-of-axle.png" /&gt;
                &lt;/div&gt;
                &lt;div class="slide" data-timing=6 data-fadein=0.5 data-fadeout=0.5&gt;
                    &lt;header&gt;Asset Optimization - Condition Based Wheelset Maintenance Planning&lt;/header&gt;
                    &lt;img src="media/I_High_Speed/I_3/I_3-Conclusion.png" /&gt;
                &lt;/div&gt;
           &lt;/div&gt;&lt;!--Background--&gt;
      &lt;/div&gt;&lt;!--wrapper--&gt;
</code></pre>

<p>And the script:</p>

<pre><code>       &lt;script type="text/javascript"&gt;
            var slides = $(".slide");
            var lastSlideIndex = slides.length-1;
            var currentSlideIndex = 0;
            var defaultTiming = 1000;
            var defaultFadeInTime = 1000;
            var defaultFadeOutTime = 1000;



            // Show slide function
            function showSlide() {

                var thisSlide = slides.eq(currentSlideIndex);

                // Delays
                var timing = parseFloat(thisSlide.attr("data-timing")) * 1000;  // Transform seconds in milliseconds
                if(isNaN(timing)){timing=defaultTiming; console.log("NOTICE: ----------- data-timing is missing, using default.");}
                var fadeInTime = parseFloat(thisSlide.attr("data-fadein")) * 1000;
                if(isNaN(fadeInTime)){fadeInTime=defaultFadeInTime; console.log("NOTICE: ----------- data-fadein is missing, using default.");}
                var fadeOutTime = parseFloat(thisSlide.attr("data-fadeout")) * 1000;
                if(isNaN(fadeOutTime)){fadeOutTime=defaultFadeOutTime; console.log("NOTICE: ----------- data-fadeout is missing, using default.");}

                console.log("Slide: "+currentSlideIndex+":\n Display time: "+timing+" millisec.\n Fadein: "+fadeInTime+" millisec.\n Fadeout: "+fadeOutTime+" millisec.");
                thisSlide.animate({"opacity":1},fadeInTime);

                // If this slide contains a video
                if(slides.eq(currentSlideIndex).find("video").length &gt; 0){

                    // Prevents more than 1 video to play at the same time
                    $("video").each(function(){
                        console.log("All video paused.")
                        $(this)[0].pause();
                    });

                    // Play this video from the start
                    var thisVideo = slides.eq(currentSlideIndex).find("video")[0];
                    thisVideo.currentTime = 0;
                    console.log("Video playing.");
                    thisVideo.play()
                }

                // Prepare for next slide
                currentSlideIndex++;

                // Reset to slide 0 if last was reached
                if(currentSlideIndex&gt;lastSlideIndex){
                    currentSlideIndex=0;
                }

                setTimeout(function(){
                    // Fade out previous slide
                    var previousSlideIndex = currentSlideIndex-1;


                    // If previous was last slide
                    if(previousSlideIndex == -1){
                        previousSlideIndex = lastSlideIndex;
                    }

                    // If previous slide was set to pause
                    if(slides.eq(previousSlideIndex).attr("data-videopause")=="true"){
                        console.log("Video has been paused.");
                        slides.eq(previousSlideIndex).find("video")[0].pause();
                    }

                    slides.eq(previousSlideIndex).animate({"opacity":0},fadeOutTime);
                    showSlide();
                }, timing);
            }

            // Init
            showSlide();
        &lt;/script&gt;
</code></pre>