I am using the Materialize css parallax. It works fine on the first page load up, but when it is redirected to any other page in the site, none of the parallaxes render the pictures. When the page is reloaded however, it once again shows the pictures.
I have tried to preload the pictures with css, and jquery preloader; no effect. I have included the full link like this: <img class="parallax" src="localhost:3000/app/assets/images/brainbanner.gif"> and it has not rendered.
I also tried to dump the image into another page and calling it by its full web address, but nothing. It does not even appear on refresh. I would like a way to make this pictures appear on the first load, or a way to refresh the page after it is redirected, going to the page twice in one redirect.
This is my application.html.erb file:
<!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>
This is my home page:
<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>
if you would like to see the full repo, please go here. Thank you
