Can you detect if an image is loaded?

[Mark Anderson]

Even with preloading roll-overs etc, the first set of images used on
screen still have to load before they can be seen. So, I've been asked I
can to show a text message 'loading...' while a number of images - 3 or
4 -load on an index page (personally I'd use smaller images, but....).

Ideally I'm looking for a solution- if there is one that will work with
Mac NN4.7 and Mac IEv5.x.

Possible?

Regards

Mark

 

[Mark Anderson]

Hi Mark, here's an idea...


var preloadImgCount = 10;
var preloadImgObjs = new Array();

window.onload = function()
{
// display splash screen
// preload images here or before onload
preloadImgWait(); // wait for images to load
}

function preloadImgWait()
{
var i, c=0;
for (i = 0; i < preloadImgCount; ++i) {
if (preloadImgObjs.complete) ++c;
}
window.status = 'Images Loaded: ' + c + ' of ' + preloadImgCount;
if (c == preloadImgCount) {
window.status = '';
appInit();
}
else setTimeout("preloadImgWait()", 500);
}

function appInit()
{
// hide splash screen
// start application
}

Thanks. I need the 'loading message' to appear where (some of) the
images will be. Would the best idea - given NN4 is in the loop - to use
an absolutely positions div and set visibility to hidden when the images
are loaded?

Regards

Mark

 

[Mike Foster]

Mark Anderson said:

...
Thanks. I need the 'loading message' to appear where (some of) the
images will be. Would the best idea - given NN4 is in the loop - to use
an absolutely positions div...

There's probably many different ways to do it, but that is an approach
that would work in NN4.

Mark Anderson said:

...and set visibility to hidden when the images are loaded?
...

Setting "element.visibility='hide'" (for NN4, for DOM-compliant browsers
use "element.style.visibility='hidden'") is optional because you must still
move the element off-screen for NN4 - otherwise it will still receive mouse
events even tho it is not visible.

 

[Mark Anderson]

Mark Anderson said:

There's probably many different ways to do it, but that is an approach
that would work in NN4.

Mark Anderson said:

Setting "element.visibility='hide'" (for NN4, for DOM-compliant browsers
use "element.style.visibility='hidden'") is optional because you must still
move the element off-screen for NN4 - otherwise it will still receive mouse
events even tho it is not visible.

Many thanks. I ended up with a much simpler solution. The 'background
is a full/page screen table holding a sliced up image, over which is
positioned a DIV #1 centre screen that loads a single large animated GIF
slide show (like I said - not my design choice). So I only have to check
the one image. I put another same size DIV #2 above the first in the
Z-order with a simple 'Loading...' message. The aim was to make #2 not
visible when the image loaded but I had problems with the syntax
addressing the div element. Reversing the DIV z-order worked as the
image div holds nothing else and so the other shows through until hidden
by the image.

Setting "element.visibility='hide'" (for NN4, for DOM-compliant browsers
use "element.style.visibility='hidden'")

So if <div> #2 is called "Layer2", the above references are:
NN4 - document.Layer2.visibility='hide'
Others - document.Layer2..style.visibility='hidden'
....or can I use the first for both? If I understand correctly, although
"Layer2" is just static text, even when hidden in NN4 it would block
mouse clicks (e.g. the a hyperlink) on the image "Layer1"?

Regards

Mark

 

[Mike Foster]

Mark Anderson said:

Many thanks. I ended up with a much simpler solution...

You're very welcome. Yep, simpler is always better

Mike Foster said:
Mark Anderson said:
So if <div> #2 is called "Layer2", the above references are:
NN4 - document.Layer2.visibility='hide'
Others - document.Layer2..style.visibility='hidden'
...or can I use the first for both?

No, you can't use the first for both.

Given this css:

#d1 {position:absolute;}

and this html:

<div id='d1'>...</div>

we would use js something like this (thrown together quickly):

var ele, eleID = 'd1';
if (document.getElementById) {
ele = document.getElementById(eleID);
if (ele && ele.style) {
ele.style.visibility = 'hidden';
ele.style.left = '-1000px';
}
}
else if (document.layers) {
ele = document.layers[eleID];
if (ele && typeof(ele.left)!='undefined') {
ele.visibility = 'hide';
ele.left = -1000;
}
}

Note that this expression "document.layers[eleID];" will only work
if the DIV with eleID is a direct child of document. If it is not
and you'd like more info on that then let me know ;-)

Mark Anderson said:

If I understand correctly, although
"Layer2" is just static text, even when hidden in NN4 it would block
mouse clicks (e.g. the a hyperlink) on the image "Layer1"?

Its been a long time since I played with NN4, but yes that's the way I remember it.

All the best,
Mike

 

[Grant Wagner]

Hi Mark, here's an idea...


var preloadImgCount = 10;
var preloadImgObjs = new Array();

window.onload = function()
{
// display splash screen
// preload images here or before onload
preloadImgWait(); // wait for images to load
}

function preloadImgWait()
{
var i, c=0;
for (i = 0; i < preloadImgCount; ++i) {
if (preloadImgObjs.complete) ++c;
}
window.status = 'Images Loaded: ' + c + ' of ' + preloadImgCount;
if (c == preloadImgCount) {
window.status = '';
appInit();
}
else setTimeout("preloadImgWait()", 500);
}

function appInit()
{
// hide splash screen
// start application
}

Thanks. I need the 'loading message' to appear where (some of) the
images will be. Would the best idea - given NN4 is in the loop - to use
an absolutely positions div and set visibility to hidden when the images
are loaded?

Regards

Mark

Why not:

<img src="yourbigimage.jpg" lowsrc="extremelysmall.gif">

I believe Netscape 4 supports the LOWSRC attribute on <IMG> tags.

--
| Grant Wagner <[email protected]>

* Client-side Javascript and Netscape 4 DOM Reference available at:
*
http://devedge.netscape.com/library/manuals/2000/javascript/1.3/reference/frames.html

* Internet Explorer DOM Reference available at:
*
http://msdn.microsoft.com/workshop/author/dhtml/reference/dhtml_reference_entry.asp

* Netscape 6/7 DOM Reference available at:
* http://www.mozilla.org/docs/dom/domref/
* Tips for upgrading JavaScript for Netscape 7 / Mozilla
* http://www.mozilla.org/docs/web-developer/upgrade_2.html

 

[Mark Anderson]

Mike,

Note that this expression "document.layers[eleID];" will only work
if the DIV with eleID is a direct child of document. If it is not
and you'd like more info on that then let me know ;-)

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0">
<div id="Layer2" style="position:absolute; left:210px; top:185px;
width:432px; height:216px; z-index:2">
[...div content...]
</div>
[...further on...]
<div id="Layer1" style="position:absolute; left:210px; top:185px;
width:346px; height:55px; z-index:3">
[...div content...]
</div>
[...main body content in table follows...]

(note - If I go back to a hide mechanism, "Layer1" will have z-index:1)

I assume the divs are children of the document? If so, what would be
and example of something that isn't?

Its been a long time since I played with NN4, but yes that's the way I

remember it.

This topic for a stock image site and sadly there seem to be - according
to feedback from a number of such site owners - still a good proportion
of freelance picture researchers with NN4.7. I guess they don't earn
much and are probably home-workers on old second-hand Macs, so aren't
about to upgrade as new stuff won't run on their old kit. <sigh>.

Thanks again

Mark

 

[Mark Anderson]

Mark Anderson wrote:

Why not:

<img src="yourbigimage.jpg" lowsrc="extremelysmall.gif">

I believe Netscape 4 supports the LOWSRC attribute on <IMG> tags.

True, though not what I've been asked for - the images are from a
randomised set, having to produce an extra set of lo-res images might be
bore (though a droplet ought to do it (not my job!)).

Regards

Mark

 

[Grant Wagner]

True, though not what I've been asked for - the images are from a
randomised set, having to produce an extra set of lo-res images might be
bore (though a droplet ought to do it (not my job!)).

Regards

Mark

I thought you just wanted "Loading please wait...", so LOWRES would just be
"PleaseWait.gif" for all images.

--
| Grant Wagner <[email protected]>

* Client-side Javascript and Netscape 4 DOM Reference available at:
*
http://devedge.netscape.com/library/manuals/2000/javascript/1.3/reference/frames.html

* Internet Explorer DOM Reference available at:
*
http://msdn.microsoft.com/workshop/author/dhtml/reference/dhtml_reference_entry.asp

* Netscape 6/7 DOM Reference available at:
* http://www.mozilla.org/docs/dom/domref/
* Tips for upgrading JavaScript for Netscape 7 / Mozilla
* http://www.mozilla.org/docs/web-developer/upgrade_2.html

 

[Mark Anderson]

I thought you just wanted "Loading please wait...", so LOWRES would just be
"PleaseWait.gif" for all images.

Oh, now I see. Yes, that is an idea.

mark

 

[Mike Foster]

I thought you just wanted "Loading please wait...", so LOWRES would just be
"PleaseWait.gif" for all images.

--

That sounds like an easy solution which is very cross-browser

 

[Mike Foster]

Mark Anderson said:

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0">
<div id="Layer2" style="position:absolute; left:210px; top:185px;
width:432px; height:216px; z-index:2">
[...div content...]
</div>
[...further on...]
<div id="Layer1" style="position:absolute; left:210px; top:185px;
width:346px; height:55px; z-index:3">
[...div content...]
</div>
[...main body content in table follows...]

(note - If I go back to a hide mechanism, "Layer1" will have z-index:1)

I assume the divs are children of the document?

Yes, that should be fine (I usually put absolutely positioned elements last -
right before </body>) Oh, one more thing... I suggest "never" using inline
CSS with NN4, especially for positioned elements. In fact I try to never use
inline CSS period.

Mark Anderson said:

If so, what would be and example of something that isn't?

An example...

<body>
<div id='absPositionedDiv1'>
<div id='absPositionedDiv2'>
</div>
</div>
</body>

absPositionedDiv1 is a child of body and the parent of absPositionedDiv2.
absPositionedDiv2 is not a child of body, it is a descendant of body and a
child of absPositionedDiv1.

This topic for a stock image site and sadly there seem to be - according
to feedback from a number of such site owners - still a good proportion
of freelance picture researchers with NN4.7.

That's interesting.

Thanks again

You're welcome. Good luck with the project
Mike