Snorik said:
CK a écrit :
I had just added the loadImages() function in order to check whether
taking advantage of the onload event handler had any impact.
I didn't see in details all your lines of code but if you don't call the
array 'images' (foo.src = images[number].src) there is no advantage than
to give some more work to the browser.
Ok, I changed that. Now there is only one array of images which looks
like the following:
function loadImages()
{
[...]
ts_image = new Array( 13 );
Since you don't appear to use ts_image.length, the `13' argument is
unnecessary and potentially harmful (not because it's this particular number).
ts_image[12] = new Image(300,199);
The arguments are unnecessary.
ts_image[12].src = '/path/image';
OK.
ts_image[12].width = '300';
ts_image[12].height = '199';
Those properties expect number values, not strings. Besides, they would
have been set already with the constructor arguments, which is what they are
for.
ts_image[12].name = 'filename : image';
`Image' objects are host objects, they do not need to be supported, and if
they are, they do not need to support the augmentation with properties.
`Image' objects don't have a `name' property by default, and even if they do
implement the HTMLImageElement interface of W3C DOM Level 2 HTML, the `name'
property would require a NAME value, which must not contain whitespace or `:'.
ts_image[12].size = 'filesize : 612 x 406';
Same here. Besides, the image dimensions are _not_ the file size.
You should use something like the following:
function getImage(s, fLoad, fError)
{
var img = new Image();
img.src = s;
if (typeof fLoad == "function"
&& typeof img.onload != "undefined")
{
img.onload = fLoad;
}
if (typeof fError == "function"
&& typeof img.onerror != "undefined")
{
img.onerror = fError;
}
}
var ts_image = new Array(
getImage('/path/image')
);
(or
var ts_image = new Array();
ts_image[12] = getImage('/path/image');
but there is little point in that although it works.)
The rest can follow from the `width', `height', and `src' properties that
the object has already; you do not have to duplicate that information, but
you can write a wrapper object that allows it to be retrieved easily in the
desired form:
function MyImage(s)
{
this.setImage(s);
}
MyImage.prototype = {
constructor: MyImage,
setImage: function(s) {
this.data = getImage(s);
this.filename = s;
},
getNameStr: function() {
return "filename: image";
},
getDimensions: function() {
return "dimensions: " + this.data.width + " x " + this.data.height;
}
};
var ts_image = new Array(
new MyImage('/path/image')
);
// note the timing issue
window.alert(ts_image[0].getDimensions);
[...]
function show_image( data ) {
if (freeze == 0) {
Where does `freeze' come from? Avoid global variables.
document.images['imageboard'].src = ts_image[data].src;
document.images['imageboard'].width = ts_image[data].width;
document.images['imageboard'].height = ts_image[data].height;
This is quite inefficient. Consider this:
var imgTarget = document.images['imageboard'];
var imgSource = ts_image[data];
imgTarget.src = imgSource.src;
imgTarget.width = imgSource.width;
imgTarget.height = imgSource.height;
One could even consider
with (imgSource)
{
imgTarget.src = src;
imgTarget.width = width;
imgTarget.height = height;
}
document.forms[0].name.value = ts_image[data].name;
document.forms[0].size.value = ts_image[data].size;
Same here. You should avoid such reference worms, they are not only
inefficient, but also error-prone and hard to maintain.
[...] }
}
one of the list items:
[reformatted; use spaces for indentation, not tabs]
<tr>
<td align='left' width='5px'>
<img src="img_file.gif" alt="dir" height="15" border="0" />
^
It can be only either HTML or XHTML. I suggest you use the former, also
because you use camel-cased attribute names already which is not allowed in
XHTML.
</td><td>
<a href='javascript:set_file("path/image.jpg", "11");'
onDbClick='set_content();' onmouseover='show_image( 11 );'> ^^^
Typo.
image
Avoid whitespace after inner start tags and before inner end tags, it is not
uniformly displayed.
If a widget works only with enabled script-support, you should generate it
with scripting to save other users and yourself the hassle of dealing with a
widget "not working":
<script type="text/javascript">
document.write(
'<a href=\'javascript:set_file('
+ '"path/image.jpg", "11");\' ondblclick="set_content();"'
+ ' onmouseover="show_image(11);">image<\/a>'
);
</script>
That said, you should avoid such widgets in the first place. For example, a
submit button can provide for functionality that degrades gracefully here.
[...]
The img tag where the images are being shown:
There are no "img tags". There are `img' elements said:
HTH
PointedEars