Develop Reference

background-image not fading in properly

I've been working on a loading screen for a one-page website, the loading screen is nothing more than a svg logo drawing itself out which works perfectly fine, but once the 'loading' is done i fade out the loading screen and fade in the content of the website.
It works fine except for the fact that when the content fades in it shocks really bad because of the background-image, i know that this is not the background-image loading itself because the whole reason there is a loading screen at all is to give the website time to load all of the images, so for some reason the fadein is not working properly.. perhaps it's the way i set up all the animations, have a look:
(i use jquery and animate.css for the fades)
JQuery:
setTimeout(function() {
$("#Builds").children().addClass("animatedLogo");
setTimeout(function() {
$(".loadingLogo").addClass("fadeOut");
setTimeout(function() {
$(".loadingScreen").addClass("fadeOut");
setTimeout(function() {
$(".loadingScreen").css('display', 'none');
setTimeout(function() {
$("body").css('overflow-y', 'auto');
$(".contentWrapper").addClass("fadeIn").show();
$("header").addClass("fadeIn").show();
setTimeout(function() {
$("body").css('background-color', "#fff");
}, 500)
}, 500)
}, 500)
}, 500)
}, 3400)
Html:
<div class="loadingScreen animated">
<div class="loadingLogo animated">
<svg>
//svg logo
</svg>
</div>
</div>
<div class="contentWrapper animated">
#yield('content')
</div>
so i pretty much already know that there is something wrong with the way that i am doing this, perhaps doing it like this is to performance heavy? any suggestions on how to do this differently are much appreciated!
thanks!

As you want to display a loading screen until your page content loads, you can replace your existing code with this code:
HTML
<div class="se-pre-con"></div>
CSS
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(images/loader-64x/Preloader_2.gif) center no-repeat #fff;
}
Note: Change background url in this css. Replace it with the your svg file which is going to be shown as loading image.
JavaScript
$(window).load(function() {
// Animate loader off screen
$(".se-pre-con").fadeOut("slow");
});
In this scenario, you don't need to fade In your page content manually. As soon as page loads all the content and window is ready, your loading screen will automatically fade out and your page will be visible to users. Your page's Background image will also not look bad, because it will be already loaded on screen.
You can Click here for further details.
Give a try to this approach and hope this will help you to overcome your issue.

loading div only visible on referrer

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/

javascript: "everything has finished drawing to the screen" event?

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();
}

Javascript : Preload loading image

I'm having trouble when displaying my loader in Javascript. Indeed, I have a lot of heavy videos in my assets folders, and when I load my page in Javascript, my image loader is showing only after a few seconds, whereas i would like it to be loaded first.
Is there a way to preload it, before all my video assets ?
Thanks a lot by advance !

In a script that gets run before any of the videos start downloading, etc.:
var img = new Image();
img.src = 'http://yoursite.com/preload-this-image.gif';
This should ensure that the image displays as soon as the DOM renderer reaches it.
If there are any heavy assets before it in the DOM holding back that process, you can move them ahead and move them back after document load with JavaScript.

You can show a loader gif before the whole page renders:
CSS:
.loader {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 9999;
background: url('/img/page-loader.gif') 50% 50% no-repeat rgb(249,249,249);
}
HTML:
<div class="loader"></div>
JS:
$(window).load(function() {
$('.loader').fadeOut('slow');
});

You can actually convert the image into a base-64-encoded string, and include it in your CSS or HTML. This guarantees that it'll be loaded before anything else.
Here's an image converter: http://webcodertools.com/imagetobase64converter
And you can use it as an inline image, or CSS background image:
Inline HTML:
<img alt="" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH+GkNyZWF0ZWQgd2l0aCBhamF4bG9hZC5pbmZvACH5BAAKAAAAIf8LTkVUU0NBUEUyLjADAQAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQACgABACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkEAAoAAgAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkEAAoAAwAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkEAAoABAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQACgAFACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQACgAGACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAAKAAcALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
or CSS:
background-image: url(data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH+GkNyZWF0ZWQgd2l0aCBhamF4bG9hZC5pbmZvACH5BAAKAAAAIf8LTkVUU0NBUEUyLjADAQAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQACgABACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkEAAoAAgAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkEAAoAAwAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkEAAoABAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQACgAFACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQACgAGACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAAKAAcALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==);

I would hard code image in the source of the page as base-64-encoded string, or replaced with an inline svg.
Also you could use rel="preload" and see if this works out for you:
<link rel="preload" href="bg-image.png" as="image" media="(max-width: 800px)">
see this: https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content

Hide page until everything is loaded Advanced

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.