Code läuft, wenn es nicht sollte?

Question

Ich arbeite an einem Projekt, das hauptsächlich ein Fotobetrachter für einen Fotografen ist. Die Seite beginnt mit einem sehr kurzen Video, das ausgeblendet wird und der Inhalt eingeblendet wird. Die verschiedenen Bereiche der Website werden über ein Menü aufgerufen, das eine Ajax-Funktion auslöst, die nur diesen Teil der Seite lädt. Das Problem, das ich bekomme, ist, dass das Video, das nur einmal am Anfang abgespielt werden soll, beim Anklicken der Menülinks zufällig ausgelöst wird. Ich verstehe das nicht, da das Video mit javascript und jquery ausgeblendet und ausgeblendet wurde.

Hier ist die Website (im Aufbau):

http://maxruiz-portraits.com

var random = Math.floor(Math.random() * 24) + 1; 
document.getElementById("front").src = "Images/PORTRAITS/Image" + random + ".jpg"; 

$("#content").hide(); 
$('#header').hide(); 

$(document).ready(function() { 
    counter = random; 
    // displayArrows(); 
    updateInfo(counter); 

    var vid = document.getElementById("bgvid"); 

    function stopVideo() { 
    vid.pause(); 
    $('#presentacion').delay(3000).hide(); 
    $("#bgvid").parent().hide() 
    $("#bgvid").addClass('notVisible'); 
    $('#allIntro').hide(); 
    } 

    setTimeout(stopVideo, 6000); 

    function showSite() { 
    $('#header').delay(1500).fadeIn(2000); 
    $("#content").delay(1500).fadeIn(2000); 
    } 

    showSite(); 

    $('body,html').dblclick(function(e) { 
    e.preventDefault(); 
    }); 

    $(document).on('click', 'nav a', function(e) { 
    e.preventDefault(); 
    var url = this.href; 
    $("nav a.current").removeClass("current"); 
    $(this).addClass("current"); 
    $('#container').remove(); 
    $('#content').load(url + ' #content', function() { 
     if (url == 'http://maxruiz-portraits.com/contact11.html') { 
     $('title').text('Portraits | Contact'); 
     } else if (url == 'http://maxruiz-portraits.com/gallery2.html') { 
     $('title').text('Portraits | Gallery'); 
     } else if (url == 'http://maxruiz-portraits.com/about.html') { 
     $('title').text('Portraits | About'); 
     $('#english').hide(); 
     } else if (url == 'http://maxruiz-portraits.com/bio.html') { 
     $('title').text('Portraits | Bio'); 
     } else if (url == 'http://maxruiz-portraits.com/home.html') { 
     $('title').text('Max Ruiz | Portraits'); 
     } 
    }).hide().fadeIn('slow'); 
    }); 

    counter = random; 

    document.addEventListener('touchstart', handleTouchStart, false); 
    document.addEventListener('touchmove', handleTouchMove, false); 
    var xDown = null; 
    var yDown = null; 

    function handleTouchStart(evt) { 
    xDown = evt.touches[0].clientX; 
    yDown = evt.touches[0].clientY; 
    }; 

    function handleTouchMove(evt) { 
    if (!xDown || !yDown) { 
     return; 
    } 

    var xUp = evt.touches[0].clientX; 
    var yUp = evt.touches[0].clientY; 

    var xDiff = xDown - xUp; 
    var yDiff = yDown - yUp; 
    if (Math.abs(xDiff) + Math.abs(yDiff) > 150) { //to deal with to short swipes 
     if (Math.abs(xDiff) > Math.abs(yDiff)) { /*most significant*/ 
     if (xDiff > 0) { /* left swipe */ 
      counter++; 
      if (counter > 24) { 
      counter = 1 
      } 

      $('#front').fadeOut(500, function() { 
      getImage(function() { 
       $('#front').fadeIn(500); 
      }); 
      }); 
     } else { /* right swipe */ 
      counter--; 
      if (counter < 1) { 
      counter = 24 
      } 

      $('#front').fadeOut(500, function() { 
      getImage(function() { 
       $('#front').fadeIn(500); 
      }); 
      }); 
     } 
     } else { 
     if (yDiff > 0) { /* up swipe */ 
      // window.location.href = '04MaxSitePortraits/index.html'; 
     } else { /* down swipe */ 
     } 
     } 
     /* reset values */ 
     xDown = null; 
     yDown = null; 
    } 
    }; 

    $(document).on('click', '.buttons', function(e) { 
    e.preventDefault(); 
    var id = e.target.id; 
    if (id == "next") { 
     counter++; 
    } else if (id == "previous") { 
     counter--; 
    } 
    if (counter < 1) { 
     counter = 24; 
    } else if (counter > 24) { 
     counter = 1 
    } 

    $('#front').fadeOut(500, function() { 
     getImage(function() { 
     $('#front').fadeIn(500); 
     }); 
    }); 

    updateInfo(counter); 
    }); 

    getImage = function(cb) { 
    var img = new Image(); 
    img.onload = function() { 
     document.getElementById("front").src = img.src; 
     cb(); 
    }; 
    img.src = "Images/PORTRAITS/Image" + counter + ".jpg"; 

    // displayArrows(); 
    } 

    // function displayArrows() { 
    // if (counter == 1) { 
    //  $('#previous').css('display', 'none'); 
    // } 
    // else if (counter > 1 && counter < 31) { 
    //  $('#previous').css('display', 'block'); 
    //  $('#next').css('display', 'block'); 
    // } 
    // else if (counter == 31) { 
    //  $('#next').css('display', 'none'); 
    // } 
    // } 

    $(document).on('click', '.littleImages', function(e) { 
    $('#gall').removeClass("current"); 
    $('#home').addClass("current"); 

    var imageSource = $(this).attr('src'); 
    // find the not square picture from the square source 
    var n = imageSource.lastIndexOf('/'); 
    var result = imageSource.substring(n + 1); 
    var imageSourceFinal = 'Images/PORTRAITS/' + result; 

    // find the counter in order to know if it's the last or the first picture and hide corr arrow 

    counter = imageSource.match(/\d+/g); 
    $('#container').remove(); 
    $('#content').load('index.html' + ' #content', function() { 
     $('#front').attr('src', imageSourceFinal); 

     // if (counter == 1) { $('#previous').css('display', 'none');} 
     // if (counter == 31){ $('#next').css('display', 'none');} 

     // updateInfo(counter); 
     testFunction(counter[0]); 
    }).hide().fadeIn('slow'); 
    }); 

    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) { 
    $("#front").on("mousedown", function() { 
     updateInfo(counter); 
     $('#front').fadeTo(300, 0.3); 
     $('#info').fadeTo(300, 1); 
     setTimeout(infoMobileOut, 1000); 
    }); 
    } else { 
    $(document).on('mouseover', '#front', function() { 
     $('#front').fadeTo(300, 0.3); 
     $('#info').fadeTo(300, 1); 
    }); 

    $(document).on('mouseout', '#front', function() { 
     $('#front').fadeTo(300, 1); 
     $('#info').fadeTo(300, 0); 
    }); 
    } 

    function infoMobileOut() { 
    $('#front').fadeTo(300, 1); 
    $('#info').fadeTo(300, 0); 
    } 

    function testFunction(number) { 
    switch (number) { 
     case "1": 
     $('#info').text('Photo 1'); 
     break; 
     case "2": 
     $('#info').text('Photo 2'); 
     break; 
     case "3": 
     $('#info').text('Photo 3'); 
     break; 
     case "4": 
     $('#info').text('Photo 4'); 
     break; 
     case "5": 
     $('#info').text('Photo 5'); 
     break; 
     case "6": 
     $('#info').text('Photo 6'); 
     break; 
     case "7": 
     $('#info').text('Photo 7'); 
     break; 
     case "8": 
     $('#info').text('Photo 8'); 
     break; 
     case "9": 
     $('#info').text('Photo 9'); 
     break; 
     case "10": 
     $('#info').text('Photo 10'); 
     break; 
     case "11": 
     $('#info').text('Photo 11'); 
     break; 
     case "12": 
     $('#info').text('Photo 12'); 
     break; 
     case "13": 
     $('#info').text('Photo 13'); 
     break; 
     case "14": 
     $('#info').text('Photo 14'); 
     break; 
     case "15": 
     $('#info').text('Photo 15'); 
     break; 
     case "16": 
     $('#info').text('Photo 16'); 
     break; 
     case "17": 
     $('#info').text('Photo 17'); 
     break; 
     case "18": 
     $('#info').text('Photo 18'); 
     break; 
     case "19": 
     $('#info').text('Photo 19'); 
     break; 
     case "20": 
     $('#info').text('Photo 20'); 
     break; 
     case "21": 
     $('#info').text('Photo 21'); 
     break; 
     case "22": 
     $('#info').text('Photo 22'); 
     break; 
     case "23": 
     $('#info').text('Photo 23'); 
     break; 
     case "24": 
     $('#info').text('Photo 24'); 
     break; 
    } 
    } 

    function updateInfo(number) { 
    switch (number) { 
     case 1: 
     $('#info').text('Photo 1'); 
     break; 
     case 2: 
     $('#info').text('Photo 2'); 
     break; 
     case 3: 
     $('#info').text('Photo 3'); 
     break; 
     case 4: 
     $('#info').text('Photo 4'); 
     break; 
     case 5: 
     $('#info').text('Photo 5'); 
     break; 
     case 6: 
     $('#info').text('Photo 6'); 
     break; 
     case 7: 
     $('#info').text('Photo 7'); 
     break; 
     case 8: 
     $('#info').text('Photo 8'); 
     break; 
     case 9: 
     $('#info').text('Photo 9'); 
     break; 
     case 10: 
     $('#info').text('Photo 10'); 
     break; 
     case 11: 
     $('#info').text('Photo 11'); 
     break; 
     case 12: 
     $('#info').text('Photo 12'); 
     break; 
     case 13: 
     $('#info').text('Photo 13'); 
     break; 
     case 14: 
     $('#info').text('Photo 14'); 
     break; 
     case 15: 
     $('#info').text('Photo 15'); 
     break; 
     case 16: 
     $('#info').text('Photo 16'); 
     break; 
     case 17: 
     $('#info').text('Photo 17'); 
     break; 
     case 18: 
     $('#info').text('Photo 18'); 
     break; 
     case 19: 
     $('#info').text('Photo 19'); 
     break; 
     case 20: 
     $('#info').text('Photo 20'); 
     break; 
     case 21: 
     $('#info').text('Photo 21'); 
     break; 
     case 22: 
     $('#info').text('Photo 22'); 
     break; 
     case 23: 
     $('#info').text('Photo 23'); 
     break; 
     case 24: 
     $('#info').text('Photo 24'); 
     break; 
    } 
    } 

    $(document).on('click', '#enButton', function() { 
    $('#english').fadeIn(); 
    $('#french').fadeOut(); 
    }); 

    $(document).on('click', '#frButton', function() { 
    $('#english').fadeOut(); 
    $('#french').fadeIn(); 
    }); 
}); 

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <a href="index.html"> 
    <title>Max Ruiz | Portraits</title> 
    </a> 
    <link rel="stylesheet" type="text/css" href="styles.css"> 
    <link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="mobile_style.css" /> 
    <link rel="stylesheet" type="text/css" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)" href="mobilePad_style.css" /> 
</head> 
<body> 
    <div id="allIntro"> 
    <div> 
     <video playsinline autoplay loop id="bgvid" class="visible"> 
      <source src="Images/PORTRAITS/introportraits.mp4" type="video/mp4"> 
     </video> 
    </div> 
    <div id="presentacion"> 
     <h1>PORTRAITS</h1> 
     <h2>PHOTOGRAPHIES </br id="break">DE MAX RUIZ</h2> 
    </div> 
    </div> 
    <div id="header"> 
    <div id="title"> 
     <h1>MAX RUIZ <span id="parana">PORTRAITS</span></h1> 
    </div> 
    <div id="infoMob"> 
     <a href="info.html"><img src="Images/infoMob.png" /></a> 
    </div> 
    <nav class="cf" id="menu"> 
     <ul> 
     <li><a href="contact11.html">CONTACT</a></li> 
     <li><a href="bio.html">BIO</a></li> 
     <li><a href="about.html">ABOUT</a></li> 
     <li><a href="gallery2.html" id="gall">GALLERY</a></li> 
     <li><a href="index.html" id="home" class="current">HOME</a></li> 
     </ul> 
    </nav> 
    </div> 
    <section id="content"> 
    <div id="container"> 
     <div id="imagewrap"> 
     <img src="Images/PORTRAITS/Image1.jpg" id="front" class="bigImage" /> 
     <div id="info">Verde</div> 
     <div id="previous" class="buttons"></div> 
     <div id="next" class="buttons"></div> 
     </div> 
    </div> 
    </section> 

    <script type="text/javascript" src="jquery-3.1.0.min.js"></script> 
    <script type="text/javascript" src="JavaScript5.js"></script> 
</body> 
</html> 

Irgendwelche Ideen, warum das Video neu geladen wird, wenn auf den Menü-Links zu klicken? Vielen Dank.

Answer 1

Dein Problem ist, dass du dein Video nach 6 Sekunden deaktivierst, aber dein Inhalt ist nach 3,5 Sekunden sichtbar. Ihre Website wird nach 6 Sekunden tatsächlich funktionieren. Wenn Sie jedoch versuchen, vor 6 Sekunden auf einen Link zu klicken, wird das Video erneut angezeigt, da Sie den Inhalt oberhalb des Videos gelöscht und neuen Inhalt eingeblendet haben. Versuchen Sie, diese Linie zu ändern:

setTimeout(stopVideo, 6000); 

um vielleicht

setTimeout(stopVideo, 3500); 

vielleicht haben Sie weitere Änderungen benötigen, aber ich denke, Sie die Idee haben, was falsch