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>
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>
Say a menu is triggered when a button is clicked, now
1_ For canceling it, the user has to be able to click anywhere on the page (not only on the same button),
2_ Everything else on the page must still remain selectable throughout this process.
Here's what I've tried:
$(".dad").click(function() {
$(".son").show();
$(".mask").show();
});
$(".mask").click(function() {
$(".son").hide();
$(".mask").hide();
});
.dad {
background: greenyellow;
width: 20px;
height: 20px;
margin-top: 100px;
z-index: 2;
}
.son {
position: relative;
left: 20px;
bottom: 100px;
width: 100px;
height: 100px;
display: none;
background: tomato;
z-index: 2;
}
p {
z-index: 2;
}
.mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
display: none;
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js "></script>
<p>This is a paragraph</p>
<div class="dad">
<div class="son"></div>
</div>
<div class="uncle"></div>
<div class="mask"></div>
This code satisfies the first condition(the ".son" hides when anywhere on the page is clicked), but the second condition isn't met. Because when the ".son" is visible, the paragraph is not immediately selectable, unless the user does another click. Although this seems like a minor problem, sometimes it can become a little annoying, thus is a requirement. (I've also tried other ways. E.g. CSS "pointer-events: none" on the mask, but it has a different purpose, because it also cancels click events). So how could it be done? Thanks in advance.
Note: This is not solely a CSS question, I embrace any Javascript or Jquery answers too should they give easier/better solutions.
Hope it helpful...
$(".dad").click(function() {
$(".son").show();
});
$(document).click(function (e) {
var container = $(".dad");
if(!container.is(e.target) &&
container.has(e.target).length === 0) {
$(".son").hide();
}
});
.dad {
background: greenyellow;
width: 20px;
height: 20px;
margin-top: 100px;
z-index: 2;
}
.son {
position: relative;
left: 20px;
bottom: 100px;
width: 100px;
height: 100px;
display: none;
background: tomato;
z-index: 2;
}
p {
z-index: 2;
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js "></script>
<p>This is a paragraph</p>
<div class="dad">
<div class="son"></div>
</div>
<div class="uncle"></div>
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/
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);
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();
});