I've got a minor problem I'm trying to resolve on my website. I have it currently so that a loading screen div appears above the page when the user visits and then fades away after a set time/the page is loaded, whichever comes latest. I want this div only to appear on first visit and would prefer to avoid cookies or anything server side. From what I understand I want to utilize session storage or referrer but have not had success with implementing that. Also, subsequent pages have a less prominent and faster loading screen that will have to go away only when each individual page has been visited once during the session. The applicable code is:
css:
.js div#preloader {
position: fixed;
left: 0;
top: 0;
z-index: 1000;
width: 100%;
height: 100%;
overflow: visible;
background-color: #202020;}
#preloader {
z-index: 1000; }
js:
jQuery(document).ready(function ($) {
$(window).load(function () {
setTimeout(function(){
$('#preloader').fadeOut(1500, function () {
});
},5000);
});
});
So it's likely obvious that I'm not well informed; I'm teaching myself as I go and needless to say I have a lot to learn about javascript. If I've done something horribly wrong here, which is entirely plausible, or a working demo is required, please let me know.
Thanks!
You can probably accomplish what you want using the sessionStorage object. In that object, you can track which pages have been visited in the current session.
The issue you can run into with JavaScript (and the reason I said it may not be the best approach) is that, when using a library, there is always a finite amount of time that passes while the library is loaded, parsed, and executed. This makes your "only appear on the first visit" requirement somewhat difficult to accomplish in JavaScript. If you show it by default and hide it with library code, it will show briefly each time you go to the page. If you hide it by default and show it with library code, it will be briefly hidden the first time you go to the page.
One way to handle this is to use embedded JavaScript that is executed immediately after the DOM for the preloader is defined. The downside to this is that you have to know how to write cross-browser JavaScript without assistance from a library like jQuery. In your case, the JavaScript required to simply hide the preloader is simple enough that it shouldn't have any cross-browser issues.
I created a simple page that demonstrates the technique. The source for this page is:
<html>
<head>
<style>
#preloader {
position: fixed;
left: 0;
top: 0;
z-index: 1000;
width: 100%;
height: 100%;
overflow: visible;
color: white;
background-color: #202020;
}
</style>
</head>
<body>
<div id="preloader">Preloader</div>
<script>
if (sessionStorage[location.href]) {
document.getElementById('preloader').style.display = 'none';
}
sessionStorage[location.href] = true;
</script>
<p>This is the text of the body</p>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function () {
setTimeout(function(){
$('#preloader').fadeOut(1500);
}, 5000);
});
</script>
</body>
</html>
I also created a fiddle for it: http://jsfiddle.net/cdvhvwmm/
Related
I have this div with an id of se-pre-con in my website which I only want to display once per website visit. I want to use session storage to display none the html div of se-pre-con after it's run once. But could do with some advice about how to approach this.
<div class="se-pre-con"></div> // the relevant html
.no-js #loader { display: none; } // the relevant css
.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(Preloader_10.gif) center no-repeat #fff;
}
<script> // the relevant jquery
// Wait for window load
$(window).load(function() {
// Animate loader off screen
$(".se-pre-con").fadeOut("slow");;
});
</script>
It's still not clear where you want to call that code from, but if I were you, I would reverse the code a bit. That is, always execute your stuff on the load event and decide what to do while in there. At that point it becomes trivial to put the loading of the object you want to fade out inside a function and call that piece of code from somewhere else (and you don't specify where you want to call it from, so I'll have to guess you want to call it after you set the value inside your sessionStorage.
function fadeObject() {
$(".se-pre-con").fadeOut("slow");
}
$(window).load(function() {
if (sessionStorage.getItem('htmldivwithid') !== 'false') {
fadeObject();
} else {
document.getElementById('htmldivwithid').style.display="none";
sessionStorage.setItem('htmldivwithid','true');
// call fadeObject()?
}
});
At this point you can call fadeObject() when you need it, from inside the load event (I put a comment where I expect you might want to call it).
fadeObject is not strictly necessary, but in case you need to change the object that fades you now have just one place to change instead of two, once you decide where you want to call it.
I answered my own question by using this script in the body section of the html page, it ensures the loader only ever runs once per browser session, exactly as I was trying to achieve.
<script>
if (sessionStorage.getItem('se-pre-con') !== 'true'){
// if the storage item 'se-pre-con', does not exist, run the code in curly
braces
document.getElementById("se-pre-con").style.display = 'block';}
else {
document.getElementById('se-pre-con').style.display="none";
// else (when above if statement is not met) hide the loader
}
sessionStorage.setItem('se-pre-con','true');
</script>
so i have this image code css, it works with some html also. what im trying to do is have an on screen button that toggles this code off or on. this is for my website. i want it default it's off. also, is it possible for the code to remember the users choice? like if the user wanted the overlay on, and then went to the other page, i would like it to remember the choice. sorry for my eng.. im learning.
css
div.nightmode {
opacity: 0.05;
background: url(**image url**);
width: 100%;
height: 100%;
z-index: 10;
top: 0;
left: 0;
position: fixed;
pointer-events: none;
}
html
<body>
<div class="nightmode"></div>
</body>
You have couple ways to do it. I think the best one is use cookies.
Here small example:
click on DIV to toggle
https://jsfiddle.net/sdx2rba9/49/
after refresh page cookie set background to previous choice
Cannot post in stackoverflow built-in jsfiddle (cookie-secrity).
REMEMBER: I am not advanced coder so my code can be not clean or written by long way.
Is there a javascript event I can hook into that will let me know when everything has finished drawing to the browser screen? Images, backgrounds, and DOM elements with proper CSS.
I am setting up some "loading..." divs that should disappear only when the page is perfect and ready to be shown to the user.
I am aware of $(document).ready and onLoad, but these are not what I mean.
I am using angularJS, but I dont think this should matter.
thanks!
As you may know, $(document).ready only waits for HTML structure and Javascript to load to trigger.
You better use :
$(window).load(function(){
//do stuff here
});
to wait for everything in your page to load (even pictures)
Though this solution will not trigger any event, it should help you.
Define CSS like this:
#dvLoading
{
background:#000 url(images/loader.gif) no-repeat center center;
height: 100px;
width: 100px;
position: fixed;
z-index: 1000;
left: 50%;
top: 50%;
margin: -25px 0 0 -25px;
}
Use the above in
<div id="dvLoading"></div>
And then do this:
$(window).load(function(){
$('#dvLoading').fadeOut(2000);
});
Demo: http://jsfiddle.net/jquerybyexample/ssqtH/embedded/result/
Source:http://www.jquerybyexample.net/2012/06/show-loading-image-while-page-is.html
Because you're using AngularJS, I can assume that your images and content are mostly loaded dynamically, in which case you cannot (easily) know when exactly all your content is even generated, and hence you'd also have no idea when all your images will be loaded since everything will be loaded asynchronously.
What you could do is have your DOM placeholders for widgets/apps/controllers be set to a loading-like state by default (a loading.gif maybe?) and when Angular generates the content it will just replace it. Look at http://docs.angularjs.org/guide/animations for how to implement animations on certain directives.
Then within those widgets/apps/controllers you would have to do the same thing with the content within them...
So basically it's a cascading "loading screen", where each level of your application loads up like a water fountain.
What is wrong with the $(document).ready or onLoad functionality?
$(window).load(function()
{
$(".loading").hide();
}
My Site have a small introduction with heavy images, here is the little animation on it:
Jquery
$(function(){
$('#intro-left').stop().delay(5000).animate({'width':'0'},4000, 'easeOutQuint');
$('#intro-right').stop().delay(5000).animate({'width':'0','left':'100%'},4000, 'easeOutQuint');
$('#intro-rights').stop().delay(5000).animate({'width':'0','left':'100%'},4000, 'easeOutQuint');
$('#intro-logo').stop().delay(10000).fadeOut(1500);
});
HTML
<div id="intro-left"></div>
<div id="intro-right"></div>
<div id="intro-rights"></div>
<div id="intro-logo"><img class="top" src="images/intro_top.jpg"><img class="logo" src="images/intro-logo.jpg"><img class="bot" src="images/intro-bot.jpg"></div>
<div id="header">
Rest of the Site...
CSS
#intro-left {
position: absolute;
z-index: 10000;
top: 0;
left: 0;
background: url(images/intro-left.png) right no-repeat;
width: 58%;
height: 100%;
}
#intro-right {
position: absolute;
z-index: 9000;
top: 0;
left: 32%;
background: url(images/intro-right.png) left no-repeat;
width: 68%;
height: 100%;
}
and as you can see, it is just full screen images and colors, the problem is that the Web surfer may miss that intro, or, have it introduced in a bad way, with images loading...
It make the intro ugly, then,
i want to know if there is a way to make all the content in the page invisible while it is loading, then, when all the content of that page is loaded, make it visible.
Maybe a display: none during the loading and then the page is loading make it block, something like that would work,
Is that posible? Or similar to it?
Thanks a lot in advance!
The following link will take you to a jquery loading plugin that allows you to add a pre-loader to your website which should be a great solution to your problem.
http://www.gayadesign.com/diy/queryloader2-preload-your-images-with-ease/
You would use the onComplete() function to have your intro start going after the page / pre-loader is finished.
Might look something like this:
$("body").queryLoader2({
barColor: "#6e6d73",
backgroundColor: "#fff1b0",
percentage: true,
barHeight: 30,
completeAnimation: "grow",
onComplete: function(){
$('#intro-left').stop().delay(5000).animate({'width':'0'},4000, 'easeOutQuint');
$('#intro-right').stop().delay(5000).animate({'width':'0','left':'100%'},4000, 'easeOutQuint');
$('#intro-rights').stop().delay(5000).animate({'width':'0','left':'100%'},4000, 'easeOutQuint');
$('#intro-logo').stop().delay(10000).fadeOut(1500);
}
});
Try encasing the whole page contents in <div id='loadHide' style='display:none'>...</div>
You can then add
$('#loadHide').show();
To the beginning of your code block, to display the contents once the document has finished loading.
The finished javascript would be:
$(function(){
$('#loadHide').show();
$('#intro-left').stop().delay(5000).animate({'width':'0'},4000, 'easeOutQuint');
$('#intro-right').stop().delay(5000).animate({'width':'0','left':'100%'},4000, 'easeOutQuint');
$('#intro-rights').stop().delay(5000).animate({'width':'0','left':'100%'},4000, 'easeOutQuint');
$('#intro-logo').stop().delay(10000).fadeOut(1500);
});
The display:none/display:block would likely work, and jQuery has a method of running code only after the page has fully loaded.
$(document).ready(function() {
$('#content').show();
// I would also recommend that you start your animation here, too
});
The $(document).ready solutions are good, but the document can be ready before all of your images are finished loading. If your main concern is waiting until all images are loaded, I would check out this question, which suggests that you use the $(window).load callback. Also, you can add onload event handlers to your images to be sure you don't start animating before images are loaded.
var image = new Image();
image.onload = function() {
//Animation code here
};
image.src = "http://i2.ytimg.com/vi/yW5Vv23HQWM/hqdefault.jpg";
This would only work if you are loading a single image. If you need to wait on more than one image, you would put your animation code somewhere else and each time an onload event was fired, you would check to see if all of your needed images are loaded yet. Once they have all loaded, call your animation code.
I have a webpage which heavily makes use of jQuery.
My goal is to only show the page when everything is ready.
With that I want to avoid showing the annoying page rendering to the user.
I tried this so far (#body_holder is a wrapper inside body):
$(function(){
$('#body_holder').hide();
});
$(window).load(function() {
$("#body_holder").show();
});
This works completely fine, but messes up the layout.
The problem is that hiding the wrapper interferes with the other jQuery functions and plugins used (eg layout-plugin).
So I guess there must be another trick to do this. Maybe lay a picture or div over the body until window.load has occurred?
What approaches do you use?
EDIT:
The solution most likely has to be another way than display:none or hide();
Anything done with jQuery will normally have to wait for document.ready, which is too late IMHO.
Put a div on top, like so:
<div id="cover"></div>
set some styles:
#cover {position: fixed; height: 100%; width: 100%; top:0; left: 0; background: #000; z-index:9999;}
and hide it with JS when all elements are loaded:
$(window).on('load', function() {
$("#cover").hide();
});
Or if for some reason your script uses even longer time then the DOM elements to load, set an interval to check the type of some function that loads the slowest, and remove the cover when all functions are defined!
$(window).on('load', function() {
$("#cover").fadeOut(200);
});
//stackoverflow does not fire the window onload properly, substituted with fake load
function newW()
{
$(window).load();
}
setTimeout(newW, 1000);
#cover {position: fixed; height: 100%; width: 100%; top:0; left: 0; background: #000; z-index:9999;
font-size: 60px; text-align: center; padding-top: 200px; color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li>This</li>
<li>is</li>
<li>a</li>
<li>simple</li>
<li>test</li>
<li>of</li>
<li>a</li>
<li>cover</li>
</ul>
<div id="cover">LOADING</div>
Here is a jQuery solution for those looking:
Hide the body with css then show it after the page is loaded:
CSS:
html { visibility:hidden; }
JavaScript
$(document).ready(function() {
document.getElementsByTagName("html")[0].style.visibility = "visible";
});
The page will go from blank to showing all content when the page is loaded, no flash of content, no watching images load etc.
You should try setting visibility to hidden instead of display:none. Setting visibility to hidden will retain all elements positions and dimensions, thus it shouldn't create layout problems.
Start your HTML with:
<body style="opacity:0;">
At the end of your script:
document.body.style.opacity = 1;
Stumbled upon this and tried #9ete's solution but it didn't help me.
This worked instead:
CSS:
html { visibility:hidden; }
JS:
window.addEventListener('load', function () {
document.getElementsByTagName("html")[0].style.visibility = "visible";
});
As per documentation for window, the load event is fired after all the content (images included) is loaded while $document says that ready is fired after only the DOM is ready.
Your question is valid, but I would not get in a practice of hiding or covering the page while things are spinning up.
It keeps the user from understanding what's happening on the page. While lots of things may need to load, different parts of the page should spring to life as they're loaded. You should get in the practice of locking controls that are not ready, perhaps displaying a spinner or some other progress indicator over them. Or setting the cursor to wait on loading items.
This keeps the user in the loop and allows him to see and interact with parts as they come online instead of obscuring all parts until everything is ready.
You will normally want to load the things the user needs the quickest access to, usually stuff above the fold, first. Loading is a prioritization that can easily be coordinated with Promises.
At the very least seeing the page allows the user to get his bearings and decide what to do. Be transparent.
I was seeking a non-javascript solution so I found one that is working on most browsers in acceptable manner.
Since the loading order of CSS rules matters;
Define the hiding class in the first CSS file or inline in head.
.hidden-onpage-load{ display: none; }
In the body, the class can be used as
<div class="hidden-onpage-load"> ... </div>
Redefine it inline or in a CSS file after all other CSS and JS files are loaded
.hidden-onpage-load{ display: block; }
The simplest solution I've come up with is to wrap the body in a as suggested previously, but set it as hidden from the get go, then use JQuery (or javascript) to unhide on load after all components are loaded.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="bodyDiv" hidden>
Hello World!
</div>
<script>
$(document).ready(function() {
// add JQuery widget loads here
$("#bodyDiv").show(); // reveal complete page
})
</script>
Don't forget, a lot of frameworks use javascript to structure a page. To prevent the page from showing before these modification have been made you'll need to do something like what is described here (e.g. run a script at the end of the page to show the real contents of the page):
Detect if any JavaScript function is running
If you have a div #bodyholder then you can put display:none in your CSS for it and then with jQuery do:
$(document).ready(function() {
$('#body_holder').show();
});
I don't see why hiding a div should interfere with the loading of anything, because all it means is it is hidden. However, if you have lots of jQuery being used then make sure you wrap it in $(document).ready which will make sure that the DOM is fully loaded before the Javascript is executed
A further point is that HTML/CSS is designed for progressive loading, and if you do it properly then you can get a nice progressive loading of content for your users. I personally wouldn't want my users getting a white screen for a few seconds until everything was loaded. Move your Javascript to the end of the page so that it doesn't block loading and get content onto the screen as quickly as possible.