PDA

Click to See Complete Forum and Search --> : Please help me (I suck at JS)!

nille40
01-11-2003, 06:23 AM
Hey everyone,
I've got some problems I really hope you could help me with.

1. Memory Managment... How can I reduce the amount of memory used by a script, or release the memory used? I null and delete all references when their not used, but it doesn't seem to help. Is there any way to run the garbage collector?

2. I need to know the width of a piece of text. For instance:

myLayer.innerHTML = "What is the width of this text?";
var width = myLayer.clientWidth; //Nope
width = myLayer.getBoundingClientRect().right;//Nope


3. Most important! I need to wait for an image to load. Like this:

var image = document.createElement("DIV");
image.src = "MyImageURL";
//I need the image dimension know so I want to
//wait here
while(!image.complete); //can't do this

I can't use any callback functions either, such as onload, as I need to know the image dimensions before the method runs out of scope. And I can't preload the images, as some are dynamically generated by the server. The most important, however, is to know the image dimensions.

I would REALLY appreciate some assistance! If you have any suggestions or questions, feel free to post.

Thanks on advance,
Nille
swon
01-11-2003, 06:37 AM
#2 you can't get the width of text, only the width of an element and it would be making with for examle :
myLayer.offsetWidth;

#3 description not very clear, what are you trying to do?
image or div?
nille40
01-11-2003, 06:44 AM
Thank you for responding!

#3
Hmm... I'm sorry about that. I'm so used to create DIV elements so I wrote div. It should be:

var image = document.createElement("IMG");

I'm trying to create a button (or something like that) that uses three images: left, center and right. To make the button look good, I need to layout the images. To do this I need to know the width and height of each image.

A java-like solution would be to do something like this:


var myObject = this;
var image = document.createElement("IMG");
image.src = "someURL";
image.onload = function()
{
myObject.notifyAll();
}

synchronized(this)
{
while(!image.complete)
{
myObject.wait();
}
}


This would be the Java/JavaScript version, but as you can see there are some problems. There's no synchronization in JS and I can't find any wait or sleep method.

How can I work around this?
Nille
swon
01-11-2003, 07:14 AM
Yes no functions like that.
Maybe I'm wrong but, if you need the width and the height for the kind of button, I think you don't have to need it.

<img src="image.jpg"> shows the image in the right size.

Maybe I missunderstood you...
nille40
01-11-2003, 07:18 AM
You are right about this; the image is the right size when initialized. However, I need to stretch the center image, so I need to know the width of the left and the right image.

Thanks again,
Nille
swon
01-11-2003, 07:43 AM
I've made something like, maybe you can use this:

<script language="JavaScript">
<!--
function ImgWidth(maxSize)
{

var len1 = document.images["image1"].width;
var high1 = document.images["image1"].height;
var len3 = document.images["image3"].width;
var high3 = document.images["image3"].height;
var len2 = maxSize-(len1+len3);
document.images["image2"].width = len2;
document.images["image2"].height = high1;
}
//-->
</script>
<body onLoad="ImgWidth(500)">
<img name=image1 src="test.jpg">
<img name=image2 src="test.jpg">
<img name=image3 src="test.jpg">
nille40
01-11-2003, 07:54 AM
Thank you for helping me!

This is actually what I have done, except I create the img-elements through javascript. The problem occures when you invoke:

var width = maxlen - (imgWidth1 + imgWidth2);

If img1 and img2 is not yet initialized, imgWidth1 and 2 will be set to zero, and it will look strange. I'm trying to work around the loading-problem, but all I can think of is to use callback functions, and this will result in a lot of strange behaviour.

Is there anyway to play around with the threads in explorer? Except for setTimeout and setInterval?
swon
01-11-2003, 08:06 AM
What when you call the function at the bottom of the page, then all images should be defined with their sizes? Or come they later to the page?
nille40
01-11-2003, 08:15 AM
The images aren't created in the HTML document, but rather in the script during runtime. This means that I create an image on one row and immediately want to use it on the next row. Therefore, there is no time for the image to load. That's why I'm trying to find a method for stalling the thread, and thus forcing it to wait for the completion of the image.
swon
01-11-2003, 08:39 AM
Have you tried something like that:


var newimg = document.createElement("img");
newimg.setAttribute("src","yourpic.jpg");
ImgWidth = newimg.getAttributes("width").value

May you can fix with that, don't know... else
you could make a timeout function and after return back to the first...
nille40
01-11-2003, 09:23 AM
Thanks once again,
I think I've managed to solve it now...

It had to be the callback functions. I sure hope it works...

Thanks for all your help! I really appreciate it!
Nille