Can you detect if an image is loaded?

Discussion in 'Javascript' started by Mark Anderson, Jun 16, 2004.

  1. 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, Jun 16, 2004
    #1
    1. Advertising

  2. "Mike Foster" <> wrote in message
    news:eek:...
    > On Wed, 16 Jun 2004 18:00:51 +0100, Mark Anderson

    <> wrote:
    >
    > 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
     
    Mark Anderson, Jun 16, 2004
    #2
    1. Advertising

  3. Mark Anderson

    Mike Foster Guest

    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.
     
    Mike Foster, Jun 17, 2004
    #3
  4. "Mike Foster" <> wrote in message
    news:eek:...
    > 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.


    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
     
    Mark Anderson, Jun 17, 2004
    #4
  5. Mark Anderson

    Mike Foster Guest

    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:
    >> Setting "element.visibility='hide'" (for NN4, for DOM-compliant
    >> browsers use "element.style.visibility='hidden'")

    >

    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
     
    Mike Foster, Jun 17, 2004
    #5
  6. Mark Anderson

    Grant Wagner Guest

    Mark Anderson wrote:

    > "Mike Foster" <> wrote in message
    > news:eek:...
    > > On Wed, 16 Jun 2004 18:00:51 +0100, Mark Anderson

    > <> wrote:
    > >
    > > 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 <>

    * 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
     
    Grant Wagner, Jun 17, 2004
    #6
  7. Mike,

    "Mike Foster" <> wrote in message
    news:eek:...
    > 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, Jun 17, 2004
    #7
  8. "Grant Wagner" <> wrote in message
    news:...
    > 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
     
    Mark Anderson, Jun 17, 2004
    #8
  9. Mark Anderson

    Grant Wagner Guest

    Mark Anderson wrote:

    > "Grant Wagner" <> wrote in message
    > news:...
    > > 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


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

    --
    | Grant Wagner <>

    * 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
     
    Grant Wagner, Jun 17, 2004
    #9
  10. "Grant Wagner" <> wrote in message
    news:...
    > Mark Anderson wrote:
    >
    > > "Grant Wagner" <> wrote in message
    > > news:...

    >
    > 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
     
    Mark Anderson, Jun 17, 2004
    #10
  11. Mark Anderson

    Mike Foster Guest

    On Thu, 17 Jun 2004 20:15:36 GMT, Grant Wagner <> wrote:

    > Mark Anderson wrote:
    >
    >> "Grant Wagner" <> wrote in message
    >> news:...
    >> > 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

    >
    > 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, Jun 17, 2004
    #11
  12. Mark Anderson

    Mike Foster Guest

    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
     
    Mike Foster, Jun 17, 2004
    #12
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Marcelo Birnbach [MS]
    Replies:
    0
    Views:
    3,356
    Marcelo Birnbach [MS]
    Jun 28, 2003
  2. Udo Corban
    Replies:
    0
    Views:
    3,915
    Udo Corban
    Jan 23, 2004
  3. Yaron Cohen

    Detect if CSS file was loaded

    Yaron Cohen, Oct 14, 2003, in forum: Javascript
    Replies:
    2
    Views:
    139
    Yaron Cohen
    Oct 16, 2003
  4. Mark
    Replies:
    4
    Views:
    126
    Java script Dude
    Aug 5, 2004
  5. Alex
    Replies:
    1
    Views:
    105
Loading...

Share This Page