Hey,
{Sorry for my lousy english, it's not my first language.}
First of all, i'd like to excuse my bad manners to come posting
without first introducing myself to the list
(but i can remedy that soon enough):
I found out about jQuery last year while a friend tried to convince me
to move away from typing "document.getElement...." thousands of times
and showed me the jQuery website. It was still the black, really
simple website there was before. I didn't give that much attention,
but this year i'm trying to finish a website and i decided to try it
out.
I'm hooked. Sadly, i can't do anything without jQuery anymore.
The problem i'm gonna describe might've been solved already, but i
couldn't find it on the list, so here it goes.
So for that particular project (http://www.tormentaa.com), which is an
art collective i participate in, i decided to create a sort of canvas
which would be loading projects as it goes. I got stuck in the part it
checks for the images on new content though.
There is a preview of how it should look like here:
http://www.tormentaa.com/index_testaa.html
try it out if you may :-P
Here is the code so far for the buggy part (the rest is here
http://www.tormentaa.com/resources/tormentaa.js):
// Begin code snippet
loading_images=[total_project_pages[current_project]];
loading_confirmation=[total_project_pages[current_project]];
for (i=1;i<total_project_pages[current_project];i++){
loading_images[i]=new Image();
loading_images[i].src="projects/"+current_project+"/"+i+".jpg";
// insert current_project_loading_bar animation here before
onload.
loading_images[i].onload=function(){loading_confirmation[i]=true;}
};
function loading_check(vValue,iIndex,aArray){return vValue=true;};
if(loading_confirmation.every(loading_check)){
$("#project_box"+current_project)
.load("projects/"+current_project+"/"+current_project+".html"
);
}
else{
$("#project_box"+current_project)
.html(
"<div class='loading'>Error loading
"+current_project_name+".<div
class='loading_error'> Click Here</div> to retry.</div>"
);
};
// End code snippet.
On this white canvas you would click on a link, and it would display a
"loading" message, attached below as a div.
I created each container for a new project using $
(".canvas").prepend("content");
".canvas" being a div on the main page that holds all new content.
It SHOULD then create an array of images, the size of which is defined
in another array declared before.
After it loops through each image checking if it loaded, it assigns
another array values of "true" for each image sucessfully loaded. I
understand only firefox implements "array,each()", but i linked a
library with the new methods on the html. any suggestions welcome
though.
Problem is... it's not checking for any image. It simply shows loading
for a while, and then substitutes the div content with the new one,
without waiting or the images. They then show up one at a time as it
loads from the server. Which is what i don't want. It should show
everything at once, after it loads.
Sorry if i got too verbose :-X
I think this might probably be a very common problem, how are you
supposed to solve it?
sorry if i explained too much, but i think it's best to show some code
and explain what i want so people don't bash me for "but i don't know
wtf you want to do" or "show me your mojo!".
Thanks
yghor
PS: and what a great community. I've read an e-mail here about
reattaching event handlers, and it was just what i needed for another
project.
