Hi all,

I'm working on a site wich uses the Prototye framework to load portfolio gallererys, wich have a lot of images, so I want that the script keeps showing Loading..." till all the images are loaded.
The built-in "onSucces" only waits for the HTML, and not the images.
On the Prototype site, I found that "window.onload" might be the event I need.

But I really don't know how to implement this.

This is my current script, it works, but it doesnt wait till all the images are loaded:

function loadgallery(id){
  $$('.contentcontainer').invoke('hide');
  $('gallery').hide();
  $('loading').appear({duration: 0.3});
  var url = 'gallery.php';
  var params = 'id=' + id;
  new Ajax.Request(
  url,
    { method: 'get', parameters: params, onComplete: function(transport){
      $('loading').hide();
      $('gallery').appear({duration: 0.3});
      $('gallery').innerHTML = transport.responseText;
    }}
  );
 
  document.stopObserving(window, 'load');
}

Greets from Holland!

That's because the script doesn't and can't "know" when the images are loaded.

HTTP is a disconnected protocol, there is no communication between client and server beyond the client requesting the URI from the server.

But i'm sure there must be a way. Maybe adding code in the gallery.php file(wich is being requested by ajax).

I guesst you're right that Ajax.Request can't know when the images are loaded, but i'm sure JavaScript knows it. I just don't know how to implement this.
Any suggestions?

javascript has NO access to the client machine HD so cannot check if an image is cached/loaded.
PHP has NO ACCESS to the client machine FULL STOP!
The webserver only "knows" the file was requested.
Javascript has NO METHODS of hooking into the brower functions other than events being raised.
There are no events raised when images are fully cached.

SO unless you are going to write an ActiveX component (IE only) and install it on every client machine (security implications with this)
It is not going to be possible.

Yes JS cannot comminucate with OS of course, but it can communicate with the browser! And there is an event where the browser tells "this page is fully loaded".
There is an event wich the browser fires *right after* all images are loaded.

Read this:
"If you used window.onload before you might want to switch to dom:loaded because it will fire immediately after the HTML document is fully loaded, but before images on the page are fully loaded. The load event on window only fires after all page images are loaded, making it unsuitable for some initialization purposes like hiding page elements (so they can be shown later)."
Source: Prototype API docs.

PS: your signature links dont seem to work!


EDIT: I made a simple script to show you what i mean, and to show that it is possible with javascript. Now i just want to implement this into my ajax website.
here: http://joelmeijering.byethost6.com/debora/test/

yep, there is a onload event for the body element and every page element (including images) can have an onload event associated with ot. But there isn't a standard means to know when ALL images are fully loaded.

You could of course add a listener to all the img onload events if you so wished or you could add a preload script.

JS can only communicate with the browser through the standard DOM interface events and methods which are limited in their scope (deliberately) by default.

Yes, OK, but how do i inplement this any ideas?
The problem is that i'm kinda beginner and almost all things I dpo s are found with google, and there are a lot of things wich I learned that way(so i dont need google anymore for those things). But the problem is that i can't find a solution on google for this, thats why I'm here. So could you or anybody else give me a push in the right direction?
(please don't mind my bad English)

No idea how it would be done with the framework you are using.
But I would assume it had listeners and event handlers builtin that you could create, instantiate and assign to the various elements on your page.

Here is an image preloader at TechRepublic that I dredged up from my bookmarks.

OK, ill look at it.
But do you think its possible with javascript to first load the images with ajax and then show them when there all loaded?

And another question, instead of watching all the images, i could maybe just watch(/observe) the last one? Because i really dont know how to put them in an array and abserve them all.


Look, its really hot now here in holland, and i wish that i could swim but... i have 5 adhesions in my feet

How would you know which was the last one? because they don't necessarily load in the order they are in the document

document.images will return an array of all the images in the document.

BTW I'd probably write something up but I'm just killing time while loading up a new server and wating for things to happen

Ok, ill make a sketch please say if you think its gonna work:

function loadgallery(id){
- hide/show some divs

- do the ajax request, update the hidden div with the content

(images are loading but not visual...)
...

document.images.each("function(){
 wait for the image to load, then go to next image
}")

after loop has finished:
show the div and hide the loading div

done!

}

Do you think this can work?

You could play with this code

var m_oaImage = Array();

	function setImage(id) {
		this.id = id;
		this.name  = id;
		this.loaded = false;
		
	}
	
	
function imgLoaded(name) {
	m_oaImage.name.loaded = true;
}
function getImages() {
	images = document.images;
	for (i=0; i<images.length; i++) {
		m_oaImage[i] = new setImage(images[i].id);
		images[i].onload = function(){imgLoaded(this.id)};
	}		
}

threw it together earlier, haven't actually tested it to see if it does what it should though.

The script creates an array of the images and as each image loads it will set m_oaImage[index].loaded to true. So in theory you could loop through the array and check for each loaded property being true.
HOWEVER it may not work as hoped because the onload event is triggered when the element loads NOT necessarily when the content loads and renders.

Thanks, but maybe the event is only triggered for the first time you load the site, and the second time it doesnt have to trigger onload becouse the images are already downloaded and in cache.
And im ****ed up because i found out that some browsers dont load "display: none". So my whole **** wont work then.
So i did al lot of work for nothing i think and maybe im going to make it just basic like any other site(so no ajax javascript **** anaymore)

But i dont realyy understand your script, when does it know that all the images are loaded'?

cyja

Thanks, but maybe the event is only triggered for the first time you load the site, and the second time it doesnt have to trigger onload becouse the images are already downloaded and in cache.

Nope. The onload event is triggered WHEN THE ELEMENT LOADS NOT when the image is downloaded.

But i dont realyy understand your script, when does it know that all the images are loaded'

When all the .loaded values are true.

Thanks, ill try it when i have time.
Maybe i'd better first completely build the site and then build all the fancy js ajax etc stuff.
But i guess thats to late for now

If you are concerned about the images not loading because they are hidden, why not put them inside a DIV that's positioned above the page - so it can't be seen, e.g.:

<div style="position: absolute; top: -1000px;">
<img