我正在使用Materialise css parallax。它在第一页加载时工作正常，但当它被重定向到站点中的任何其他页面时，没有一个视差渲染图片。然而，当重新加载页面时，它再次显示图片。
我试图用css和jquery preloader预加载图片;没有效果。我已经包含了这样的完整链接：<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。谢谢
答案 0 :(得分：0)
有点晚了，但你可以通过在document.ready之后用JS加载视差来修复它。只需保留带有视差数据属性的HTML并将其添加到JS：
$(document).ready ->
$.each $("[data-parallax='scroll']"), (i, elem) ->
$(elem).parallax(imageSrc: $(this).data("image-src"))
答案 1 :(得分：-1)
这可能是turbolinks的一个问题。尝试切换jquery.turbolinks gem的turbolinks。有时使用turbolinks，jquery初始化程序不会运行，因为它会阻止页面进行整页刷新。