I am using a preloader for my website. I simply designed it using CSS and coded the logic to hide the preloader when the website gets completely loaded.
The whole thing works on my local machine but when i put it online it doesn't work.
This is the link to the website : http://deepanshubatra.tk (Use google chrome please)
I am mentioning the HTML,CSS and javascript code:
CSS:
div#preloader { position: fixed; left: 0; top: 0; z-index: 999; width: 100%; height: 100%; overflow: visible; background: #333 url('http://files.mimoymima.com/images/loading.gif') no-repeat center center; }
Javascript
<script >
jQuery(document).ready(function($) {
// site preloader -- also uncomment the div in the header and the css style for #preloader
$(window).load(function(){
$('#preloader').fadeOut('slow',function(){$(this).remove();});
});
});
</script>
HTML
<div id="preloader"></div>
You have error in console:
Uncaught ReferenceError: jQuery is not defined
Add <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> to your head tag.
The error that is in the console on the page is jQuery is not defined. So you need to load jQuery in your scripts. Here is how you can use it with CDN:
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
You can try this code.
Add HTML inside the body.
<div class="se-pre-con">
<img src="../images/logo-02.svg">
</div>
Add this CSS Code:
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: #000;
margin: 0 auto;
text-align: center;
}
div.se-pre-con img{
max-width: 300px;
top: 20%;
position: relative;
}
div.se-pre-con.highlighted{
display:none;
}
And this jQuery code in the footer:
<script>
jQuery(function() {
jQuery(this).addClass('highlighted');
setTimeout(function () {
jQuery('.se-pre-con').addClass('highlighted');
}, 2000);});
</script>
Related
I am sorry for asking a very minor thing but I feel a bit helpless in this one. I have integrated a pre-loader image at my page load in a very simple way
This is my Page link
HTML: (Div for loading Pre-loader image)
<div class="se-pre-con"></div>
Jquery to trigger the pre-loader on page load
$(window).load(function() {
// Animate loader off screen
$(".se-pre-con").fadeOut();
});
A bit of Styling . CSS
<style>
.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('http://www.rybena.com.br:8080/RybenaRepository/resource/img/loading.gif') center no-repeat #fff;
}
Problem
When Page loads, it splashes before the Pre-loader image one time and then loads after the pre-loader image complete its effect. Theoretically, pre-loader should display before page load. I hope anyone of you can figure out where and what I did wrong?
Regards
I think your HTML isn't well formatted on the link you provided:
What I would do is make sure the HTML page has a structure similar to this:
<html>
<head>
<script>
</script>
</head>
<body>
<div class="se-pre-con"></div>
<div class="site-content"></div>
</body>
</html>
And inside your script tag have the following method:
$(window).load(function() {
$(".site-content").show(); //or fadeIn (what ever suits your needs)
$(".se-pre-con").fadeOut();
});
And in your css make sure you set
.site-content{
display: none;
}
EDIT: (To answer your question in comment- call loader at any time)
I would probably create a function like this:
function toggleLoader(show){
if(show == true){
$(".se-pre-con").show();
$(".site-content").fadeOut();
}
else{
$(".site-content").show();
$(".se-pre-con").fadeOut();
}
}
Then on window load you would call: toggleLoader(false),
When you make a request call: toggleLoader(true),
And when you receive a response call: toggleLoader(false).
page content is also visible on page load along with loader element so there no any sequence which content load first, but you can manger by following code, Suppose you have two div, one pre-loader div another site container div
<body>
<div class="se-pre-con"></div>
<div id="container" style="display: none;">
<!-- site content here -->
</div>
</body>
in container div add display: none style so site content cant't blink on page load.. and when page load then you can show container div, see below code
$(window).load(function() {
// Animate loader off screen
$("#container").show();
$(".se-pre-con").fadeOut();
});
Just gone thru your page link and noticed that display:none; was added to .se-pre-con as shown below. Please remove the display:none; property. It works buddy!
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('http://www.rybena.com.br:8080/RybenaRepository/resource/img/loading.gif') center no-repeat #fff;
display: none;
}
/* page Loader dynamically call */
/* for particular div and all page */
/*html*/
<div id="divLoaderContainer">
<!--Lodar for body start-->
<div class="preLoaderPage nodisplay">
<img class="loading-image" src="~/Content/Images/preLoader.gif" alt="Loading..." />
</div>
<!--Lodar for body end-->
<!--Lodar for div start-->
<div class="preLoaderDiv nodisplay">
<img class="loading-image" src="~/Content/Images/preLoader.gif" alt="Loading..." />
</div>
<!--Lodar for div end-->
</div>
/*css*/
.preLoaderPage {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
display: block;
opacity: 0.8;
background-color: #dae3ec;
z-index: 99;
}
.preLoaderDiv {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
display: block;
opacity: 1;
background-color: rgba(255, 255, 255, 0.94);
z-index: 99;
}
.preLoaderPage .loading-image {
position: absolute;
top: 50%;
left: 50%;
z-index: 100;
transform: translate(-50%, -50%);
width: 120px;
height: 120px;
width: 180px;
height: 180px;
}
.preLoaderDiv .loading-image {
position: absolute;
top: 50%;
left: 50%;
z-index: 100;
transform: translate(-50%, -50%);
width: 120px;
height: 120px;
}
/*Loader here end*/
/*JS function*/
// for full loader
function showLoader(id) {
if (id == null || id == undefined || id == '') {
$("div.preLoaderPage").removeClass('nodisplay');
}
else {
showPartialLoader(id)
}
}
function hideLoader(id) {
if (id == null || id == undefined || id == '') {
$("div.preLoaderPage").addClass('nodisplay');
}
else {
hidePartialLoader(id)
}
}
// for specific div loader
function showPartialLoader(id) {
var loaderdiv = $("#divLoaderContainer div.preLoaderDiv").clone();
$(loaderdiv).removeClass('nodisplay');
var content = $("div#" + id).closest('div.x_content');
if (content.length > 0)
$("div#" + id).closest('div.x_content').append(loaderdiv);
else {
$("div#" + id).append(loaderdiv);
}
}
function hidePartialLoader(id) {
var content = $("div#" + id).closest('div.x_content');
if (content.length > 0)
$("div#" + id).closest('div.x_content').find('div.preLoaderDiv').remove();
else
$("div#" + id + ' div.preLoaderDiv').remove();
}
/*call by JS*/
$.ajax({
showLoader(id);// id of div or container
success: function (data) {
// your code
},
hideLoader(id)// id of above div or container
});
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('http://www.rybena.com.br:8080/RybenaRepository/resource/img/loading.gif') center no-repeat #fff;
display: none;
}
I have a webpage that's pretty intensive via HTML and CSS, which leads to some elements loading faster then others when a user visits the page. The background may take awhile to load, and so on... It gets pretty ugly seeing it all load element by element...
So I'm wondering how I can first load a different page (page1, that has simply a gif and bare minimals of html) and then page2 (page with intensive html) will appear only after the client's browser has fetched all of the pages html.
I believe this can be done with JQuery, which I know almost nothing about...
Any advice would be appreciated,
Thanks,
Use the following HTML (at the top of the body is best):
<div id="loading"></div>
And this CSS:
#loading {
background: url('spinner.gif') no-repeat center center;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 9999999;
}
And the following JavaScript (uses jQuery):
function hideLoader() {
$('#loading').hide();
}
$(window).ready(hideLoader);
// Strongly recommended: Hide loader after 20 seconds, even if the page hasn't finished loading
setTimeout(hideLoader, 20 * 1000);
You could put the styles inline on the div instead of in a stylesheet for less chance of a flash of content before the loader. Also, you could use https://www.askapache.com/online-tools/base64-image-converter/ or a similar tool to convert your GIF to a base 64 URI, and use that instead of spinner.gif.
<div id="overlay"></div>
<style>
#overlay {
position: fixed;
background: rgba(0,0,0,0.8);
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.hide {
display: none;
}
</style>
<script>
$(window).load(function() {
$('#overlay').addClass('hide');
});
</script>
I have implemented in Laravel and it worked as expected,
<style>
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background-color: #ffffffcf;
}
.loader img{
position: relative;
left: 40%;
top: 40%;
}
</style>
<div class="loader" ><img src="{{asset('public/img/loader.gif')}}"></div>
<script>
window.onload = function()
{
//display loader on page load
$('.loader').fadeOut();
}
</script>
When i click the button, it will be navigate to another page, before the page loading completely i want to show the loading gif image.(without using Ajax)
First right after the body tag add this:
<div id="loading">
<img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>
Then add the style class for the div and image to your 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;
}
And finally add this javascript to your page (preferably at the end of your page, before closing body tag of course):
$(window).load(function() {
$('#loading').hide();
});
This is what I did
1.) Set div tag over body and give it an ID of 'page'.
2.) After that, place a div tag next to the 'page' div tag and give it an ID of 'loading'.
<div id="page">
<body>
//whatever you page code is
</body>
</div><div id="loading"></div>
3.) Setup CSS.
<style type="text/css">
#page {display: block;}
#loading {display: none;
position: absolute;
top: 0;
left: 0;
z-index: 100;
width: 100vw;
height: 100vh;
background-color: rgba(255, 255, 255, 0.5);
background-image: url('../Images/nameofgifimage.gif');
background-repeat: no-repeat;
background-position: center;}
</style>
4.) Finally, setup your JQuery. I am using VB.net so for the ID, I had to get the ClientID.
<script type='text/javascript' src="../Scripts/jquery-1.4.1.min.js"></script>
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="../Scripts/jquery.maskedinput.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#<%= btnSearch.ClientID %>").click(function () {
$('#loading').show();
return true;
});
});
</script>
If this does not work for you, let me know and I will try to figure out what is wrong.
I got simple html like below, my goal is to make the image full fill the page completely and proportionally and without the vertical scroll bar.
the image I use https://www.dropbox.com/s/w7t8sj7e5f86s8d/Dior2d1.jpg.zip
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div class="mainImg"><img src="my_big_photo.jpg"></div>
</body>
</html>
html, body{
width: 100%;
height: 100%;
}
.mainImg{
width: 100%;
height: 100%;
}
.mainImg img{
width: 100%;
height: 100%;
}
CSS tricks have an article on this.
You want technique number 2.
With your existing HTML, you'll want something like this:
body {
margin: 0;
}
.mainImg {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
.mainImg img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
http://jsbin.com/ekugASE/1/edit
Is there a reason why you would not load the image in the browser instead of an html page containing the image? Typically when someone wants to cover an entire page with an image it is only used as a background image. If that is the case you could set the background-image for the body in the css/style.
I have a loading mask that I would like to fadeOut() once the entire page has loaded. It works perfectly on the first time the user enters the page, but if they refresh, the loading mask disappears before the page has loaded. I have read quite a few articles out there and it seems that the common problem is that $(window)load usually doesn't fire events because of cache, but in my case it is fired too quickly upon refresh...What could be the issue?
1. <html>
2. <head><script type="text/javascript">
3. Ext.onReady(function() {....});
4. $(window).load(function(){$('#loading-mask').fadeOut(5000); $('#loading').fadeOut(5000);});
5. </script></head>
6. <body>
7. <div id="loading-mask"></div>
8. <div id="loading">
9. <span id="loading-message">Loading Tibet...</span>
10. </div>
11. </body>
12. </html>
Any help or guidance would be greatly appreciated :)
Thanks,
elshae
Ok so I found out that it's best if JavaScript code is placed in the body..
So now I have all my code in the body including the Ext.onReady, so here goes...
<html>
<head></head>
<body onload="">
<div id="loading-mask"></div>
<div id="loading">
<span id="loading-message">Loading Tibet...</span>
</div>
<script type="text/javascript">
//Default blank image needed for some ExtJS widgets/if no image is found...
Ext.BLANK_IMAGE_URL = "./ext-3.2.1/resources/images/default/s.gif";
Ext.onReady(function() {
.............
});
//Outside Ext.onReady
window.onload = function(){$('#loading-mask').fadeOut(5000); $('#loading').fadeOut(5000);}
</body></html>
//The css is:
#loading-mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/*background: #D8D8D8;*/
/* background: #6E6E6E;*/
background: #000000;
opacity: .8;
z-index: 1;
}
#loading {
position: absolute;
top: 40%;
left: 45%;
z-index: 2;
}
#loading span {
/*background: url('ajax-loader.gif') no-repeat left center;*/
background: url('globe.gif') no-repeat left center;
color: #BDBDBD;
width: 60%;
height: 30%;
padding: 60px 70px;
display: block;
}