PDA

View Full Version : Loading Screens



mburt
07-29-2006, 09:12 PM
Hi
I've seen other websites that having a message displaying while the page is loading. I've always wondered how to do this, and I've been fooling with the idea for a while, but I still can't do it.

All help appreciated

Twey, jscheuer1? :)

mburt
07-29-2006, 10:11 PM
any help??

blm126
07-30-2006, 02:38 AM
Your page has to be loaded with AJAX or a similar solution(maybe flash?) first. Then you can worry about a loading message.

mburt
07-30-2006, 02:41 AM
hehe.. This may sound odd... but i have never coded in AJAX!! :) ....there. look, i said it. So, a little more in depth on that, and it might help me.

shachi
07-30-2006, 06:01 PM
but i have never coded in AJAX!!

mburt: AJAX is not a scripting/programming language, just a technique. If you want real progress bar(which actually shows percent loaded) then simple javascript is not going to help you. If this is not what you want then you can place animated gifs(http://ajaxload.info)).

EDIT: Sorry, forgot to ask. What are you trying to do mburt??

mburt
07-30-2006, 07:26 PM
Well, what you said pretty well summed it up.. :rolleyes:

mburt
07-30-2006, 07:30 PM
So... How do you think I could actually get a progress bar with the actual precentage of the page that is finished loading? :)

shachi
07-30-2006, 07:37 PM
To tell you the truth, I have never attempted something like that and I have no idea.:p

But I have been attempting to make successful javascript preloaders. I'll let you know when I complete it.

You can however make progressbars in case of AJAX by expanding the width of div by a quarter for each readyState.

For e.g: 1: 25%;2: 50%;3: 75%;4: 100%

mburt
07-30-2006, 07:51 PM
Great, I'll check that out when you finish it

shachi
07-30-2006, 07:55 PM
Actually I have 80% belief that it will work but it is a very hectic process.:(

mburt
07-30-2006, 07:58 PM
Oh. I would imagine it is. Thanks for all your help!

shachi
07-30-2006, 08:06 PM
Here is an implementation of it. Dunno if it works:



<html>
<head>
<title>Javascript Progressbar Implementation</title>
<script type="text/javascript">
var XHR = false;

if(window.XMLHttpRequest){
XHR = new XMLHttpRequestObject();
} else if(window.ActiveXObject){
XHR = new ActiveXObject("Microsoft.XMLHttp");
}

function getData(url){
if(XHR){
XHR.open("GET", url);
XHR.onreadystatechange = function(){
if(XHR.readyState == 1){
var progressbar = document.getElementById("int");
progressbar.style.width = "25%";
} else if(XHR.readyState == 2){
progressbar.style.width = "50%";
} else if(XHR.readyState == 3){
progressbar.style.width = "75%";
} else if(XHR.readyState == 4 && XHR.status == 200){
progressbar.style.width = "100%";
var conarea = document.getElementById("content");
conarea.innerHTML = XHR.responseText;
conarea.style.visibility = "visible";
}
}
XHR.send(null)
}
}
getData("file.txt");
</script>
<style type="text/css">
#ext {
height: 10px;
width: 200px;
border: 1px solid;
top: 50%;
left: 40%;
position: absolute;
}
#int {
height: 10px;
width: 0%;
background-color: #0000ff;
}
#content {
visibility: hidden;
}
</style>
</head>
<body>
<div id="ext">
<div id="int"></div>
</div>
<div id="content">

</div>
</body>
</html>

mburt
07-30-2006, 08:18 PM
Nope, not at all. :D Thanks anyway though

shachi
07-31-2006, 06:12 AM
It will work if you execute it in your web server or local server (/var/www/).

mburt
07-31-2006, 03:53 PM
Ok, i'll try that now.

shachi
07-31-2006, 05:06 PM
Here, the fixed version:



<html>
<head>
<title>Javascript Progressbar Implementation</title>
<script type="text/javascript">
var XHR = false;

if(window.XMLHttpRequest){
XHR = new XMLHttpRequest();
} else if(window.ActiveXObject){
XHR = new ActiveXObject("Microsoft.XMLHttp");
}

function getData(url){
if(XHR){
XHR.open("GET", url);
XHR.onreadystatechange = function(){
if(XHR.readyState == 1){
document.getElementById("int").style.width = "25%";
} else if(XHR.readyState == 2){
document.getElementById("int").style.width = "50%";
} else if(XHR.readyState == 3){
document.getElementById("int").style.width = "75%";
} else if(XHR.readyState == 4 && XHR.status == 200){
document.getElementById("int").style.width = "100%";
var conarea = document.getElementById("content");
conarea.innerHTML = XHR.responseText;
conarea.style.visibility = "visible";
document.getElementById("ext").style.visibility = "hidden";
}
}
XHR.send(null)
}
}
getData("file.txt");
</script>
<style type="text/css">
#ext {
height: 10px;
width: 200px;
border: 1px solid;
top: 50%;
left: 40%;
position: absolute;
}
#int {
height: 10px;
width: 0%;
background-color: #0000ff;
}
#content {
visibility: hidden;
}
</style>
</head>
<body>
<div id="ext">
<div id="int"></div>
</div>
<div id="content">

</div>
</body>
</html>


the file.txt:



This is a test. This is a ajax test.
This is a bla this is a bla this is a bla.
<img src="http://www.atpm.com/11.02/nature/images/blue-flower.jpg" border="1">
sdfjjlkfdsjlkfdsjlkfds
This is a bla this is a bla this is a bla.
This is a bla this is a bla this is a bla.
This is a bla this is a bla this is a bla.
This is a bla this is a bla this is a bla.

This is a bla this is a bla this is a bla.
This is a bla this is a bla this is a bla.
This is a bla this is a bla this is a bla.
This is a bla this is a bla this is a bla.
This is a bla this is a bla this is a bla.
This is a bla this is a bla this is a bla.
This is a bla this is a bla this is a bla.
This is a bla this is a bla this is a bla.
This is a bla this is a bla this is a bla.
This is a bla this is a bla this is a bla.
This is a bla this is a bla this is a bla.
This is a bla this is a bla this is a bla.
This is a bla this is a bla this is a bla.
This is a bla this is a bla this is a bla.
This is a bla this is a bla this is a bla.
This is a bla this is a bla this is a bla.This is a bla this is a bla this is a bla.
This is a bla this is a bla this is a bla.
This is a bla this is a bla this is a bla.
This is a bla this is a bla this is a bla.
This is a bla this is a bla this is a bla.
This is a bla this is a bla this is a bla.
This is a bla this is a bla this is a bla.
This is a bla this is a bla this is a bla.
This is a bla this is a bla this is a bla.
This is a bla this is a bla this is a bla.
This is a bla this is a bla this is a bla.
This is a bla this is a bla this is a bla.
This is a bla this is a bla this is a bla.
This is a bla this is a bla this is a bla.
This is a bla this is a bla this is a bla.
This is a bla this is a bla this is a bla.
This is a bla this is a bla this is a bla.This is a bla this is a bla this is a bla.
This is a bla this is a bla this is a bla.
This is a bla this is a bla this is a bla.
This is a bla this is a bla this is a bla.
This is a bla this is a bla this is a bla.
This is a bla this is a bla this is a bla.
This is a bla this is a bla this is a bla.
This is a bla this is a bla this is a bla.
This is a bla this is a bla this is a bla.
This is a bla this is a bla this is a bla.
This is a bla this is a bla this is a bla.
This is a bla this is a bla this is a bla.
This is a bla this is a bla this is a bla.
This is a bla this is a bla this is a bla.
This is a bla this is a bla this is a bla.
This is a bla this is a bla this is a bla.
This is a bla this is a bla this is a bla.This is a bla this is a bla this is a bla.
This is a bla this is a bla this is a bla.
This is a bla this is a bla this is a bla.
This is a bla this is a bla this is a bla.
This is a bla this is a bla this is a bla.
This is a bla this is a bla this is a bla.
This is a bla this is a bla this is a bla.
This is a bla this is a bla this is a bla.
This is a bla this is a bla this is a bla.
This is a bla this is a bla this is a bla.
This is a bla this is a bla this is a bla.
This is a bla this is a bla this is a bla.
This is a bla this is a bla this is a bla.
This is a bla this is a bla this is a bla.
This is a bla this is a bla this is a bla.
This is a bla this is a bla this is a bla.
This is a bla this is a bla this is a bla.This is a bla this is a bla this is a bla.
...


I had some huge content on that file.txt with a lots of (around 10MB of images).

Still contains a bug but that will do.:)

mburt
07-31-2006, 11:27 PM
Umm, thanks for all your help, but there's still something wrong :)

mburt
08-04-2006, 08:43 PM
Anyway.. I'm wondering if there's a way to put an image on the screen before the page is loaded. Forget progress bars :)

mburt
08-05-2006, 12:28 AM
This is what I have (I'm trying to learn the art of AJAX :))



<html>
<head>
<script>
function createRequestObject() {
var obj
if (window.XMLHttpobjuest) {obj = new XMLHttpobjuest()}
else if (window.ActiveXObject) {obj = new ActiveXObject("Microsoft.XMLHTTP")}
else {alert('Problem creating the XMLHttpobjuest object')}
return obj
}
var http = createRequestObject()
function isloaded() {
if (obj) {
obj.onreadystatechange=function() {
if (obj.readystate==4) {loader.style.display="none"}
}
}
}
window.onload=createRequestObject;isloaded
</script>
</head>
<body>
<img src="ajax-loader.gif" id="loader">
</body>
</html>

mburt
08-05-2006, 12:28 AM
It won't work though, that's why I'm posting it here.

blm126
08-05-2006, 03:24 AM
I don't think you get the point of AJAX. It is a javascript technique to retrieve small pieces of data from the server. While the data is loading from the server. You can display a loading message(or image).

mburt
08-05-2006, 04:38 PM
Well.. That helped alot..

vinaysastry
10-30-2006, 12:28 PM
Hey mike and shachi...actually i am also looking for the same..but being a layman in programming language, i have to depend on you...you create and i will just copy for my website..

lainlives
10-30-2006, 05:21 PM
i need a working script that can load flash, mpg, wmv files if possible

roflmao456
10-30-2006, 10:16 PM
Maybe like this?



<HEAD>
<script language='javascript'>
function displaywhenload(){
document.write("Hello World");
}
</script>
</HEAD>

<body onload='displaywhenload()'>
<center>Please wait.. Page is loading! <BR><img src='loading.gif' border=0>
</center>
</body>


Maybe that can help.... :p

EDIT: well.. it can help WHEN the page loads... lol havent tested it but it might work.. il try to make one that shows the actual progress...

sebastiano
11-07-2006, 12:59 AM
I could not just let you people sit here before giving you the responce to it... atleast MY version of it...



function makeRequest(option) {
var url = "check.php?option="+option+"";
if(window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if(window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
req.open("GET", url, true);

req.onreadystatechange = callback;

req.send(null);
}
function callback() {
if(req.readyState != 4) {document.getElementById('dot<?php echo $_REQUEST["tld"] ?>result').innerHTML = "<img src=loading.gif border=0>"; }
if(req.readyState == 4) {
if(req.status == 200) {
response = req.responseText;
document.getElementById('dot<?php echo $_REQUEST["tld"] ?>result').innerHTML = response;
} else {
alert("There was a problem retrieving the data:\n" + req.statusText);
}
}
}


see this:

if(req.readyState != 4) {document.getElementById('yourDIV').innerHTML = "<img src=loading.gif border=0>"; }

!= means IF NOT/ IS NOT

this will display the image untill readystate becomes "4" or COMPLETE what "4" stands for.

you can contact me at labgab.com, i don't come here much, infact this is my first post ;)