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 12 11246
On Wed, 16 Jun 2004 18:00:51 +0100, Mark Anderson <ma**@notmeyeardley.demon.co.uk> wrote: 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
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[i].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
}
"Mike Foster" <mi********@mfosternospam.com> wrote in message
news:op**************@news.charter.net... On Wed, 16 Jun 2004 18:00:51 +0100, Mark Anderson
<ma**@notmeyeardley.demon.co.uk> 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[i].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 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" <mi********@mfosternospam.com> wrote in message
news:op**************@news.charter.net... 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 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
Mark Anderson wrote: "Mike Foster" <mi********@mfosternospam.com> wrote in message news:op**************@news.charter.net... On Wed, 16 Jun 2004 18:00:51 +0100, Mark Anderson <ma**@notmeyeardley.demon.co.uk> 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[i].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 <gw*****@agricoreunited.com>
* Client-side Javascript and Netscape 4 DOM Reference available at:
* http://devedge.netscape.com/library/...ce/frames.html
* Internet Explorer DOM Reference available at:
* http://msdn.microsoft.com/workshop/a...ence_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-deve...upgrade_2.html
Mike,
"Mike Foster" <mi********@mfosternospam.com> wrote in message
news:op**************@news.charter.net... 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
"Grant Wagner" <gw*****@agricoreunited.com> wrote in message
news:40***************@agricoreunited.com... 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 wrote: "Grant Wagner" <gw*****@agricoreunited.com> wrote in message news:40***************@agricoreunited.com... 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 <gw*****@agricoreunited.com>
* Client-side Javascript and Netscape 4 DOM Reference available at:
* http://devedge.netscape.com/library/...ce/frames.html
* Internet Explorer DOM Reference available at:
* http://msdn.microsoft.com/workshop/a...ence_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-deve...upgrade_2.html
"Grant Wagner" <gw*****@agricoreunited.com> wrote in message
news:40***************@agricoreunited.com... Mark Anderson wrote:
"Grant Wagner" <gw*****@agricoreunited.com> wrote in message news:40***************@agricoreunited.com... 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
On Thu, 17 Jun 2004 20:15:36 GMT, Grant Wagner <gw*****@agricoreunited.com> wrote: Mark Anderson wrote:
"Grant Wagner" <gw*****@agricoreunited.com> wrote in message news:40***************@agricoreunited.com... > 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 :-)
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 This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: Donjuan |
last post by:
Hi all
I have trouble with tracking whether my image file is loaded.
i use DHTML to change my image. HERE is the code:
<img name="someimage" src="1.jpg"...
|
by: Sharon |
last post by:
I’m wrote a small DLL that used the FreeImage.DLL (that can be found at
http://www.codeproject.com/bitmap/graphicsuite.asp).
I also wrote a small console application in C++ (unmanaged) that uses...
|
by: Andy Baxter |
last post by:
I have an image scrolling in a viewport for a panoramic image
viewer. The viewport can be resized to several set resolutions so people
can adjust the size according to their bandwidth. There are...
|
by: tshad |
last post by:
This was posted before but the message got messed up (all NLs were stripped
out for some reason).
I have 2 labels that hold the name of different images on my .aspx page.
<asp:Label ID="Logo"...
|
by: numbnutz |
last post by:
Hi,
I am currently working on an XML Gallery for my girlfriend's brother who is a photographer. I have created a flash front end template and am using an XML database to load the images and...
|
by: kayahr |
last post by:
Hi there,
I have a strange problem in Internet Explorer (IE6 and IE7). I'm writing a JavaScript application which allows the user to edit a photo composition. So when the user selects a photo then...
|
by: Benny |
last post by:
I am wondering if anyone has a simple approach to detecting
the location of boxes and/or lines on an image. For example, if I
have an image of a form, and want to find out where all of the boxes...
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
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...
|
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...
|
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,...
|
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,...
|
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...
|
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...
|
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,...
| |