I want to display to the user an initial page with some loading animation while loading the main page in the background.
Once the main page is loaded, the first page will redirect the browser to the main page.
I've tried putting the animation and the main page content on one page, but it still taking a long time until the user sees the animation itself.
Simple loading example I've tried in JSFiddle. The real page contains much more content.
<div id="preloader">
<div id="loader"></div>
</div>
<div id="map"></div>
Related
<div data-video="gPXSs-6qRFc"
data-autoplay="1"
data-loop="1"
id="youtube-audio">
</div>
<script src="https://www.youtube.com/iframe_api"></script>
<script src="https://cdn.rawgit.com/labnol/files/master/yt.js"></script>
If I stick this in the HTML, the div becomes populated with a play button, and the corresponding Youtube video (audio) will start to play. However, if I use Javascript to stick it on the page some time after the page has loaded, the div fails to become populated (I assume this is because the scripts we've added don't run).
Using Javascript (triggered by a user action), how can I put this content onto the page and make these scripts run?
So I have a php helpdesk script and I was wondering if it was possible to preload any page the user wants to view before the browser switches to it?
Like if the user is one page1.php and clicks on a link that leads to page2.php; is it possible to have a loading gif or something pop up; the next page is loaded and then the browser instantly changes the view from that of page1.php to page2.php.
In short, visually eliminating the page loading process.
Thanks in advance!
Do users ever go to Page 2 without going to page one? One possible solution would be to load both when the user browses to the page, hide page 2, and then when the user 'navigates' hide the first page and show the second page. They'd both be loaded, so you'd not need any spinner.
The HTML:
<div id="page1">
This is page one.
<div onclick="showNextPage()">Go to page two</span>
</div>
<div id="page2">
Page two.
</div>
The JS:
function showNextPage()
{
$("#page1").hide();
$("#page2").show();
};
The CSS
#page2 {
display:none
}
Is that helpful? Probably need to know more about your implementation to make a better suggestion :).
I already know how to do a "Splash Screen Div" for a loading page, just wait til everything is loaded and then hide the div or move it off screen.
E.g.
index.html
<div id="loading-Div">
<div id="bear-Logo">
<div id="target">
<div id="target2">
<div id="bearloop"></div>
</div>
</div>
</div>
</div>
loading.css
Just a class called 'fallback' to move the absolute-ly positioned div offscreen.
loading.js
$(window).load(function(){
$( '#loading-Div' ).addClass( 'fallback' );
});
The above is a rather crude example of a "loading Splash Screen Div", I don't know what else to call this, and the .css is imported in the <head> with the .js just before the end of the <body> tag.
This works fine if you click a link and want to show the div while the page loads, but I would like the div to be shown the second the link is clicked, until the destination page is loaded.
Workflow:
http://i.imgur.com/dIOZSMS.jpg
Key Points:
I have a feeling this is only possible with a browser plugin because:
The link isn't an anchor to another div. E.g. url#div -> url#div2
Based on the above, given that the link is to another .html page the content currently displayed would... stop based on how pages are displayed in nature.
Note that:
This is strictly intra-site.
I don't care about IE.
This isn't homework, nor for a client. I am learning web development and thought this would be a cool page transition, per se, and cannot figure out how to do it nicely.
I would prefer not do have an animation and callback for outgoing links to display the div, and then incoming links to display the div as a faked-coherent animation mainly because it wouldn't be coherent unless the download of the second page was instantaneous and because, even if the former was the case, far too much code and therefore file size would go into a coherent animation of whatever the div was to display.
Any ideas guys? I am very stumped on this.
Since your Javascript is at the bottom, it'll load asynchronously, after the page.
index.html
I don't understand why you nested the DIVs that way. Will the page load inside the logo element?
loading.css
With moving the div off the screen, is it part of your animation?
$(".fallback").animate({top: "+=400px", opacity: 0}, 1000);
loading.js
If you want to show an element after the link is clicked, just do it without the window.load function.
http://jsfiddle.net/Etd2D/
Is there a way to tell browser to show a loader image while a page is loading in background?
I am building an app which is basically a html5 app which will be loaded on webview. All files will be located on device itself, there is no interaction with server so AJAX can't be used.
If user navigates to other page then immediately loader should appear and then hide when page is completely loaded.
Is this something that can be done using JS?
Thanks
UPDATE:
I did exactly as mentioned by you all, showing loader on document ready, also showing it while page is getting unloaded and then on document ready, but the loader is not visible during the time when page has unloaded and the other page has not yet downloaded. Is there a way to bind loader to browser rather than a page?
You can place a loading screen over all content (position:absolute, 100% width and height) and fade it out when the page is ready.
demo: http://jsfiddle.net/G8GkA/
<div id="page">
<div id="loader"><span>loading...<span></div>
content....
</div>
fade out on load (using jquery):
$(function(){
$('#loader').fadeOut();
});
You could do something like this
<body>
<div class="LoadingStyle" id="LoadingInfo"></div>
<div style="visibility:hidden" id="Content">
<!-- All your content goes here -->
</div>
</body>
and in document ready you could do as such
$(function() {
$("#LoadingInfo").hide();
$("#Content").css("visibility", "visible");
});
The basic idea is to show something while document is not ready.
EDIT
You could play with it. It is not necessary to hide the content. You can overlay it with an absolutely positioned div and hide it only.
Have a page(PageLoader) which will load other pages using ajax, then the loader can be shown.
The PageLoader will take the page name as parameter and load the page.
My background image is decently large. When my page loads, the HTML is rendered before the background image is loaded onto the page. I would like for the background image to be the first thing to be loaded on the page and then the HTML. Right now it looks weird because without the background image, the text gets pushed up and when the background image is loaded, it all gets pushed to its regular position (not too professional-looking).
Is there anyway in javascript to accomplish this?
Thanks!
I think pre-loading an image is not a solution to you problem since you want the Images to load Before the HTML document is displayed to the user.
i dont have an exact solution but what i did was show a LOADING image to the user while the page loads up and then hide that loading image when the body and images are completely loaded. to do this
<body onLoad="document.getElementById('mydiv').setAttribute('style','display:none');">
<div id=mydiv style="position:absolute;top:0px;left:0px;width:100%;height:100%>
<center> <img src="loading.png>
</center>
</div>
<!-- Other HTML content here -->
</body>
This is just a rough code, hope this helps
You can write javascript that adds the rest of the page to the DOM once everything is loaded.
It's one of the easiest things you can do with jQuery.
However, I don't see the point. As a user I don't want you to do that to me.