Reusable Image Cache in JS => NS_ERROR_DOM_HI ERARCHY_REQUEST _ERR

Josselin

(Mac 10.4.6 , Firefox/1.5.0.3 Mozilla/5.0 (Macintosh; U; PPC Mac OS X
Mach-O; fr; rv:1.8.0.3) Gecko/20060426 )

I am trying to setup a Reusable Image Cache in JS ( as per
http://www.devx.com/webdev/Article/20947 )

In order to o survey the events from image loading in a group
container, It seems necessary to perform the following function,
ImagePair(file) .
Unfortunatly Firefox javascript checking mentions an error with this
function :
=> document.append Child(this.imag e);

does anyone have a hint about it ?

------ JS function --------------
function ImagePair( _file ) {
// The ImagePair object's purpose is to keep track of the image and
the file that identifies it;
// we do this because the image's src attribute will read back as
uuencoded if interrogated, // meaning that, to see if a particular
image exists in the cache, we need to uuencode
// again. It seems easier just to store the path in unencoded form,
along with the image //associated with it.

this.file = _file;
this.image = new Image();

// Add the image to the document; if you don't, readystatechang e
// events won't know where they originated, meaning that
event.srcElemen t will be null
document.append Child(this.imag e);
}

----------- error message
Erreur*: uncaught exception: [Exception... "Node cannot be inserted at
the specified point in the hierarchy" code: "3" nsresult: "0x80530003
(NS_ERROR_DOM_H IERARCHY_REQUES T_ERR)" location:
"http://www.ecolabs.loc/scripts_js/load-image.js Line: 82"]

May 27 '06 #1

Subscribe Reply

5651

Richard Cornford

Josselin wrote:
<snip>

=> document.append Child(this.imag e);

does anyone have a hint about it ? <snip> Erreur : uncaught exception: [Exception... "Node cannot
be inserted at the specified point in the hierarchy"

<snip>

The hierarchy in question is the tree-like hierarchy of the DOM. The
document is at the absolute root of the DOM and the (x)HTML elements in
the mark-up are descendants of the document, with the outermost
containing element (usually http) as a direct child of the document and
all other elements decentness of the HTML element.

There are restrictions on where various elements may appear in this
tree-like structure and IMG elements must be, at minimum, descendants of
the BODY element. You are trying to insert an IMG at the same level as
the HTML element, which does not make sense in terms of an (x)HTML
document structure, and some browsers will generate errors in response.

Richard.

May 28 '06 #2

Richard Cornford

Richard Cornford wrote:
<snip>

... , with the outermost containing element
(usually http) as a direct child of the document ^^^^ and all other elements decentness of the HTML element.

<snip>

That should have been "... outermost containing element (usually html)
...."

i.e. The html element is the outermost element in an (x)HTML document.
All other elements are its descendants, with its direct children being
the head and body elements. (Processing instructions, such as DOCTYPE
and comments are strictly Nodes in this context. DOCTYPE may be a
(preceding) sibling of the html element, if it is represented in the
DOM. Text nodes, representing non-significant white space, may also
appear as direct children of the document, and so siblings of the html
element).

Richard.

May 29 '06 #3

Richard Cornford wrote:

The html element is the outermost element in an (x)HTML document.
All other elements are its descendants, with its direct children being
the head and body elements.

It is not exactly true at least for Firefox (keep missing to test in
full on Opera). In Firefox HTML is a container as any other where you
can add say images and div's. Try
html {
width:100%;
height:100%;
background-color:#DDD;
}
body {
width:75%;
background-color:#FFF;
}

and now add say <img src=...> between </body> and </html>.

IE does automatical tree correction in such case (so <body> container
is still used instead). I don't know if it's a proper reading of specs
or a rendering bug - but should be mentioned.

May 29 '06 #4

David Dorward

VK wrote:

(Follow ups set)

Richard Cornford wrote:
The html element is the outermost element in an (x)HTML document.
All other elements are its descendants, with its direct children being
the head and body elements.
It is not exactly true at least for Firefox (keep missing to test in
full on Opera). In Firefox HTML is a container as any other where you
can add say images and div's. Try

.... and now add say <img src=...> between </body> and </html>.

Since (X)HTML documents are not allowed <img> elements as child elements of
the <html> element, that isn't an HTML document. How browsers handle
author's errors is irrelevent.

--
David Dorward <http://blog.dorward.me .uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

May 29 '06 #5

Toby Inkster

VK wrote:

It is not exactly true at least for Firefox (keep missing to test in
full on Opera). In Firefox HTML is a container as any other where you
can add say images and div's.

No browser (that I know of) does this properly anyway.

e.g.

HTML {
background: cyan;
margin: 2em;
padding: 2em;
}

In a correct rendering of CSS, the 2em of blank space created by the
padding should be cyan, but the 2em of blank space created by the margin
should not.

This is not really an appropriate topic for either of the groups you
posted to though. Cross-posted to c.i.w.a.stylesh eets, follow-ups set.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact

May 29 '06 #6

Richard Cornford

VK wrote:

Richard Cornford wrote:
The html element is the outermost element in an (x)HTML
document. All other elements are its descendants, with
its direct children being the head and body elements.
It is not exactly true at least for Firefox

How on earth would you know?
(keep missing to test in full on Opera).
In Firefox HTML is a container as any other where you
can add say images and div's.
Bullshit.
Try
html {
width:100%;
height:100%;
background-color:#DDD;
}
body {
width:75%;
background-color:#FFF;
}

and now add say <img src=...> between </body>
and </html>.
OK, I tried this in Firefox (with scripting and pop-ups enabled):-

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<script type="text/javascript">
var win = window.open('', '');
function showDom(){
var div = document;
var st = '<pre>'+listNod eStart(div);
st += showChildren(di v, '\t');
st += listNodeEnd(div , '');
st += '<\/pre>';
win.document.wr ite(st);
win.document.cl ose();
}
function showChildren(el , ind){
var node, st = '';
for(var c = 0;c < el.childNodes.l ength;++c){
node = el.childNodes[c];
if(node.nodeTyp e == 1){
st += ind+listNodeSta rt(node);
st += showChildren(no de, (ind+'\t'));
st += listNodeEnd(nod e, ind);
}
}
return st;
}
function listNodeStart(e l){
return ('<' + el.nodeName +
((el.type)?(' type=\"' + el.type+'\"'):' ')
+ '&gt\n');
}
function listNodeEnd(el, ind){
return el.childNodes.l ength?(ind+'&lt ;/' + el.nodeName +'&gt\n'):'';
}

</script>
<style type="text/css">
html {
width:100%;
height:100%;
background-color:#DDD;
}
body {
width:75%;
background-color:#FFF;
}
</style>
</head>
<body onload="showDom ();">
</body>
<img src="images/example.gif" alt="">
</html>

It shows that in the DOM structure created from mark-up with an IMG in
your proposed invalid context Firefox has placed the IMG element as a
direct child of the BODY element. The DOM tree is structurally valid
even if the mark-up is not.

<snip> ... I don't know if it's a proper reading of specs
or a rendering bug - but should be mentioned.

It would save everyone a considerable amount of time if you did not
mention anything that you do not understand, is irrelevant or false.
That is; just be silent.

Richard.

May 29 '06 #7

Josselin

On 2006-05-29 09:40:15 +0200, "VK" <sc**********@y ahoo.com> said:

IE does automatical tree correction in such case (so <body> container
is still used instead). I don't know if it's a proper reading of specs
or a rendering bug - but should be mentioned.

That's the point..
this script was written for IE only.... and I am testing it with Firefox

I changed :
this.image = new Image();
document.append Child(this.imag e);
to :
this.image = new Image();
this.image.widt h="0";
this.image.heig ht="0";
document.body.a ppendChild(this .image);

and it works... I got it invisible, but there...

May 29 '06 #8

Richard Cornford

VK wrote:

Richard Cornford wrote:
It shows that in the DOM structure created from mark-up with
an IMG in your proposed invalid context Firefox has placed
the IMG element as a direct child of the BODY element. The
DOM tree is structurally valid even if the mark-up is not.
1. Please don't crosspost

Who are you to be giving me instructions?

1. It was you who added to inappropriate cross-post to c.i.w.a.h
(inappropriate because the subject of the post to which you
posted a cross-posted response was the structure of the document
object model exposed to scripting by web browsers, even if you
did not include sufficient context to make that clear to readers
of c.i.w.a.h. That is, the subject was exclusively script related
and had nothing to do with mark-up).

2. If you wanted to restrict/direct the groups in which responses
should appear it is _your_ responsibility to set follow-ups _and_
state that you have done so.

3. Your statement that I was in error was demonstrably false, as
everyone expects from you. If you would learn to appreciate that
mental process that you apply to understanding web technologies
is so fundamentally flawed that you almost never manage to
understand what is said, draw correct conclusions or even make
meaningful/coherent statements, you could save everyone
considerable time and effort by not bothering them with your
nonsense.
2. Visually image is rendered as located in html container
(anyone can see including you). The same can be achieved with
position:relati ve and negative offset.
If your issue is presentation then c.i.w.a.s would have been a more
appropriate cross post (though the response would inevitably be that if
you write invalid mark-up its presentation will tend to be uncertain).
My statement was about DOM structure (related only to scripting), your
response was substantially false and irrelevant in all other respects
(as usual).
I'm glad to hear that FF autocorrects DOM tree as IE does.
Firefox's error correction of structurally invalid mark-up in DOM
creation is not the same as IE's (as I have demonstrated to you in the
past), it is just similar in this instance.
In this case it is a rendering error or the chosen AID
behavior as I proposed in the OP.

Gibberish.

[Follow-ups to comp.lang.javas cript]

Richard.

May 29 '06 #9

May 29 '06 #10

Similar topics

3550

Image not refreshing

by: Ken | last post by:

How does IE6 control the display of images? I change the content of a image file image1.jpg without changing the file name. Then jump to a new page to display it. IE6 does not displays the original picture, not the new image. If I press F5, the correct image is displayed. I tried:

PHP

7153

Can't change bullet image

by: bigoxygen | last post by:

Hi. I have a list that is similar to this: -Evaluation +test +test -Students +test I would like to change the "-" bullet only, but I cannot. My

HTML / CSS

2085

PNG image from website -> picture box (using sockets)

by: 1388-2/HB | last post by:

I've got a small sockets application where I communicate with a web server via async sockets method. Using the ASCIIEncoding Class, I convert strings to byte arrays (and vice versa) in conjunction with beginSend and beginReceive (and their corresponding callbacks). So long as the web server and I just deal in text, life is easy. Now there's an image I want to request and then display in my app, it's a dynamic PNG image that's...

Visual Basic .NET

2234

Cache issue when updating image file

by: thehuby | last post by:

I am building a CMS and as part of it a user can upload an image. Once uploaded I am displaying the image. If the user then decides they want to replace the image with another I get a caching issue in the browser as the image has the same name. Without having to use unique file names each time the user replaces an image, how can I force the browser to check for the file properly?

PHP

17732

Deleting a preloaded image from memory

by: ivan.leben | last post by:

How can I really delete a preloaded image from memory/disk cache? Let's say I preload an image by creating an Image object and setting its src attribute to desired URL: var img = new Image(); img.src = ; Then I use the image a few more times by adding it into an Array object:

Javascript

4989

Image Control not refreshing

by: Mark Denardo | last post by:

I created a Web Image "<asp:Image ID="Image1" ..." that my code behind set to a certain image file say image1.jpg =Image1.ImageUrl = "<rel_path>/image1.jpg"; which set the image ok, but then I replaced that image file with another image file and gave it the same name "image1.jpg". But my web app when it loads the image when I run the page still shows the original picture that I deleted and replaced with the new one, even though I...

ASP.NET

5660

How do I update an image without manual refresh?

by: Jerry J | last post by:

How can I get an asp:Image to refresh when a user uploads a different jpg. I disabled caching using this command on Page_Load(): Response.Cache.SetCacheability(HttpCacheability.No Cache); but it didn't help. The problem is that this page does not change images after a client uploads a new one. If I hit the browser's refresh, then I can see the updated image, but if I don't refresh, then I see the previous image.

ASP.NET

2855

Insert inline image -> without another aspx page in src

by: jenp | last post by:

Hello I've got a rather tricky problem here - i'm looking to insert a graph into a web page - which is represented as a jpeg image. Due to the restrictions of the framework i'm developing against, the data for the graph is only stored in the HTTPContext's Items collection, so the page that displays the graph is the only one with the data.

ASP.NET

2275

In ASP.NET can I cache a <body>'s background image?

by: =?Utf-8?B?TWlrZQ==?= | last post by:

Hi. I'm building an ASP.NET 2.0 web-app for a customer. The customer wants a background image that's 124k in size as the background for each page. I've recommended they use a smaller-size image, but the customer is absolutely adamant about using the image. I'm afraid that this large image will degrade performance if it's loaded for each page. Can I somehow use ASP.NET caching to cache the background image so it doesn't have to...

ASP.NET

8192

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...

Windows Server

8696

Problem With Comparison Operator <=> in G++

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, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...

C / C++

8358

The easy way to turn off automatic updates for Windows 10/11

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 Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...

Windows Server

8502

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

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 protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...

General

4090

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...

Networking - Hardware / Configuration

4195

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

2621

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

C# / C Sharp

1805

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP

1504

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

General