Question

首先，我不知道这是否适合它。如果没有，请告诉我。

我制作的网站基本上是一个很大的自动powerpoint演示文稿。

我加载所有图片和视频，然后逐个显示。

但是我有问题......

一开始工作得很好。但是现在我已经完成了大约60％的填写所有照片和视频的工作。现在我的视频不再加载到网站了。

我接着检查了网络流量，看到了以下内容：

正如您所看到的，它会加载所有图像（这是真的，因为这是唯一可见的）。它取消了所有的媒体（也是如此，因为我只得到一个黑屏）。

有没有办法为浏览器添加延迟？

例如，一张幻灯片最短6秒。在这6秒钟内我只显示1张图片。但网站要求所有人加载。

如果您想查看代码，请参阅下面的简短版本。但是你可能不需要那样。

我为幻灯片显示的代码（简短版本）

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

脚本：

       <script type="text/javascript">
            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 > 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>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();
        </script>

延迟浏览器获取的数据

0 个答案: