Hiding page loading - javascript

My HTML markup looks like that
<html>
<body>
<div id="loading"><img src="core/design/img/load/load.gif" /></div>
<div id="wrap"></div>
<div id="footer"></div>
</body>
</html>
I'm trying to hide whole page loading process with following solution.
CSS Rules:
#loading {
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
background-image:url("img/load/tr.png");
z-index:100;
}
#loading img {position: absolute; margin-left:-110px; margin-top:-9px; left:50%; top:50%}
And Jquery
$(document).ready(function(){
$('#loading').fadeOut(500);
});
Now, the problem is page loads like that:
first ugly draft of page (for 1-2 seconds)
appears loading div
loading whole content
disappears loading div
You can see it in action
I don't understand why loading div appears after 1-2 seconds?
I want to prevent 1).

I think this is a pretty simple one.
First make sure jQuery is called in your section.
First, wrap all the content of your page (except the loading div) in a div called
<div id="content-wrapper">
CONTENT HERE
</div>
Then using CSS set:
#content-wrapper {
visibility:hidden;
}
Then just make the jQuery into a function like this:
$(window).load(function(){
document.getElementById("content-wrapper").style.visibility="hidden";
$('#loading').fadeOut(500, function()
{
document.getElementById("content-wrapper").style.visibility="visible";
});
});
and I can see you're using Nivo Slider. Me too ;)
Edit: I fixed it, now it works perfectly. (You don't need the onload event in your body tag anymore)
Check out the example here: JSFiddle

Try moving the styles for loading to be inline instead of relying on the full external css file to load. If you look at Google Chrome Developer Tools and the Network tab, or a similar tool, you'll see the content of the page loads first, as expected, but then you have to wait until the external css is loaded and downloaded, and then the referenced image in the css file is loaded. Placing the style inline should assist in getting the loading element to display as soon as it can, or at least sooner.
<div id="loading" style="position: fixed;left: 0;top: 0;
width: 100%;height: 100%;background-image: url(core/design/img/load/tr.png);z-index: 100;"><img src="core/design/img/load/load.gif"></div>

Why not start everything else inside a <div style="display: none;" id="loaded">, and then when the loading has finished use $("#loaded").fadeIn()?

Related

How to hide the div until the page load then show after the page completely loaded?

I want to hide the div till page load the i want show that div after the page is completely loaded, for that in my phtml file i tried this.
<div id='pilot' style="display : none">
<div class="trustpilot-widget" data-locale="en-US" data-template-id="5406e6b0d049e042d5f" data- businessunit-id="54c2a000ff00057c" data-style-height="28px" data-style-width="100%" data-theme="light">
Trustpilot
</div>
</div>
<script>
$(document).ready(function() {
$("#pilot").show();
});
</script>
But its not working, any help can be appreciated.
If your jQuery library is loaded in to the DOM and you can't see any errors on the console, then this code should work for 100% sure.
If this is your content all on the page, that will be rendered during milliseconds, so your jQuery code will be executed in no time. Make delayed showing the DIV, and in that case will seem like loaded after the page rendered.

jquery loading screen before html

I'm trying to implement this codepen into an html page. The idea is that it fades away after everything on the page loads. This is what I currently have.
HTML
<div class="js">
<body>
<div id="preloader"></div>
<!-- WEBSITE -->
</body>
</div>
</html>
(* ALERT: You cannot try to close a div tag after having closed the body element *)
CSS
Lots of CSS so I put it on codepen
JQUERY
jQuery(document).ready(function($) {
$(window).load(function() {
$('#preloader').fadeOut('slow', function() {
$(this).remove();
});
});
});
So it seems to be working fine except I can't seem to figure out the purple background. The spinner works perfectly but if I put background: #774CFF; in the .js div#preloader it doesn't cover the entire page in purple, only within the spinner.
You assign the background-color on the #preloader, which has 30px width and height.
So, either you apply the background-color to the body
body{
background-color:#774CFF;
}
either you wrap the #preloader with another element and stretch it to fit the screen:
HTML
<div id="preloader-wrapper">
<div id="preloader">
</div>
</div>
CSS
#preloader-wrapper{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
background-color:#774CFF;
}

How do you preload images into the Orbit slider?

The issues is that the slider is not displaying properly when a user first visits the site. In testing the slider worked fine.
Or actually there was problem that it would not load when first visiting the page, but would then show up when (and only when) you refresh the page. But otherwise the slider shows up but not the images
I looked at the documentation from Zurb at Zurbs documentation for the Orbit slider and they have a sample file, That original demo file has a link above the images (which I removed)
I then searched more on Google using the phrase about this topic using the keyword "orbit preload images" and found a One solution with a preload function. Below is the code that I used to preload (I only modified the path to the images)
<script language="javascript">
function preload(arrayOfImages) {
$(arrayOfImages).each(function(){
$('<img/>')[0].src = this;
});
}
preload([
'../images/products/mill/slider/dentist.jpg',
'../images/products/mill/slider/side.jpg',
'../images/products/mill/slider/before.jpg',
'../images/products/mill/slider/after.jpg',
'../images/products/mill/slider/radio.jpg'
]);
</script>
I went ahead and added script but it is still not loading. The complete code for that page is viewable in a Gist on GitHub
The code for the setup of the image slider is viewable in a Gist on GitHub
The site is hosted on a server that is in a .net environment that does not support php.
I had the same issue and after some research, found the answer that works for me;
Basically, you can use jquery to hide the slider whilst it's loading.
See also, this link for further info: how to show div #loading whilst div #content loads
Looking at your code, this should work (untested)
In the <head> section, add this;
<script type="text/javascript">
jQuery(document).ready(function() {
// hide orbit slider on load when user browses to page
$('#featured.orbit').hide(); // hide div, may need to change id to match yours
$('.loading').show(); // show the loading gif instead
// then when the window has fully loaded
$(window).bind('load', function() {
$('.loading').hide(); // hide loading gif
$('#featured.orbit').fadeIn('slow'); // show orbit
});
});
</script>
In your html page that contains the orbit slider code (content copied from your page)
<!-- =======================================
ORBIT SLIDER CONTENT
======================================= -->
<div style="width:100%;">
<div style=" max-width:480px; margin: 0px auto;">
<div id="featured" >
<!-- your content etc..... -->
<span class="orbit-caption" id="radioCaption">Radiograph shows crown seated with
excellent marginal integrity</span>
</div>
</div>
<?php //
// load the loading image - you need to add one to your image directory
// see here to generate one: http://www.ajaxload.info/ ?>
<div class="loading">
<img src="http://www.yourdomain.com/path/to/folder/loading.gif"/>
</div>
</div> <!-- end twelve columns-->
In your CSS you need to hide the #featured div
#featured { display: none; background: #f4f4f4; height: 600px;}
#featured img { display: none; }
#featured.orbit { background: none; }
.loading {margin: 0 auto;text-align:center;margin:30px; }
Hope that helps!

How do I check if a window is still loading and also finished loading?

I am creating a functionality where a user presses a button (Print Timetable) and then a popup window appears with a page showing their timetable and then the printing options automatically appear. However, when the popup is still loading the timetable I want to display an animated GIF. The timetable in the popup isn't fetched with AJAX so I can't use ajax start and stop so how would I do this then?
<input type="button" value="Print Timetable" class="printButton" onclick="window.open(url, ' _parent','height=550, width=800');"/>
This is what is happening so far in the timetable popup:
<div id="animated-logo" class="animated-logo">
Test
</div>
<script type="text/javascript">
$('.animated-logo').addClass('logo');
$('.animated-logo').removeClass('animated-logo');
if (window.print){ self.print();}
</script>
Obviously, that animated gif isn't going to work but it's a start.
Any help would be great. Thanks!
Have a look at jQuery's load() over here.
HTML
<div id="" class="itm-animated-logo">
Test
<div id="time-table">...</div>
</div>
jQuery
$("#time-table").load(function() {
$(this).parent().removeClass("itm-animated-logo");
}
CSS
.itm-animated-logo {background-image: loading.gif;}
So when the pop-up is loaded (with class itm-animated-logo), its background will be the loading.gif file. As soon as your time table is loaded (#time-table) the class of the pop-up will be removed and the background, subsequently, as well.
The downside of this may be that parts of the time table will get loaded (so the time table gets loaded in chunks) in which case they will be 'on top of' the background-image. To fix this you can make an extra div. Maybe this solution is even better:
HTML
<div id="" class="itm-animated-logo">
<div id="loading"><img src="loading.gif" alt="Loading your time table" height="32" width="32" /></div>
Test
<div id="time-table">...</div>
</div>
jQuery
$("#time-table").load(function() {
$(this).parent().children("#loading").fadeOut("slow");
}
CSS
#loading {
display: block;
width: 32px;
height: 32px;
margin: 50px auto;
padding: 0;
}

Load in external .html file with jQuery

I'm trying to create a website with tabbed browsing and have followed a tutorial to make this. But the problem is that the code I'm currently is using doesent work as expected.
HTML-code:
http://pastebin.com/CG146NS3
CSS-code: http://pastebin.com/4VCuAwJm
JavaScript: http://pastebin.com/sZhhQs6v
The tutorial I followed: http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/
The problem:
When I click one of the tabs the #content goes away with a slideUp and .load loads the content but it doesent place the content in #content.
You have some duplicate #ids.
Remember when you do:
var toLoad = $(this).attr('href')+' #content';
// other execution
function loadContent() {
$('#content').load(toLoad,function(){
$('#content').slideDown('normal');
});
you are actually loading a page fragment #content into #content in your page. So you end up with this:
<div id='content'>
<div id='content'>Random Data</div>
</div>
Okay, based on your comment..Just make sure that you actually have a DIv with ID #content in your random html files.

Categories