[nickfzx]

Hey, so I use this code quite a bit on my site:

intImage = 2;
function swapImage(first, second) {
switch (intImage) {
 case 1:
	intImage = 2
 document.getElementById("img1").src = first
   return(false);
case 2:
   intImage = 1
 document.getElementById("img1").src = second
   return(false);
 }
}

it is just a simple swapImage...basically you click on a smaller image and the larger one loads.

The problem is that sometimes the larger image takes some time to download and there is no activity indicator and for some reason javascript has to load the whole image before it will show it...unlike just loading an image normally (without js) when the image loads from top to bottom and you can see it loading.

So what I would like to do is have the image load normally without having to preload in js. If that is really difficult then a simple gif animated activity indicator while the image is loading to show that something is happening.

Which approach is easiest and how would I go about it.

Any help would be fantastic...I am quite the javascript noob so please forgive any lack of the right vocab or general ignorance in the above.

[Martyr2]

Well I think we can both agree that large images are going to take some time to download. That is just a fact on the net, even with broadband the data still has to be retrieved. Ideally you would want to go with a preloading in JS to minimize that problem. So here are your options...

1) You can preload with JS so that the user will see the bigger graphics faster and it appear more responsive... but again if they are REALLY HUGE then preloading won't help too much.

2) You can simply think about reducing the filesize of your larger images. Either by cutting down the dimensions or the colors. Sometimes even changing the file type will help you do this (jpg on bigger pictures is better than gif, but gif is better for smaller than jpg). You might also want to limit the number of images on each page if you are doing something like a photo gallery. I find 6 - 8 images are good for each page.

3) You could launch a popup window which would then load the bigger graphic using the classic top down loading style common on the web (like you mentioned).

4) You could put something like a DIV overlay on top of the page that reads "Loading..." and maybe animate the dots, but as far as showing progress that could be a little tough in javascript since javascript doesn't have very good functionality when it comes to reading file sizes on remote machines. Now if you implemented something in AJAX to do this, it would require quite a bit of time and resources which I am not too sure is a good solution to this.

Personally I might do three of the four... reduce the file sizes, preload them, and if the user does click one that isn't fully loaded yet in the preload present the overlay.

However, those are the only real choices you have at the moment. It is up to you and how flexible you are willing to be.

Hope this helps!

This post has been edited by Martyr2: 20 August 2007 - 11:33 AM

[nickfzx]

Martyr2, on 20 Aug, 2007 - 11:30 AM, said:

Well I think we can both agree that large images are going to take some time to download. That is just a fact on the net, even with broadband the data still has to be retrieved. Ideally you would want to go with a preloading in JS to minimize that problem. So here are your options...

1) You can preload with JS so that the user will see the bigger graphics faster and it appear more responsive... but again if they are REALLY HUGE then preloading won't help too much.

2) You can simply think about reducing the filesize of your larger images. Either by cutting down the dimensions or the colors. Sometimes even changing the file type will help you do this (jpg on bigger pictures is better than gif, but gif is better for smaller than jpg). You might also want to limit the number of images on each page if you are doing something like a photo gallery. I find 6 - 8 images are good for each page.

3) You could launch a popup window which would then load the bigger graphic using the classic top down loading style common on the web (like you mentioned).

4) You could put something like a DIV overlay on top of the page that reads "Loading..." and maybe animate the dots, but as far as showing progress that could be a little tough in javascript since javascript doesn't have very good functionality when it comes to reading file sizes on remote machines. Now if you implemented something in AJAX to do this, it would require quite a bit of time and resources which I am not too sure is a good solution to this.

Personally I might do three of the four... reduce the file sizes, preload them, and if the user does click one that isn't fully loaded yet in the preload present the overlay.

However, those are the only real choices you have at the moment. It is up to you and how flexible you are willing to be.

Hope this helps!

hey Martyr2, thanks for your helpful response.

the filesize is not something easily changed (the max the site allows is 512kb)...it is a community site I built (using open source software and a lot of my own php):
http://www.amateurillustrator.com/

I really don't want to do a popup...in fact I actually changed it from the default popup to a swapimage to avoid pop-ups.

I guess what I would like to do is the DIV with loading(and an animated gif on loop)...

What does the code look like to do this (the JS not the html)? and how easy would it be to integrate it into my above code?

[Arbitrator]

nickfzx, on 20 Aug, 2007 - 11:36 AM, said:

The problem is that sometimes the larger image takes some time to download and there is no activity indicator and for some reason javascript has to load the whole image before it will show it...unlike just loading an image normally (without js) when the image loads from top to bottom and you can see it loading.

So what I would like to do is have the image load normally without having to preload in js.

Use the DOM to create a new img element; the browser should load it incrementally, as desired.

I put together an example demonstrating how one might do this [1]; the code will also be posted below for future reference. It seems to work in Firefox 2 and Opera 9. Safari 3 (beta) appears to preload the full‐size image by pre‐parsing the script. Internet Explorer 7’s policy seems to be to always download the image in its entirety before displaying it; you do get a blank image placeholder in the mean time though, so all is not lost. In the process of creating some cursors, I learned something: Internet Explorer requires that cursors be 32×32 pixels; otherwise, it stretches them to those dimensions.

• http://www.jsgp.us/demos/dic31956.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en-Latn">
	<head>

		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Demo for Dream.In.Code Thread 31956</title>
		<meta name="Author" content="Patrick Garies">
		<meta name="Created" content="2007-08-20">
		<meta name="Revised" content="2007-08-20">
		<style type="text/css" media="all">
			* { margin: 0; padding: 0; }
			html { padding: 1em; background: white; }
			img { display: block; margin: 0 auto; cursor: url(cursor%20zoom%20in.png) 5 5, url(cursor%20zoom%20in.cur), pointer; }
			.fs { cursor: url(cursor%20zoom%20out.png) 5 5, url(cursor%20zoom%20out.cur), pointer; }
		</style>
		<!--[if IE]>
			<style type="text/css" media="all">
				img { cursor: url(cursor%20zoom%20in%20(ie).cur), pointer; }
				.fs { cursor: url(cursor%20zoom%20out%20(ie).cur), pointer; }
			</style>
		<![endif]-->

	</head>
	<body>

		<div><img class="fsw700 fsh1136" alt="" width="120" height="120" src="Calintz%20Preview.jpg"></div>
		
		<div id="scripts">
			<!--[if !IE]>-->
			<script type="application/ecmascript">
				var d = document;
				var di = document.implementation;
				if (di.hasFeature("MouseEvents", "2.0")) {
					var image = d.getElementsByTagName("img")[0];
					var thumbnailClass = image.getAttribute("class");
					var thumbnailWidth = image.getAttribute("width");
					var thumbnailHeight = image.getAttribute("height");
					var thumbnailSrc = image.getAttribute("src");
					function swap() {
						var clone = image.cloneNode(false);
						if (clone.getAttribute("src") == thumbnailSrc) {
							clone.setAttribute("class", clone.getAttribute("class") + " fs");
							clone.setAttribute("width", clone.getAttribute("class").match(/fsw\d+/).toString().substring(3));
							clone.setAttribute("height", clone.getAttribute("class").match(/fsh\d+/).toString().substring(3));
							clone.setAttribute("src", "Calintz%20Jerevinan.jpg");
						}
						else {
							clone.setAttribute("class", thumbnailClass);
							clone.setAttribute("width", thumbnailWidth);
							clone.setAttribute("height", thumbnailHeight);
							clone.setAttribute("src", thumbnailSrc);
						}
						image.parentNode.replaceChild(clone, image);
						image = clone;
						image.addEventListener("click", swap, false); /* Events aren’t cloned under the DOM2 Event model. */
					}
					image.addEventListener("click", swap, false);
				}
			</script>
			<!--<![endif]-->
			<!--[if IE]>
				<script type="text/javascript">
					var d = document;
					var image = d.getElementsByTagName("img")[0];
					var thumbnailClass = image.className;
					var thumbnailWidth = image.getAttribute("width");
					var thumbnailHeight = image.getAttribute("height");
					var thumbnailSrc = image.getAttribute("src");
					function swap() {
						var clone = image.cloneNode(false);
						if (clone.getAttribute("src") == thumbnailSrc) {
							clone.className = clone.className + " fs";
							clone.setAttribute("width", clone.className.match(/fsw\d+/).toString().substring(1));
							clone.setAttribute("height", clone.className.match(/fsh\d+/).toString().substring(1));
							clone.setAttribute("src", "Calintz%20Jerevinan.jpg");
						}
						else {
							clone.className = thumbnailClass;
							clone.setAttribute("width", thumbnailWidth);
							clone.setAttribute("height", thumbnailHeight);
							clone.setAttribute("src", thumbnailSrc);
						}
						image.parentNode.replaceChild(clone, image);
						image = clone;
					}
					image.attachEvent("onclick", swap);
				</script>
			<![endif]-->
		</div>

	</body>
</html>

[nickfzx]

hey, thanks, one thing I found straight away testing this out was that the thumbnail isn't clickable in safari...(safari users make up around 15% of my members).

Safari is now available for pc (still in beta) and I haven't tested it on safari for pc but it may be the same case.

Thanks a lot for your example, it is really appreciated and I will see if I can get it integrated into my code.

[Arbitrator]

nickfzx, on 20 Aug, 2007 - 09:32 PM, said:

hey, thanks, one thing I found straight away testing this out was that the thumbnail isn't clickable in safari...(safari users make up around 15% of my members).

Safari is now available for pc (still in beta) and I haven't tested it on safari for pc but it may be the same case.

I’m using Windows and it works fine in Safari 3.0.3 (beta) on Windows. I have no idea if the Mac beta or Safari 2 work differently. The support table that I use [1] has only sparse information about Safari, so, without owning a Mac or having a more comprehensive support guide, I can’t tell what is and isn’t supported in the versions prior to 3. *

I do recall someone mentioning that another of my scripts didn’t work in Safari 2 in the past; would be nice to pinpoint what that is so that I might avoid it in the future. I thought it might be the media type application/ecmascript, since that was added as the formal ECMAScript (Javascript) media type only last year, but they said that they changed it and that it made no difference.

* You’ll have to manually enable Safari on that Web site to see the support details for that browser.

• http://www.webdevout...er-support-dom/

[nickfzx]

Arbitrator, on 20 Aug, 2007 - 08:18 PM, said:

nickfzx, on 20 Aug, 2007 - 09:32 PM, said:

hey, thanks, one thing I found straight away testing this out was that the thumbnail isn't clickable in safari...(safari users make up around 15% of my members).

Safari is now available for pc (still in beta) and I haven't tested it on safari for pc but it may be the same case.

I’m using Windows and it works fine in Safari 3.0.3 (beta) on Windows. I have no idea if the Mac beta or Safari 2 work differently. The support table that I use [1] has only sparse information about Safari, so, without owning a Mac or having a more comprehensive support guide, I can’t tell what is and isn’t supported in the versions prior to 3. *

I do recall someone mentioning that another of my scripts didn’t work in Safari 2 in the past; would be nice to pinpoint what that is so that I might avoid it in the future. I thought it might be the media type application/ecmascript, since that was added as the formal ECMAScript (Javascript) media type only last year, but they said that they changed it and that it made no difference.

* You’ll have to manually enable Safari on that Web site to see the support details for that browser.

• http://www.webdevout...er-support-dom/

yep it is safari 2 for mac...the most common version at the moment I think as it shipped with all macs for last couple of years.

If you need some help bug testing the code on safari 2 I will be happy to test it for you.

Thanks for your help.

[Arbitrator]

nickfzx, on 21 Aug, 2007 - 02:31 PM, said:

If you need some help bug testing the code on safari 2 I will be happy to test it for you.

If Safari 2 has an error console, an error is produced, and you could tell me what the error message is, that might be helpful in performing a Web search on the issue. Otherwise, I wouldn’t bother; it’s hard enough to troubleshoot scripts when you have the browser at your fingertips, much more through when testing through someone else.

[nickfzx]

Arbitrator, on 21 Aug, 2007 - 03:23 PM, said:

nickfzx, on 21 Aug, 2007 - 02:31 PM, said:

If you need some help bug testing the code on safari 2 I will be happy to test it for you.

If Safari 2 has an error console, an error is produced, and you could tell me what the error message is, that might be helpful in performing a Web search on the issue. Otherwise, I wouldn’t bother; it’s hard enough to troubleshoot scripts when you have the browser at your fingertips, much more through when testing through someone else.

Ah well no worries...I couldn't find an error console or error coming up in safari 2...the thumbnail just doesn't seem to be a link...just an image that is not clickable and the cursor stays as a arrow icon instead of becoming a pointer (or hand).

There might be some kind of firebug style development tool out there for safari, I will take a look.

[Arbitrator]

nickfzx, on 21 Aug, 2007 - 07:58 PM, said:

the thumbnail just doesn't seem to be a link...just an image that is not clickable

Maybe Safari 2 doesn’t support DOM2 Events. You could try image.setAttribute("onclick", swap); (DOM2 Core), image.onclick = swap; (DOM2 HTML), or <img … onclick="swap();"> (HTML). When checking this, you would also need to remove the support check for DOM2 Events: Mouse Events that’s in my script.

You might also throw some alert functions in there to see if the script is even being read. If not, the media type should probably be changed to text/javascript.

nickfzx, on 21 Aug, 2007 - 07:58 PM, said:

and the cursor stays as a arrow icon instead of becoming a pointer (or hand).

Safari 2 may not support the CSS3 Basic User Interface Module (Working Draft) or Microsoft cursor models. CSS2/2.1 don’t allow for the specification of hotspot coordinates, so that might cause the declarations to fail in Safari 2. Or, perhaps, Safari 2 simply doesn’t support custom cursors.

You might try something like the below to test what Safari 2 supports.

cursor: pointer; /* if custom cursors are not supported */
cursor: url(cursor%20zoom%20in.png), url(cursor%20zoom%20in.cur), pointer; /* if PNG or Windows cursors, but not CSS3 hotspots, are supported */
cursor: url(cursor%20zoom%20in.png) 5 5, url(cursor%20zoom%20in.cur), pointer; /* if CSS3 hotspots and PNG or Windows cursors are supported */

[nickfzx]

hey sorry, only just saw your response...email notification of replies doesn't seem to work all the time on this forum.

I will try out what you said, although as I have never coded a single line of DOM in my life it may take me some time thanks for all your help.

[BlueVD]

Well, the preloading can be done in a few ways.
The best way to make sure is to use img tags immediately after the body tag and make them invisible (style visibility:none);
Either that, or use JS to load them.
On my WDK I had to handle the preloading to.
See http://bluevd.frih.n...ate_treegen.php
They are loaded by JS.
On small sizes it's good to preload with JS. On big sizes, use the img tags with visibility none.
As to Safari, well you'll have to remember to check on how the events are handled AND remember that some browsers have their own implementations. This is the best place to check for JS functionality: http://www.quirksmod...s/contents.html
Also look at the Object Detection section. It has important content.
Cheers!

[nickfzx]

Just to say thankyou to Arbitrator for providing me with the code.

I finally got round to integrating this into my site just yesterday. It still doesn't work with safari 2 but screw it, they can upgrade

here is an example of it working on my site:
http://www.amateuril...e.php?pos=-9336
just click on the image to make it bigger and smaller

Cheers

Nick