Robust Image Preloads - on the fly

[RogerFGay]

OK, so I know the basic way to preload images:

images = new Image();
images.src = "image_file_name";

But I'm trying to automate use of images by constructing a table with images on the fly; then dumping that into a div.

No problem with the dhtml (javascript) constructing tables with img:s in them.

What I'm having a problem with is assuring that the images are actually loaded before dumping into the div. If they're not, they won't be displayed.

I've tried checking images.complete in a loop until they're all loaded, but that sometimes aggrevates IE into putting up a message that a process has gone on too long.

At present, this approach works (whenever images load quickly enough) in IE and Firefox, but not Opera.

 

[trollacious]

Why can't you change the size of the images? We're not necessarily talking about the dimensions, but about the file size. JPEGs can be compressed different amounts, and there is FREE software that will let you specify the compression you want.

Your example images are HUGE, way to wide and high.

Lee

 

[RogerFGay]

I'm building a general engine for image display rather than just building a page to display these particular example images. If I were doing the latter, I would probably not only size them down, but just name them explicitly in image tags to display them. It's a reasonable test to use larger images IMHO, because I don't want the result to fry anyone's brains out if they happen to be trying to display large images. And anything that works will with large images, will certainly work much better with smaller ones -- not so the other way around.

 

[johnwm]

You will always be controlled by the download speed available to the end user. There are a number of graphics engines around which can resize images on upload. You could save the original upload as 2 different size images, a thumb and a display size. Load the thumbs on the fly and only load the display versions on request. For a large number of images you can split the thumbs into groups to download on an AJAX request

You can see a crude and unpolished version on

http://www.essexsteam.co.uk/aveling3.asp

That page references around 200 images, but user can pick individual groups to display, and expand only those he wants to view in detail

___________________________________________________________
If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
Steam Engine Prints

 

[RogerFGay]

Interesting website. I was immediately drawn in to the subject; little distracting when I was there to look at code. That's quite alright though; this being a spare time effort. I've seen the general strategy before; even in a tool provided by Fuji when they returned digital images to me on CD. (I forgot the camera on a vacation trip and used disposables.) It will be quite interesting to apply Ajax.

I have a follow-up question re: graphics engines that can resize images on upload. I found that if I edit images in Paint; it is extremely simple to resize them. I needed an image yesterday with max. dimensions 150x150 and had one 225x300. I simply set dimensions in a small form to 50% and saved the 113x150 image. Size went from 10.8KB to 3.05KB. Resizing seemed to be a very fast operation.

That's "by hand" though (so to speak). It might be nice if I could store display dimensions in an XML file along with image file names and text to go with images. Then have a server process custom resize images before sending them. I suppose at some point -- assuming the application will continue to display the same pictures the same way; the new images (sizes) should be saved so that re-sizing each time is unnecessary.

Assume for the moment that this is some kind of web page editor with special focus on images (like vacation pictures), in which the user is allowed to reposition and resize; add explanatory text, etc. So, on-the-fly resizing makes sense.

Also assume that I'm going to give my software away. I don't want people to have to pay license fees to get commercial software to make it work.

 

[trollacious]

Irfanview is a free graphics viewer and manipulation software you can use to do batch processing of images, including resizing.

Lee

 

[RogerFGay]

RE: Irfanview

Wouldn't that be a little like cheating though? It looks like Irfanview already supports the functionality I've mentioned, and much more.

 

[trollacious]

Since when is it cheating to not reinvent the wheel over and over, and to use free resources to perform tasks easily, quickly, and efficiently? Are you going to start programming using binary digits rather than "cheating" with established programming languages and tools that "already support the functionality" you want and need?

I remember reading in several books that a good programmer is a lazy programmer (though not vice versa) because they don't do work themselves that's already been done.

Lee

 

[RogerFGay]

I suppose I was a bit facetious in my response. It was a nice suggestion for getting the functionality I've described. And it's free.

I suppose also that my agenda has been hidden just under the surface. I'll reveal. For one thing, I'm out to improve my javascript programming skills. What I'm pursuing here is not assigned work. It's more like continuing education.

Secondly though ... I want flexibility to be creative. When I use someone else's package, it means doing what the package does in the way that package does it. But let's say for example, that i want to invent a robot that decides what images should be shown to others and automatically posts from its own vision system to a web page. Do I teach it to use Irfanview so that it can do a better job? Or should I have components (and knowledge) at the ready to build certain capabilities into the robot?

Flexibility gives me options. Options can help me build a better robot.

 

[monksnake]

You scare me.

<.

 

[RogerFGay]

Now if I could find the specific component in Irfanview that does resizing ... and it doesn't violate the Irfanview license agreement to use it elsewhere, that might be something.

 

[trollacious]

Maybe a quick Google search for command line Irfanview would work?

http://www.google.com/search?hl=en&q=command+line+irfanview

Being "flexibly creative" means being able to use good tools already designed and tested to make your job easier. I don't know of may painters who make their own brushes, and those artists who do make some of their own tools use existing materials and ideas/designs from others who have already been there.

Lee

 

[RogerFGay]

Being able to create your own tools is always a mark of an advanced craftsman.

Command line instructions still don't tell me about the specific Irfanview component that can be separated from the rest of Irfanview for this specific use. In other words; I would be providing a tool and saying ... btw: in order for it to work, you have to install this other tool that does the same thing, and more. Put another way, I don't even want to install the whole Irfanview just for resizing.

What I'd like is for resizing to be done by perhaps a single Java component on the server, that can be accessed directly by the server application rather than through the command line.

 

[trollacious]

What server side technology do you have access to? I believe both ASP.NET and PHP have graphics manipulation available.

Lee

 

[trollacious]

Being able to create your own tools is always a mark of an advanced craftsman.

An advanced craftsman gets to that point by using existing tools and understanding what would constitute improvements and what wouldn't. The tools don't make someone a craftsman, the craftsman makes the tools.

Lee

 

[BillyRayPreachersSon]

Being able to create your own tools is always a mark of an advanced craftsman.

I disagree. I would class myself as an "advanced craftsman" when it comes to JavaScript, HTML, and CSS... yet I've not written my own web browser, developer toolbars, or JavaScript debugger.

Neither would a cabinet maker create his own saw or chisel.

Or an architect his drawing board or pencil.

Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[RogerFGay]

Stop -- You're both wrong. "Being able to create" your own tools does not mean that you never use any other tool created by anyone else. I am absolutely certain that there are cabinet makers who have created their own saws and architects who have devised their own drawing boards. I am also sure that not every single advanced craftsman became an advanced craftsman by using Irfanview.

There are also tool-makers who are advanced craftsmen who are specifically focused in the art and science of tool-making.

I'm running Tomcat 6 on my machine. I also have a Yahoo account that runs Apache with a PHP engine.

 

[kaht]

I'm lost, what was the point of this thread again?

-kaht

Looking for a puppy?

http://www.silkypups.com

[small](Silky Terriers are hypoallergenic dogs that make great indoor pets due to their lack of shedding and small size)[/small]

 

[RogerFGay]

Paraphrasing the first post: I'm automating use of images by constructing a table with images on the fly; then dumping that into a div.

Details have moved on: latest has to do with loading speed.

 

[onpnt]

I'm with you monksnake

[sub]____________ signature below ______________
The worst mistake you'll ever make is to do something simply the way you know how while ignoring the way it should be done[/sub]

 

[monksnake]

Being able to create your own tools is always a mark of an advanced craftsman.

I would think that the only craft where you create your own tools is tool-making. You don't even have to be good at it.



<.