Ajax請求錯誤

我在教自己如何編寫代碼，所以這可能是相當笨拙的代碼。這是一個網站，主要是一個簡短的視頻介紹的照片瀏覽器。該視頻在播放後隱藏。導航加載各種頁面，我正在用AJAX做這件事。我遇到的問題是，AJAX正在重新加載視頻一秒鐘。Ajax請求錯誤

看到它的最好方法是如果你轉到頁面。

這裏是我的代碼。我只包含html和javascript文件，並且只需要從JavaScript文件中查看前80行左右。

當您瀏覽網站時，您會看到惱人的視頻。任何人都可以幫忙謝謝。

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>Max Ruiz | Parana</title> 
    <link rel="stylesheet" type="text/css" href="styles.css"> 
</head> 
<body> 
<div id="allIntro"> 
    <div> 
    <video playsinline autoplay loop id="bgvid" class="visible" > 
     <source src="Images/PARANA/newIntro.mp4" type="video/mp4"> 
    </video> 
    </div> 

    <div id="presentacion"> 
    <h1>PARANA</h1> 
    <h2>PHOTOGRAPHIES DE MAX RUIZ</h2> 
    </div> 
</div> 

<div id="header"> 
    <div id="title"><h1>MAX RUIZ <span id="parana">PARANÁ</span></h1></div> 
     <nav class="cf" id="menu"> 
     <ul> 
     <li><a href="contact.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/PARANA/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> <!-- end of container --> 

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

的JavaScript

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

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

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

    $(document).ready(function() { 

     counter = random; 
     displayArrows(); 
     updateInfo(counter); 


    //set up video and text// 

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

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

     setTimeout(stopVideo, 3000); 

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

     showSite(); 


    //once content loaded 

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

    //main page functionality nav// 

    $(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-parana.com/contact.html'){ 
       $('title').text('Paraná | Contact'); 
      } 
      else if (url == 'http://maxruiz-parana.com/gallery.html'){ 
       $('title').text('Paraná | Gallery'); 
      } 
      else if (url == 'http://maxruiz-parana.com/about.html'){ 
       $('title').text('Paraná | About'); 
       $('#english').hide(); 
      } 
      else if (url == 'http://maxruiz-parana.com/bio.html'){ 
       $('title').text('Paraná | Bio'); 
      } 
      else if (url == 'http://maxruiz-parana.com/gallery.html'){ 
       $('title').text('Max Ruiz | Paraná'); 
      } 
      counter = random; 
      $('#previous').css('display', 'none'); 
     }).hide().fadeIn('slow'); 
    }); 




    //main page functionality buttons// 

    counter = random; 

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


    $('#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/PARANA/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'); 
     } 
    } 





    // gallery functionality// 

    $(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/PARANA/' + 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'); 

    }); 



    // legend for pictures functionality 

    $(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 testFunction(number){ 

     switch(number) { 
      case "1": 
       $('#info').text('Verde'); 
       break; 
      case "2": 
       $('#info').text('Pardo'); 
       break; 
      case "3": 
       $('#info').text('Ivinhema'); 
       break; 
      case "4": 
       $('#info').text('Guayquiraró'); 
       break; 
      case "5": 
       $('#info').text('Monday'); 
       break; 
      case "6": 
       $('#info').text('Paranapanema'); 
       break; 
      case "7": 
       $('#info').text('Salado'); 
       break; 
      case "8": 
       $('#info').text('Piquiri'); 
       break; 
      case "9": 
       $('#info').text('Gualeguay'); 
       break; 
      case "10": 
       $('#info').text('Negro'); 
       break; 
      case "11": 
       $('#info').text('Santa Lucía'); 
       break; 
      case "12": 
       $('#info').text('Ivai'); 
       break; 
      case "13": 
       $('#info').text('Corriente'); 
       break; 
      case "14": 
       $('#info').text('Luján'); 
       break; 
      case "15": 
       $('#info').text('Paraguay'); 
       break; 
      case "16": 
       $('#info').text('Iguazú'); 
       break; 
      case "17": 
       $('#info').text('Aguapey'); 
       break; 
      case "18": 
       $('#info').text('Victoria'); 
       break; 
      case "19": 
       $('#info').text('Tieté'); 
       break; 
      case "20": 
       $('#info').text('Pardo'); 
       break; 
      case "21": 
       $('#info').text('Yabeberi'); 
       break; 
      case "22": 
       $('#info').text('Ñacaguazú'); 
       break; 
      case "23": 
       $('#info').text('Tapenagá'); 
      case "24": 
       $('#info').text('Arazá'); 
       break; 
      case "25": 
       $('#info').text('Tupicuá'); 
       break; 
      case "26": 
       $('#info').text('Añiá'); 
       break; 
      case "27": 
       $('#info').text('Tamanduatey'); 
       break; 
      case "28": 
       $('#info').text('Aguapey'); 
       break; 
     } 
    } 

    function updateInfo(number) { 

     switch(number) { 
      case 1: 
       $('#info').text('Verde'); 
       break; 
      case 2: 
       $('#info').text('Pardo'); 
       break; 
      case 3: 
       $('#info').text('Ivinhema'); 
       break; 
      case 4: 
       $('#info').text('Guayquiraró'); 
       break; 
      case 5: 
       $('#info').text('Monday'); 
       break; 
      case 6: 
       $('#info').text('Paranapanema'); 
       break; 
      case 7: 
       $('#info').text('Salado'); 
       break; 
      case 8: 
       $('#info').text('Piquiri'); 
       break; 
      case 9: 
       $('#info').text('Gualeguay'); 
       break; 
      case 10: 
       $('#info').text('Negro'); 
       break; 
      case 11: 
       $('#info').text('Santa Lucía'); 
       break; 
      case 12: 
       $('#info').text('Ivai'); 
       break; 
      case 13: 
       $('#info').text('Corriente'); 
       break; 
      case 14: 
       $('#info').text('Luján'); 
       break; 
      case 15: 
       $('#info').text('Paraguay'); 
       break; 
      case 16: 
       $('#info').text('Iguazú'); 
       break; 
      case 17: 
       $('#info').text('Aguapey'); 
       break; 
      case 18: 
       $('#info').text('Victoria'); 
       break; 
      case 19: 
       $('#info').text('Tieté'); 
       break; 
      case 20: 
       $('#info').text('Pardo'); 
       break; 
      case 21: 
       $('#info').text('Yabeberi'); 
       break; 
      case 22: 
       $('#info').text('Ñacaguazú'); 
       break; 
      case 23: 
       $('#info').text('Tapenagá'); 
      case 24: 
       $('#info').text('Arazá'); 
       break; 
      case 25: 
       $('#info').text('Tupicuá'); 
       break; 
      case 26: 
       $('#info').text('Añiá'); 
       break; 
      case 27: 
       $('#info').text('Tamanduatey'); 
       break; 
      case 28: 
       $('#info').text('Aguapey'); 
       break; 
     } 
    } 


// About functionality 

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

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



});

來源

2017-08-01 Paul

因爲你漸漸淡出，所以你漸漸淡入。你需要淡入淡出。您需要在兩個圖層之上，在底層加載新內容，然後淡出頂層，然後重複。 – zsawaf

你的JavaScript是在這條線拋出一個錯誤：

vid.parent().delay(3000).hide()

TypeError: vid.parent is not a function. (In 'vid.parent()', 'vid.parent' is undefined)

，你想要它。這將防止視頻隱藏至。

發生此錯誤的原因是您在純html節點上調用Jquery方法。另外，我不確定delay()會如此工作。它意味着在Jquery方法之間添加延遲。我認爲這應該會更好：

setTimeout(function(){ 
    $("#bgvid").parent().hide() 
    }, 3000);

來源

2017-08-01 15:47:58

Ajax請求錯誤

回答

相關問題