Im added page load GIF icon for my bootstrap web site, but i have a small issue , this image loader is very fast loading, i need to make time duration for this loader , Im added duration but its not work ,how can i fix it?
Thanks
$(window).load(function() {
// Animate loader off screen
$(".se-pre-con").fadeOut("slow");
;
});
no-js #loader { display: none; }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background:url("https://thumb.ibb.co/hqtTTk/Preloader_2.gif" )center no-repeat #fff;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js"></script>
<body>
<div class="se-pre-con"></div>
</body>
Try this:
setTimeout(function(){ $(".se-pre-con").fadeOut("slow"); }, 3000);
Related
I have included a loader and tried hide operation and timeout operation, which works with chrome ,but not with firefox. Firefox , the loader keep on loading and never ends.
HTML:
<div id="loading">
<img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>
CSS:
#loading {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
text-align: center;
}
#loading-image {
position: absolute;
top: 100px;
left: 240px;
z-index: 100;
}
Included script before closing body tag.
<script language="javascript" type="text/javascript">
$(window).load(function() {
$('#loading').hide();
});
</script>
Use .on event
$( window ).on( "load", function() {
//Code on load
$('#loading').hide();
}
https://api.jquery.com/on/
I'm trying to use the normal approach to create an element and hide it using jQuery once the page finished loading.
You can see this basic approach in many places but here's the code anyway:
DIV for the image I'd like to display while the page loads, right after the <body> tag:
<div class="pleasewait"></div>
To remove the icon from the screen after the page loads, in the HEAD section of the HTML page:
$(window).bind("load", function() {
$(".pleasewait").fadeOut("slow");;
});
CSS to style the image in the center of the page:
.no-js #loader { display: none; }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.pleasewait {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(img/ajax-loader.gif) center no-repeat #fff;
}
I get the nav bar on my PHP page to load ok but nothing on the <body> section is displayed until the page fully loads (including waiting for the server call to complete and form the remainder of the page).
While there are other fancier methods of achieving my goals, I would really like to understand what I'm doing wrong here.
From the comments I saw you are using jQuery 3.1.1.
.bind() is deprecated since jQuery 3.0
Instead use
$(window).on('load', function(e){
....
})
Also make sure (from this answer and the jQuery API document):
When using scripts that rely on the value of CSS style properties, it's important to reference external stylesheets or embed style elements before referencing the scripts.
HTML
<div id="preloader">
<div id="status">
</div>
</div>
<div id="wrappers">
Welcome to page
</div>
CSS
#preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #fff;
z-index: 999999;
}
#preloader #status {
width: 70px;
height: 70px;
position: absolute;
left: 50%;
top: 50%;
background-image: url(images/loader.gif);
background-repeat: no-repeat;
background-position: center;
}
jQuery
$(document).ready(function(){
$(window).load(function() {
$('#status').fadeOut();
$('#preloader').delay(100).fadeOut('fast');
$('#wrappers').delay(250).css({'overflow':'visible'});
});
});
<style>
.bg {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
}
.loader {
background-repeat: no-repeat;
background: url('images/loader.gif');
width: 100px;
height: 100px;
margin: 0px auto;
top: 50%;
position: absolute;
left: 0px;
right: 0px;
margin-top: -21px;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </script>
<script type="text/javascript">
$(window).load(function() {
$(".bg").fadeOut('slow');
})
</script>
html code is
<div class="bg">
<div class="loader"></div>
</div>
it is a page loader .when we open a new page it shows a gif image ..this code works fine on localhost ...but when i put it on server the gif image never goes even after loading of page..
One of my assumptions might be that your .gif is not found
background: url('images/loader.gif');
Cuz from my experience I had to use asset-url / url-path or give a full path towards the asset.
Just declare all the required css and script codes inside the head tag of your index.html. You can follow my code given below:
**index.html**
<!DOCTYPE html>
<html lang="en">
<head>
<script>
//preloader
function myFunction() {
document.getElementById('loading').style.visibility = "hidden";
}
setTimeout("myFunction()", 8000);
</script>
<style>
#loading {
position: fixed;
width: 100%;
height: 100vh;
background: rgb(24, 32, 39) url("./loading.gif") no-repeat center;
z-index: 99999;
}
</style>
</head>
<body>
<!-- Pre loader-->
<div id="loading" style="visibility: visible;">
</div>
</body>
I want to show a loading gif when a user is loading away from the page. I do this when it is loading like this:
CSS:
.no-js #loader { display: none; }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(https://i.imgur.com/Bpa5eIP.gif) center no-repeat #fff;
}
JavaScript:
<script>
$(window).load(function() {
Animate loader off screen
$(".se-pre-con").fadeOut("slow");;
});
</script>
HTML:
<div class="se-pre-con"></div>
I could do this by adding .onClick to each link on the page but that would take time and I want to know if there is a easier way to show the gif upon loading away from the page.
Watch unload event or beforeunload event just as you do with load!
For example:
$(window).on("unload",function() {
//your animation here
});
Also you can add a delay or something so the animation can end before leaving the page:
var triggered = false;
$(window).on("unload",function(event) {
if (triggered === true) {
return; //this is run automatically after the timeout
}
event.preventDefault();
// your animation here
triggered = true; // set flag
setTimeout(function(){$(this).trigger('unload');},1000); //set animation length as timeout
});
I used this question for my solution: How to trigger an event after using event.preventDefault()
try using this
$(document).ajaxStart(function() {
$("#loading").show();
});
$(document).ajaxComplete(function() {
$("#loading").hide();
});
});
CSS
.wait {
top: 100px;
z-index: 2000;
height: 100%;
width: 100%;
vertical-align: bottom;
position: relative;
}
.loader {
background-position: center center;
z-index: 1000;
height: auto;
width: 100%;
position: absolute;
}
.loaderimg {
height: 100%;
width: 100%;
}
HTML
<div id="loading" class="loader">
<h2 class="text-center wait">Loading results, please be patient</h2>
<img class="loaderimg" src="img/scr_01.gif" />
</div>
I'm trying to implement Stellar.js (http://markdalgleish.com/projects/stellar.js/) to a site that I'm developing. I realised that I need to enclose the parallax scrolling inside a container instead of using window/body in order for it to work on an iPad (considering the viewport) and that's where I run into a problem; the script doesn't seem to initiate correctly.
Here's the structure I've setup on the site -
HTML
<header></header>
<!-- keeping this content outside of #content because of a prefixed alignment -->
<div id="content">
<section id="example" data-stellar-background-ratio="1">
<img src="example-1.png" data-stellar-ratio="2" data-stellar-offset="-25">
<img src="example-2.png" data-stellar-ratio="3" data-stellar-offset="-50">
<img src="example-3.png" data-stellar-ratio="4" data-stellar-offset="0">
</section>
</div>
CSS
#content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
section {
background-attachment: fixed;
width: 100%;
height: 100%;
position: relative;
}
img:first-child {
position: absolute;
top: 0;
left: 300px;
}
img:nth-child(2) {
position: absolute;
z-index: 99;
top: 0;
right: 150px;
}
img:nth-child(3) {
position: absolute;
z-index: 99;
top: 0;
left: 100px;
}
JavaScript
$('#content').stellar({
horizontalScrolling: false
});
I can see that the parallax images inside the section get display: none, but other than that the script doesn't seem to be running. I get no JS errors.
I'm thinking it might have something to do with you using position: absolute and not giving the div any with.
Did you check the size of your #content div? Or does stellar handle this too?