Before I continue:
I am aware this has been done before.
I searched SO for this before deciding to post this...
Said that, I noticed that in some browsers that have settings to clear cache on every visit to a page, certain parts of my page show with delay. I would like to have a function that will display some animated image until the page is finished loading 100%.
I would like to place it in my header include file once and have it kick in every time a page loads. I think I need it to be implemented in AJAX. I would like this function to be a stand-alone, i.e. not tied to any other functions. Shall I use jQuery? Since jQuery itself requires loading an external file, should I implement it as a simple JS function?
Any feedback would be highly appreciated. Examples would be priceless.
:)
EDIT:
I found a plug-in that does exactly what I need.
With jquery you can do something like this
html
<div id="loader"></div>
$(window).load(function () {
$("#loader").fadeOut();
});
You can incldue a div with a loader (have it fixed, or absolute, whatever you like) and then with $(window).load( callback ); you can detect when the whole page has finished loading so you can hide the loader.
Or with pure JS you can do the same,
window.onload = function() {
document.getElementById('loader').style.display='none';
}
You can use the onLoad attribute for . Do something similar to:
<body onLoad='showLoadingDiv()'>
and make the showLoadingDiv function show a full-page white div with a loading sign.
Another (probably preferred) option is to have a
<div style='background:white; width:100%; height:100%'>LOADING</div>
and hide it as soon as the page completely loads, i.e. under jQuery's $(function() { });
This page includes some AJAX progress images to use.
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>
<script type="text/javascript">
//window.onload will wait for images
window.onload = function() {
//find element with id='progress' and hide it
$('progress').hide();
}
</script>
</head>
<body>
<img id="progress" src="https://forums.embarcadero.com/servlet/JiveServlet/download/2-21014-135909-1751/progress2.gif" style="display:show;">
<h1="">This is a solar eclipse</h1>
<img src="http://www.zam.fme.vutbr.cz/~druck/eclipse/Ecl2008m/Tse2008_1250_mo1/Hr/Tse2008_1250_mo1.png" width="50%" style="display:show;">
<p>Pretty and large enough to have to wait for</p>
</body>
</html>
I hope this helps
Related
I'm developing a single-page web app. What I did is that I have a main page index.html where I have all the skeleton of the app but I have in the body a div that i use to load the contents of the page that I want to show. In the loaded page I have a div whose contents need to loaded as well. The issue is that the contents of the second div doesn't appear and I can't figure out why.
I think you would need an example to better understand.
I have two html files: index.html and browse.html.
First here is browse.html:
<div id="browse_contents">
</div>
Finally here is index.html:
<html>
<head>
//load jquery
<script>
$(document).ready(function(){
$("#browse_page").load("browse.html")
$("#browse_contents").html("<p>The contents.</p>")
});
</script>
</head>
<body>
<div id="browse_page"></div>
</body>
</html
So the problem is that "The contents." doesn't appear and I can't figure out why!
Currently, #browse_contents doesn't exist in the DOM when you are attempting to change its HTML.
.load() is asynchronous, which is why it and other jQuery AJAX methods come with a callback parameter; a function to call when the request is complete:
$(document).ready(function(){
$("#browse_page").load("browse.html", function(){
$("#browse_contents").html("<p>The contents.</p>");
});
});
I'm trying to make a simple gallery page. The website will always reload after pressing "Next" and I want to make some prerender for the next slide (for better performance and faster load).
At the moment I'm using prefetch/prerender options from HTML5, for Chrome and FireFox:
<!DOCTYPE html>
<html>
<head>
<link rel="prefetch" href="index2.html">
<link rel="prerender" href="index2.html">
</head>
<body>
<img src="big_big_buck_bunny.jpg"/>
Next
</body>
</html>
Is there any other way to cache/prerender next page (in this example - index2.html) ? For example using JavaScript? I'm asking about it because I want to make the prerender work also on Opera 12 and IE (8/9).
Maybe use AJAX. In jquery exists .load() method (http://api.jquery.com/load/)
$('#next').click(function () {
$('#container').load('http://fiddle.jshell.net/webdevem/JfcJp/show/');
});
$('#prev').click(function () {
$('#container').load('http://fiddle.jshell.net/webdevem/JfcJp/show/ #specialContent');
});
Here You have example jsfiddle
If your going to navigate to a new page there's no way to precache html. That's what Ajax is for.
You can Ajax in the html, set the document body to the new html. But if the use reloads the page it will be at the wrong place unless you set a #! In the URL. There's not a lot of nice options with IE8.
Cant you see just preload the images, The page itself isnt gona take any time to build...is it?
Not quite sure how to define this issue. I just started working with jQuery and Javascript and pretty much everything is fine, except for when the page initially loads. I have the page fade in, but it looks like all the CSS isn't being applied until the jQuery loads.
I tried this script in my Head tag, but it doesn't work. Help?
<script type="text/javascript">
$(function(){
$('#box-container').hide();
});
$(window).load(function() {
$("#box-container").show();
});
</script>
Whoops: site: http://www.elijahish.com
You should use a Javascript console like Chrome Console or Firefox Firebug to debug your code.
First, you are placing your script block which requires jQuery before jQuery is defined:
<head>
<script type="text/javascript">
$(function(){
$('#box-container').hide();
});
$(window).load(function() {
$("#box-container").show();
});
</script>
...
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
...
So you would see the following (in Chrome Console):
ReferenceError: $ is not defined
$(function(){
Second, you seem to be trying to run a script which is accessing (in the first block) an element (#box-container) before it has been seen in the DOM itself. You could use jQuery.ready on that first block, but that could be messy. I would instead suggest you place this right after <div id="box-container"> is defined:
<body ...>
<div id="box-container" ...>
...
</div>
<script type="text/javascript">
(function($){
$('#box-container').hide();
$(window).load(function() {
$("#box-container").show();
});
})(jQuery);
</script>
Demo: http://jsfiddle.net/5JpVB/4 (I use a setTimeout for dramatic effect.)
Or put it directly after the <div ...> is opened:
<div id="box-container">
<script type="text/javascript">
(function($){
$('#box-container').hide();
$(window).load(function() {
setTimeout(function(){
$("#box-container").show();
}, 2000);
});
})(jQuery);
</script>
Box Container shown on window.onload.
</div>
http://jsfiddle.net/5JpVB/5/
And the coup de grâce (document.write nothwithstanding):
<head>
...
<script>
document.write('<style>#box-container{display: none;}</style>');
</script>
...
</head>
http://jsfiddle.net/5JpVB/2/
Yes, that is a script that "puts" the style display: none into the header, which "neatly" bypasses some of the conjecture that's been thrown around (there's downsides for each method, more or less). There's an elegance to this method (except, of course, using document.write, which is icky).
And yet another way, using the CSS display: none method:
<head>
...
<style>
#box-container {
display: none;
}
</style>
...
<div id="box-container">
<noscript><style>#box-container{display: block;}</style></noscript>
Box Container shown on window.onload.
</div>
http://jsfiddle.net/5JpVB/3/ (Just the Result page, disable Javascript to see it work.)
You are getting a case of FOUC : http://www.bluerobot.com/web/css/fouc.asp/
And, years later we are still plauged! http://paulirish.com/2009/avoiding-the-fouc-v3/
A variety of solutions are included on this link.
You could also set the style of your content to be hidden before running the javascript that shows the content. Jared shows you a nice way to do this.
Might I make a suggestion that you use combination of CSS and JavaScript, rather than one or the other. I had the same issue using jQueryUI on a site I'm building and found that a lot of these solutions out there would make the contact unavailable to those without JavaScript.
So here is what I did:
CSS:
.flash #wrapper {
display: none;
}
What this does is set the <div id="wrapper"> to hidden only if it is a decendent of the class flash. So to keep it from being hidden from those with out javascript I add the class flash to the <html> element. So it can only be physically hidden if the end user has JavaScript enabled, otherwise they'll at least have access via the unstylized content.
JavaScript:
$('html').addClass('flash');
$(doctument).ready(function() {
/* Do all your stuff */
/* When done show the wrapper with the content stylized */
$(#wrapper).show();
});
Depending on your pages time to load you might get a little flash, but it wont be a flash of unstylized content, which is rather ugly. In my case I had a jQueryUI menu item that would flash the normal <ul> element first then the menuUI item, and my <div> elements are resized with jQuery so that each <div> column is equal hight, but it would flash the different heights first. This fixed it while still giving accessability to none Script enabled browsers.
I am trying to use jQuery's .load function to dynamically load content into my webpage. This seem so simple, but I cannot make it work. To try and figure it out, I made a test page with just basic structure, but the external content still won't load:
jquery.html
<html>
<head>
<title>JQuery Test</title>
<script src="jquery1.5.min.js"></script>
</head>
<body>
<script>
$('#foo').load('test.html');
</script>
<div id="foo"></div>
</body>
</html>
test.html
<p>Text text</p>
I'm sure I have made a tiny error, but I can't find it anywhere!
You need to encapsulate your script in the $(document).ready() otherwise #foo won't exist when the script is executed:
<script>
$(document).ready(function(){
$('#foo').load('test.html');
});
</script>
You need to wait for the document to be ready before you can access the DOM. Just add a $(document).ready() around your original code:
<html>
<head>
<title>JQuery Test</title>
<script src="jquery1.5.min.js"></script>
</head>
<body>
<script>
$(document).ready( function() {
$('#foo').load('test.html');
});
</script>
<div id="foo"></div>
</body>
</html>
or if you want a shorter code:
$(function() {
$('#foo').load('test.html');
});
Informally, what's happening is that, as your browser reads the code you wrote, it's drawing its contents as it goes along. When it reaches your <script> tag, it executes it. But when $("#foo") gets executed, the browser's still processing the <script> and hasn't reached the part of the code where you told it there's a div called foo, so the browser doesn't know it exists, and jquery will just find nothing.
Of course, the idea that the browser will just sequentially read your code and render it as it goes is naive at best, so while it might seem that just moving the <script> tag to the bottom of the code would work, you're not actually guaranteed it will work. Instead, the browser will notify you when it's done drawing the page by firing a load (and possibly a DOMContentLoaded) event. So all code that depends on the whole html being drawn should be executed in an event handler bound to those events.
jQuery makes waiting for the page to be loaded easy, just use something like this:
$.ready(function() {
doStuff();
});
On my site a number of operations can take a long time to complete.
When I know a page will take a while to load, I would like to display a progress indicator while the page is loading.
Ideally I would like to say something along the lines of:
$("#dialog").show("progress.php");
and have that overlay on top of the page that is being loaded (disappearing after the operation is completed).
Coding the progress bar and displaying progress is not an issue, the issue is getting a progress indicator to pop up WHILE the page is being loaded. I have been trying to use JQuery's dialogs for this but they only appear after the page is already loaded.
This has to be a common problem but I am not familiar enough with JavaScript to know the best way to do this.
Here's simple example to illustrate the problem. The code below fails to display the dialog box before the 20 second pause is up. I have tried in Chrome and Firefox.
In fact I don't even see the "Please Wait..." text.
Here's the code I am using:
<html>
<head>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.dialog.js"></script>
</head>
<body>
<div id="please-wait">My Dialog</div>
<script type="text/javascript">
$("#please-wait").dialog();
</script>
<?php
flush();
echo "Waiting...";
sleep(20);
?>
</body>
</html>
You'll need to run that piece of code immediately after your <body> tag, something like:
<html>
<head>
</head>
<body>
<div id="please-wait"></div>
<script type="text/javascript">
// Use your favourite dialog plugin here.
$("#please-wait").dialog();
</script>
....
</body>
</html>
Note I omitted the traditional $(function (){}) because you need this to be loaded as soon as the page is shown, not after the whole DOM is loaded.
I've done this before and works great, even if the page has not finished loading yet.
EDIT: you'll have to be certain the jQuery dialog plugin you're using is loading before your entire DOM loads. Usually this is not the case, you it won't work. In that case, you'll need to use a g'old plain JavaScript solution, such as Lightbox 1 or Lightbox 2.