Image creation and 'on load' behavior

[RK]

Is there an image handling guru out there than can help a newbie with
understanding dynamic image creation?

The question: I can create an image from within Javascript with

MyPic = new Image()

....and then assign a source with

MyPic.src = "./picture.gif";

Before doing that, I set up

MyPic.onload { do_something };
MyPic.name = 'applepie';

So that I am not jumping the gun on using that image.

I'm trying to understand how creating an image with:

AnotherImage = document.createElement('img');
AnotherImage.setAttribute('src', './picture.gif');
AnotherImage.setAttribute('name', 'applepie');


Is there an equivalent delay in loading the image? Is there an onLoad
mechanism for that "AnotherImage"?

It appears I can insert a css rule that will affect positioning of the
AnotherImage, but the same approach for MyPic doesn't work.

#applepie{position: absolute; top: 100px; left: 100px;}

Any guidance here is appreciated...

Ross.

 

[RobG]

Is there an image handling guru out there than can help a newbie with
understanding dynamic image creation?

The question:  I can create an image from within Javascript with

    MyPic = new Image()

...and then assign a source with

    MyPic.src = "./picture.gif";

Before doing that, I set up

    MyPic.onload { do_something };
    MyPic.name = 'applepie';

So that I am not jumping the gun on using that image.

I'm trying to understand how creating an image with:

    AnotherImage = document.createElement('img');
    AnotherImage.setAttribute('src', './picture.gif');
    AnotherImage.setAttribute('name', 'applepie');

Is there an equivalent delay in loading the image?

An equivalent delay to what? The image takes time to load, how long
that takes is affected by many factors including how many other
resources are queued for loading, CPU load, available bandwidth,
server response time, and so on.

Each image is loaded using seperate request to the server, so for
similar sized images under similar conditions, the time should be
about the same.

Is there an onLoad
mechanism for that "AnotherImage"?

The onload attribute is defined at the element level, so yes, you can
add it to each image element and they all behave independently (more-
or-less). Strictly speaking, onload is only defined in the HTML 4
specification for body and frameset elements, however most browsers
seem to support it for image elements too.

It appears I can insert a css rule that will affect positioning of the
AnotherImage, but the same approach for MyPic doesn't work.

    #applepie{position: absolute; top:  100px; left: 100px;}

The # selector is intended to match an ID attribute value, you have
assigned "applepie" to the image's name attribute. The appropriate
CSS selector would be:

img[name=applepie]{ ... }

However there is at least one popular browser that doesn't support
that so it might be better to assign "applepie" to the ID attribute,
although then it will have to be unique in the page.

 

[Thomas 'PointedEars' Lahn]

The onload attribute is defined at the element level,

It isn't for `img' elements.

so yes, you can add it to each image element and they all behave
independently (more- or-less). Strictly speaking, onload is only defined
in the HTML 4 specification for body and frameset elements,

IOW, specifying the `onload' attribute in `img' elements creates invalid markup.

however most browsers seem to support it for image elements too.

Wishful thinking. You just can't know that.


PointedEars

P.S.: The e-mail was unintentional. Seems I need more target practice.

 

[RK]

It isn't for `img' elements.


IOW, specifying the `onload' attribute in `img' elements creates invalid markup.

I discovered the "onload" technique for dealing with Image() entities
when my pic wasn't ready for me when I started doing stuff to it.

If I'm going to experience a similar problem with the
document.createElement('img') attempt, what is the kosher technique to
deal with that?