My html page loads a bit slowly because of the jquery that's in it. I want an image that tells the user that it's loading, until the entire page get loaded. How should I go about doing this?
Many thanks in advance.
<script type="text/javascript">
$(document).ready(function(){
//my jquery here....
});
</script>
Design the page with the loading message already included so that when the page loads from the server, the message is already showing.
Then, using jQuery, you can hide the message as soon as the page is ready:
$(document).ready(function(){
$('#loadingMessage').hide();
});
http://www.jsfiddle.net/dactivo/m4Bxe/
window.onload = function () {
$("#loading").hide();
};
window.onload will wait the whole loading of the page. ready() waits the DOM to be ready which is practically inmediate.
You can read this in these jquery docs
"While JavaScript provides the load
event for executing code when a page
is rendered, this event does not get
triggered until all assets such as
images have been completely received.
In most cases, the script can be run
as soon as the DOM hierarchy has been
fully constructed. The handler passed
to .ready() is guaranteed to be
executed after the DOM is ready,"
Justin's method will do the trick.
make sure you are optimizing the way resources are loaded, for example putting your scripts at the bottom of the page so they don't block HTML rendering
http://developer.yahoo.com/performance/rules.html
Hm, you can load an image that says "loading", then load the rest of the document's scripts by either doing something like:
var TM_script = document.createElement('script');TM_script.src = 'http://www.yoursite.com/script.js';document.getElementsByTagName('body')[0].appendChild(TM_script); someFunctionInScript();
Alternatively, you can just load the image, and then submit Ajax requests to load the rest of the page. You can also try even doing an animated gif or another image at the top of the page, and once the document has loaded (and your script activates), remove that image.
have a background-image set through css to the body, and remove the element in document.ready
I know this a fairly old thread, but the below solution worked for me although jQuery is needed:
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):
<script language="javascript" type="text/javascript">
$(window).load(function() {
$('#loading').hide(); });
</script>
Then adjust the position of the loading image and the background color of the loading div via the style class.
This is it, works just fine. But of course you have to have an ajax-loader.gif somewhere.
Try AJAXLoad They have some great animated GIF's there.. :)
Related
It's possible to disable an entire page html if the js is disabled on the browser of the user?
EDIT:
Thank you all for the answers and comments! However, what I mean is: I want that the page is replaced with something else, like an image, in that case.
The noscript tag defines an alternate content for users that have disabled scripts in their browser or have a browser that doesn't support script.
You can do something like this in your html body to display whatever image you want to show:
<noscript>
<style type="text/css">
.wrapper {display:none;}
</style>
<div>
<img src="src/to/your/image.png" alt="You don't have javascript enabled">
</div>
</noscript>
The css inside the noscript tag will hide the html content inside the wrapper class.
Not that I am aware of. Somewhere somehow you need to tell the browser to prevent the action/event linked to it, eg returning false, which is a task for javascript. I can come up with two alternatives:
Make all anchors dummies and correct them when JS is turned on:
foo
$('a').each(function(){ this.href = $(this).data("href");} // * jQuery for simplicity
Put an layer on top of the anchor, which you can remove with JS.
.BlockedAnchor a{ position: relative; }
.BlockedAnchor a:before{
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
$('body'removeClass("BlockedAnchor");
I am working on an asp.net web form project which has a site.master page as well as other aspx pages that use the site master.
I have a div on the site master as such:
<div id="msg" class="dialog">loading, please wait...</div>
Full context of it (the site master) is as such (note im keeping it simple here):
<body id="pageContainer">
<div id="msg" class="dialog">loading, please wait...</div>
<div id="pageBody">
<form id="formMaster" runat="server">
</form>
</div>
</body>
The class=dialog is defined as such for the div:
.dialog {
display: none;
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
}
Basically I use this when I want to display "loading please wait" across requests, and I turn it on / off via jquery:
// Simulate some time before everything's loaded
setTimeout(function () {
$("#msg").fadeOut(function () {
// Wait for #msg to fade out before fading in #pageBody
$("#pageBody").animate({
opacity: "1.0"
}, 1);
});
}, 1);
This is done inside of $(document).ready(). I need to simulate some time and then I make the pageBody div visible (using the opacity property)...This seems to work fine but upon initial say hyperlink clicks / submits that redirect a user to another page the loading doesn't show up right away...it takes quite some time to show up confusing the user.
For instance if I have a simple hyperlinked page (where that page has LOTS of database data)...The initial click of that hyperlink shows the spinning circle (in chromes tab) and then finally takes you to that page. At that point my loading div comes up and finally that fades out and the page is shown. I was hoping instantly my loading div can come up so that the user knows something is happening. Most of our users are not too savvy on the web so they dont even pay attention to the browser spinning wheel, they just think the page is not responding (I dont blame them, this can be tricky).
What can I do so that this loading, please wait... div comes up almost instantaneously? Or even can I ?
Yes you can, using Javascript/jQuery and a begin-end request.
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginLoading);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endLoading);
function beginLoading(sender, args) {
var LoadingDiv = $find(LoadingDiv);
if (LoadingDiv!= null) {
LoadingDiv.show();
}
}
function endLoading(sender, args) {
var LoadingDiv = $find(LoadingDiv);
if (LoadingDiv != null) {
LoadingDiv.hide();
}
}
I have a loading gif that I have appearing on the screen when someone comes to my page. It looks like this:
<style type="text/css">
#dvLoading
{
background: 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;
}
</style>
and my javascript that shows this looks like this:
<script class="code" language="javascript" type="text/javascript">
$(window).load(function () {
$('#dvLoading').fadeOut(2000);
});
</script>
However, it seems as though the page loads and then the loading gif briefly appears. Is there a better event other than .load that will do the job for me?
You wont be able to achieve this effect the way you are doing it. Because your styles and your javascript loads with the page, so by the time you display your loading animation everything is already loaded. The only way you can achieve your goal is to load empty html shell with your loading indicator and javascript that will request the rest of the html through async ($.ajax) request, this way you can show your loading indicator once async request is issued to get html and hide it when async request is done.
So perhaps your problem is that your script to hide the gif starts running before the image is actually loaded.
Rather than loading the image with css, you could load it dynamically on document load and set your fadeOut to fire on image load.
js:
var $img = $('<img>', {
src: '../images/loader.gif',
id: 'dvLoading'
}).load(function() {
$(this).fadeOut(2000);
});
UPDATE
forgot to attach your image. of course this could be to any element you choose
$('body').append($img);
the event you are using is correct as load is called after all resources are loaded including images css etc.
To make gif appear, instantaneously, before other images load in the page, try and load the gif at the start of body. Also, you can host the gif in a CDN for faster availability.
I am relatively new to js and for the life of me can not figure out the issue with this function. I am just trying to resize the div's width on a page resize. The css is also included in case that has anything to do with it.
<div id="lowerPattern"></div>
<script>
$( window ).bind("resize", function() {
// Change the width of the div
$("#lowerPattern").css('width', '300px');
});
</script>
/*CSS*/
#lowerPattern {
height: 99px;
width: 10px;
background-color: green;
/*Keeps div centered on resize*/
position: absolute;
left: 50%;
margin-left: -300px;
}
It's working fine for me: http://jsfiddle.net/kuaYV/
Have you made sure JQuery is loading properly? Also, try putting the function in $(document).ready() like so:
$(document).ready(function() {
$( window ).bind("resize", function(){
// Change the width of the div
$("#lowerPattern").css('width', '300px');
});
});
Edit: If it's still not working, it could be something to do with the parent element's CSS. Also make sure you don't have any other elements with the same id attribute on the page.
enclose your code inside $(document).ready(function(){}); like this:
$(document).ready(function()
{
$( window ).bind("resize", function(){
// Change the width of the div
$("#lowerPattern").css('width', '300px');
});
});
DO you know that you must load Jquery?
You must either put the jquery source code into a file and save it or download it everytime you run the website with a CDN(Contact Delivery network.)
Also you must load Jquery. Go to their site and download the source. Save to a textfile with the .js extension.
After that write
<script type="text/Javascript" src="MyJquery.js"></script>
in the head area of the HTML
The other option is to use a CDN and write:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
This will load the jquery to your website
you must put the code into
$(document).ready(function(){
//put all your code here
});
If you are using a CDN check your net connection. If the internet connection is lost it will not load the Jquery while you are trying to run
I wasn't sure how to correctly word the title, but here's what I have going on. I have two images in the body of the html.
<img src="http://www.narm.org.uk/home/images/Daylight%20design.jpg" id="b1" alt="day" />
<img src="http://www.aphoenix.ca/photoblog/photos/NighttimeColours.jpg" id="b2" alt="night" />
The corresponding css is as follow (basically makes one of them the background):
#b1, #b2 {
width: 100%;
height: 100%;
z-index: -1;
position: absolute;
}
Here is the javascript:
window.onload = function() {
setBackground();
}
function setBackground() {
var back1 = $('#b1').hide();
var back2 = $('#b2').hide();
//setTimeout(function() {setBackground()}, 1000);
}
What currently happens now is that one image will display briefly because I"m waiting until the page has loaded to hide both the backgrounds. How would I go about hiding the backgrounds before the page has completely loaded?
Maybe with css on your images:
display: none;
So, styles will be like:
#b1, #b2 {
width: 100%;
height: 100%;
z-index: -1;
position: absolute;
display: none;
}
I think you want to use jQuery.ready:
jQuery(function($) {
var back1 = $('#b1').hide();
var back2 = $('#b2').hide();
});
The window.onload function is fired when all external sources is loaded (styles, scripts, images, etc..)
jQuery's ready method is fired when the DOM is ready.
A little article about the difference
Take the function out of the window.onload call, and move it to between two script tags at the top of the page. The browser reads from top to bottom, so it will execute the code as soon as it sees it.
so make your code look something like this:
<head>...
<script>
setBackground();
</script>
...</head>
i think you have to create a custom functions for this, you can have all your content hidden, once the page is ready .load() you hide you background then show the new background and the content
If I understand correctly, you want to preload the images and keep them hidden until you need them.
Rather than JavaScript, css seems to be the way to go here. However if you use display:none; some browsers might decide to delay the image load. My suggestion is to move the images offscreen:
#b1, #b2 {
left: -9999px;
top: -9999px;
z-index: -1;
position: absolute;
}
[Update] Here is a test page for display:none:
http://www.quirksmode.org/css/displayimg.html
It mentions that Opera will not load the images.