視差僅適用於頁面刷新，不適用於重定向

我正在使用Materialize css視差。它在第一頁加載時工作正常，但是當它被重定向到網站中的任何其他頁面時，沒有任何視差渲染圖片。然而，當頁面重新加載時，它再次顯示圖片。視差僅適用於頁面刷新，不適用於重定向

我試圖用css和jquery預加載器預加載圖片;沒有效果。我已經包含像這樣的完整鏈接：<img class="parallax" src="localhost:3000/app/assets/images/brainbanner.gif">並且它尚未呈現。

我也嘗試將映像轉儲到另一個頁面，並通過其完整的網址調用它，但沒有任何內容。它甚至不會刷新。我想要一種方法來使這些圖片在第一次加載時出現，或者在重定向後刷新頁面的方式，在一次重定向中轉到頁面兩次。
這是我application.html.erb文件：

<!DOCTYPE html> 
    <html> 
    <head> 
     <title>NicolasDev</title> 
     <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> 
     <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> 
     <%= csrf_meta_tags %> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/> 


     <link href='https://fonts.googleapis.com/css?family=Courgette' rel='stylesheet' type='text/css'> 
     <!-- CSS --> 
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
     <link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/> 
     <link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/> 
     <script src="jquery-2.0.2.min.js"></script> 
    </head> 
    <body> 





    <%= yield %> 



    <footer class="page-footer teal"> 
     <div class="container"> 
     <div class="row"> 

      <div style="text-align: center;"> 
      <h5 class="white-text">Going up <span class="pf_cite">?</span></h5> 
      <ul> 
       <li><div class="elevator waves-effect waves-light btn">Yes!</div></li> 

      </ul> 
      </div> 
     </div> 
     </div> 


    </footer> 

    <script type="text/javascript"> 
     $(document).ready(function() { 
     $('.parallax').parallax(); 
     }); 

    </script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
     $(function() { 
      preloadCssImages(); 
     }); 
     }; 

    </script> 
    <script type="text/javascript"> 

     // Simple elevator usage. 
     var elementButton = document.querySelector('.elevator'); 
     var elevator = new Elevator({ 
     element: elementButton, 
     mainAudio: './audio/elevator.mp3', // Music from http://www.bensound.com/ 
     endAudio: './audio/ding.mp3', 
     duration: 3000 
     }); 

    </script> 
    <script type="text/javascript"> 
     $(document).ready(function() {function(event) { 
     jQuery.preloadCssImages = function(){ 

      var allImgs = [];//new array for all the image urls 
      var k = 0; //iterator for adding images 
      var sheets = document.styleSheets;//array of stylesheets 

      for(var i = 0; i0 && imgUrls != ''){//loop array 

       var arr = jQuery.makeArray(imgUrls);//create array from regex obj   

       jQuery(arr).each(function(){ 
       allImgs[k] = new Image(); //new img obj 
       allImgs[k].src = (this[0] == '/' || this.match('http://')) ? this : baseURL + this;  //set src either absolute or rel to css dir 
       k++; 
       }); 
      } 
      }//loop 
      return allImgs; 
     } 

     $.preloadCssImages(); 



     var preloadedImgs = $.preloadCssImages(); 


     }); 
    </script> 
    </body> 

    </html>

這是我的主頁：

<div id="index-banner" class="parallax-container"> 
     <div class="section no-pad-bot"> 
     <div class="container"> 

      <h1 class="header center teal-text text-lighten-2">Nicolas Dev</h1> 
      <div class="row center"> 
      <h5 class="header col s12 light">Development meets imagination.</h5> 
      </div> 
      <div class="row center"> 

      </div> 


     </div> 
     </div> 
     <div class="parallax" id="one" alt="Unsplashed background img 1")%></div> 
    </div> 


    <div class="container" style="margin-top: 0px;"> 
     <div class="section"> 
     <!-- Icon Section --> 
     <div class="row"> 
      <div class="col s12 m4"> 
      <div class="icon-block"> 
       <h2 class="center brown-text"><%= link_to image_tag('portfolio.png', height: '82', width: '82'), "http://localhost:3000/pages/porfolio" %></h2> 
       <h5 class="center">Porfolio</h5> 
       <p class="light"></p> 
      </div> 
      </div> 
      <div class="col s12 m4"> 
      <div class="icon-block"> 
       <h2 class="center brown-text"><%= link_to image_tag('github.png', height: '82', width: '82'), "https://github.com/nbr625", :target => "_blank"%></h2> 
       <h5 class="center">Github</h5> 
      </div> 
      </div> 
      <div class="col s12 m4"> 
      <div class="icon-block"> 
       <h2 class="center brown-text"><%= image_tag('contact.png', height: '82', width: '82')%></h2> 
       <h5 class="center">Message Me</h5> 
       <p class="light"></p> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 



    <div class="container"> 
     <div class="section"> 
     <div class="row"> 
      <div class="col s12 center"> 
      <h3><i class="mdi-content-send brown-text"></i></h3> 
      <h4>Nicolas</h4> 
      <p class="left-align light">As you might have guessed, my name is Nicolas. Nicolas Berrizbeitia. My job is to build responsive, proffessional platforms that suit the needs of my clients. My passion...</p> 
      </div> 
     </div> 
     </div> 
    </div> 





    <div class="parallax-container valign-wrapper"> 
     <div class="section no-pad-bot"> 
     <div class="container"> 
      <div class="row center"> 
      <h5 class="header col s12 light">... Is crafting immersive web experiences.</h5> 
      </div> 
     </div> 
     </div> 


     <div class="parallax" id="two" alt="Unsplashed background img 2"></div> 
    </div> 







    <div class="container"> 
     <div class="section"> 
     <div class="row"> 
      <div class="col s12 center"> 
      <h3><i class="mdi-content-send brown-text"></i></h3> 
      <h4>How?</h4> 
      <p>by focusing on:</p> 
      <br/> 
      <br/> 
      <p>Balanced, <span class="purple_accent">stimulating</span> designs</p><br/><br/> 
      <p>The <span="purple_accent">psychology</span> of Target Audience</p><br/><br/> 
      <p>Solid Code base that safeguards <span class="purple_accent">immersion</span></p> 
      <p>And most importantly...</p><br/><br/> 
      <ul id="staggered-test"> 
       <li class="purple_accent s40">The element of Surpirse</li> 
      </ul> 
      </div> 
     </div> 
     </div> 
    </div> 




    <div class="parallax-container valign-wrapper"> 
     <div class="section no-pad-bot"> 
     <div class="container"> 
      <div class="row center"> 
      <h5 class="header col s12 light" style="float: right;">A website is not a page...</h5> 
      </div> 
     </div> 
     </div> 
     <div class="parallax"><%=image_tag('book.png')%></div> 
    </div> 



    <div class="parallax-container valign-wrapper" style="height: 900px;"> 
     <div class="section no-pad-bot"> 
     <div class="container"> 
      <div class="row center"> 
      <h5 class="header col s12 light" style="float: right;">It is an experience in the mind of the beholder.</h5> 
      </div> 
     </div> 
     </div> 
     <img class="parallax" src="localhost:3000/app/assets/images/brainbanner.gif"> 
    </div> 



     <!-- Scripts--> 

    <script type="text/javascript" src="space.js"></script> 
    <script type="text/javascript"> 
     var options = [ 
     {selector: '#staggered-test', offset: 200, callback: 'Materialize.showStaggeredList("#staggered-test", 3000)' } 
     ]; 
     Materialize.scrollFire(options); 

    </script>

，如果你想看到完整的回購，請到here。謝謝

來源

2015-09-27 Carla Rivers

代碼嗎？文檔就緒/窗口加載是否存在javascript init？ –

我更新了代碼，以便您可以獲得更明智的意見。 –

而不是document.ready，你可以使用window.load嗎？ '$（window）.load（function（）{$（'。parallax'）。parallax（）;}）;' –

-1

這可能是一個與turbolinks問題。嘗試切換jquery.turbolinks寶石的渦輪鏈接。有時候使用turbolinks，jquery初始化程序不會運行，因爲它會阻止頁面進行整頁刷新。

來源

2015-10-03 00:34:13

有點晚了，但你可以通過在document.ready之後用JS加載視差來修復它。剛剛離開的HTML與視差數據屬性並將其添加到您的JS：

$(document).ready -> 
    $.each $("[data-parallax='scroll']"), (i, elem) -> 
    $(elem).parallax(imageSrc: $(this).data("image-src"))

來源

2016-12-07 18:50:35 eMgz

視差僅適用於頁面刷新，不適用於重定向

回答

相關問題