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/
Related
I have a gif that appears as my site is loading however the gif disappears and the page appears after everything has loaded except the background videos.
How could I have the gif fade away only after the background images have loaded. I am fairly new to javascript so i'd like a guided code on how to do this please
Here's the code i currently use
//preloader
var loader = document.querySelector(".loader")
window.onload.addEventListener("load", vanish)
function vanish() {
loader.classList.add("dissapear")
}
.loader {
position: fixed;
top: 0;
left: 0;
z-index: 4;
background-color: #36395A;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.dissapear {
animation: vanish 1s forwards;
}
#keyframes vanish {
100% {
opacity: 0;
visibility: hidden;
}
}
<div class="loader">
<img src="https://catulu.club/images/ch1-img.159861e81e6dc4bfca11.gif" alt="">
</div>
I am not sure if this answers your question, but you could try using this code. I added a script that works with jQuery3.
It will wait until the window finishes loading, then it will wait an optional extra few seconds.
$(window).on('load', function() {
setTimeout(removeLoader, 3000); //wait for page load PLUS three seconds.
});
function removeLoader() {
$("#loading").fadeOut(500, function() {
// fadeOut complete. Remove the loading div
$("#loading").remove(); //makes page more lightweight
});
}
#loading {
position: fixed;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 100;
background-color: #36395A;
z-index: 4;
}
#loading-image {
z-index: 4;
}
#loadingDiv {
position: absolute;
;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #36395A;
}
<div id="loading">
<img id="loading-image" src="https://catulu.club/images/ch1-img.159861e81e6dc4bfca11.gif" alt="Loading..." />
</div>
<body>
<txt> hello world, testing testing </text>
</body>
<!--- Place script below at the bottom of the body --->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
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);
<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 have a form in template that submit POST request to test_connection view. The test_connection view takes at least 1 minute to process so on that time I want to add Testing connection... message to the user. When the user presses submit button I want to show loading button. I have tried this:
HTML:
<div id="loading">
<img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>
Jquery:
$(window).ready(function() {
$('#loading').hide();
});
CSS:
#loading {
width: 100%;
height: 100%;
top: 0px;
left: 0px;
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;
}
It's not working though. What's wrong?
Use:
$(document).ready(function() {
$('#loading').hide();
});
OR
$(window).load(function() {
$('#loading').hide();
});