473,396 Members | 1,996 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,396 software developers and data experts.

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.
Nov 10 '08 #1
3 2860
On Nov 11, 5:33*am, RK <ross@rosswrote:
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.
--
Rob
Nov 10 '08 #2
RobG wrote:
On Nov 11, 5:33 am, RK <ross@rosswrote:
>Is there an onLoad mechanism for that "AnotherImage"?

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.
Nov 11 '08 #3
RK
Thomas 'PointedEars' Lahn wrote:
RobG wrote:
>On Nov 11, 5:33 am, RK <ross@rosswrote:
>>Is there an onLoad mechanism for that "AnotherImage"?
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.
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?

>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.
Nov 11 '08 #4

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

5
by: Jim Buzbee | last post by:
I have a subroutine that inserts image objects into a page for me. It works fine except for one thing. My mouseover settings don't appear to take. i.e. I see nothing at all when I move the mouse...
1
by: John | last post by:
I am rotating images of different dimensions. My problem is that when a new image is displayed in a new position which had an image of a different dimension, the old image is first stretched to the...
5
by: Tompa | last post by:
Hi, I would like to create images on the fly as a response to an http request. I can do this with PIL like this (file create_gif.py): from PIL import Image, ImageDraw print 'Status: 200 OK'...
6
by: Darkbyte [Work] | last post by:
Hi everybody!!! I have a script (foo.php) which uses GD to create an image and sends it to the browser: <?php $img = imagecreatefrompng("mypng.png"); /* other stuff */ ...
8
by: Alexander Fischer | last post by:
Hello, I am writing a gallery script and use imagecreatefromjpeg and fpassthru to output images without any change to them (i.e., no thumbnail creation etc. - just deliver the image via the php...
0
by: Adam Sandler | last post by:
Hello, Having an issue with my ASP.Net page. I use some COTS, which for all intents and purposes, simply makes a jpeg file and physically places it in a directory on the web server. The...
11
by: Adam Sandler | last post by:
Hello, Having an issue with JavaScript in my ASP.Net page. I use some COTS, which for all intents and purposes, simply makes a jpeg file and physically places it in a directory on the web...
5
by: getburl | last post by:
I am currently having an issue where I render 3 1k images to the page in IE when the user clicks a button. Everything works well in FF and Good Browsers et al., but in IE I have to wrap some dummy...
1
by: neovantage | last post by:
Hey all, I am using a PHP script which creates headings at run time in a sense at page execution. I am stuck a with a very little problem which i am sure i will have the solution from experts. ...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.