473,406 Members | 2,345 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,406 software developers and data experts.

Preloading images stored in a database

Hi all,

I am having trouble preloading images in a javascript application, and
was wondering if anyone had any suggestions.
Basically I have a bunch of images stored in a database as BLOBs. At
any given point in time a subset of those images is displayed on-
screen. At certains times I want to swap out those on screen with new
ones from the database, and do some as seamlessly as possible.

So what I've tried to do is first create Image objects for each of the
new images to load. I then reference all of the old image's dom-nodes,
append the new images to the document, and finally remove the old dom-
nodes.

It isn't working so well though. After doing some looking around in
Firebug, it seems that by the time I'm ready to remove the old images,
only some of the new images have been preloaded (the rest are still
being retrieved according to firebug). I'm wondering if this has to do
with the fact that I'm making a number of server-side calls, and the
lag-time it takes to do so is what is causing only some of the images
to be displayed.

Any ideas?

Any help would be greatly appreciated.
Thanks!
Keith
Jul 18 '08 #1
7 1962
Keith Hughitt wrote:
I am having trouble preloading images in a javascript application, and
was wondering if anyone had any suggestions. Basically I have a bunch of
images stored in a database as BLOBs.
That might not be the best approach. BLOBs increase the size of your
database heavily, thereby reducing its performance and that of the server.
You might want to use the filesystem for storing image files instead; it is
optimized for this kind of data. Then you can store only the path of the
file in the database, which is optimized for that kind of data, and let the
server-side application handle the rest.
At any given point in time a subset of those images is displayed on-
screen. At certains times I want to swap out those on screen with new
ones from the database, and do some as seamlessly as possible.

So what I've tried to do is first create Image objects for each of the
new images to load.
This might or might not cache the image client-side, depending on the cache
settings. In the Worst Case it would error out (unless you did some proper
runtime feature tests before), because `Image' objects are proprietary host
objects; in the Second Worst Case you would be downloading the image data twice.
I then reference all of the old image's dom-nodes, append the new images
to the document, and finally remove the old dom- nodes.

It isn't working so well though.
It is not supposed to in your case.
After doing some looking around in Firebug, it seems that by the time I'm
ready to remove the old images, only some of the new images have been
preloaded (the rest are still being retrieved according to firebug).

I'm wondering if this has to do with the fact that I'm making a number of
server-side calls, and the lag-time it takes to do so is what is causing
only some of the images to be displayed.
That is a distinct possibility.
Any ideas?
You should modify the `src' property of the existing (HTML)Image(Element)
objects instead. Use cache-controlling headers to make sure you GET the
current images, from the server.

While your searching for "image rollover" or "image hover" before posting
would have already helped (see <http://jibbering.com/faq/>), this might give
you some ideas:

<http://PointedEars.de/hoverMe>
HTH

PointedEars
--
var bugRiddenCrashPronePieceOfJunk = (
navigator.userAgent.indexOf('MSIE 5') != -1
&& navigator.userAgent.indexOf('Mac') != -1
) // Plone, register_function.js:16
Jul 18 '08 #2
Thomas 'PointedEars' Lahn wrote:
Keith Hughitt wrote:
>I am having trouble preloading images in a javascript application, and
was wondering if anyone had any suggestions. Basically I have a bunch of
images stored in a database as BLOBs.

That might not be the best approach. *BLOBs increase the size of your
database heavily, thereby reducing its performance and that of the server..
You might want to use the filesystem for storing image files instead; it is
optimized for this kind of data. *Then you can store only the path of the
file in the database, which is optimized for that kind of data, and let the
server-side application handle the rest.
That is a good step indeed, but still a waste of database memory. The
uploaded image needs to get a name on server anyhow - just calling it
2546.jpg for record ID 2546 saves one long data column. And the more
images in a record, the more memory is saved (like 2546-A-thumb.jpg
etc.)

--
Bart
Jul 18 '08 #3
Bart Van der Donck <ba**@nijlen.comwrites:
Thomas 'PointedEars' Lahn wrote:
>Keith Hughitt wrote:
>>I am having trouble preloading images in a javascript application, and
was wondering if anyone had any suggestions. Basically I have a bunch of
images stored in a database as BLOBs.

That might not be the best approach. Â*BLOBs increase the size of your
database heavily, thereby reducing its performance and that of the server.
You might want to use the filesystem for storing image files instead; it is
optimized for this kind of data. Â*Then you can store only the path of the
file in the database, which is optimized for that kind of data, and let the
server-side application handle the rest.

That is a good step indeed, but still a waste of database memory. The
uploaded image needs to get a name on server anyhow - just calling it
2546.jpg for record ID 2546 saves one long data column. And the more
images in a record, the more memory is saved (like 2546-A-thumb.jpg
etc.)
Not to say that putting large blobs in the database is in general a
good idea, but it does have some advantages. For one, if you've got a
replicating database setup, you won't need any special tricks to also
replicate the "files", which makes data integrity less of an issue.

Also, some clever HTTP caching can reduce the server load for images
quite a bit, making the relative slowness of the database less of an
issue.

--
Joost Diepenmaat | blog: http://joost.zeekat.nl/ | work: http://zeekat.nl/
Jul 18 '08 #4
Thank you both for your replies. Regarding the initial problem of
preloading the images, I figured out what was wrong.
The problem I was having wasn't actually a *preloading* problem (even
though that's how I thought of it at first), but
rather a sequence issue. The images were in fact being 'preloaded,'
but because the time from when they started to be
preloaded and the time when they were being displayed was 0, the
effect was the same as if they were preloaded. My case
is different from simple hover buttons and the such because the images
I wanted to load are dynamic, and only determined
after the user takes some action (at which point they need to be
loaded immediately).

The solution was to create an event listener for each images "load"
event. The event handler simply increments a counter
(numLoaded), and checks to see whether it is equal to the total number
of images. Once that condition is true, the old
image dom-nodes can be removed. This guaranties two things: 1) That
when the new images are loaded, they load at (about)
the same time, which is important for me since they are parts of a
larger single image, and 2) that there is no visible
gap between the old images and new ones (Before, there was a period
after the old images had been removed and before the
new ones were added when the screen was blank).

In regards to the issue of where to store the images I appreciate the
suggestions. In fact, originally, the images *were*
kept in the filesystem, but due to the very large number of images (>
1 million), and limitations from the number of i-nodes
we are allowed to occupy on our web-hosting, we shifted to the
database approach. This also made things slightly simpler
in that both the images and their associated meta information was kept
in a single place, and could be fetched in a single step.

If the performance hit from storing images in the database is very
significant, however, it may be worthwhile to try and
find a way to get back to using the filesystem. Would you happen to
know of any references comparing the two approaches?
Thanks again for the feedback and suggestions.
Take care,
Keith
On Jul 18, 2:02*pm, Bart Van der Donck <b...@nijlen.comwrote:
Thomas 'PointedEars' Lahn wrote:
Keith Hughitt wrote:
I am having trouble preloading images in a javascript application, and
was wondering if anyone had any suggestions. Basically I have a bunch of
images stored in a database as BLOBs.
That might not be the best approach. *BLOBs increase the size of your
database heavily, thereby reducing its performance and that of the server.
You might want to use the filesystem for storing image files instead; it is
optimized for this kind of data. *Then you can store only the path ofthe
file in the database, which is optimized for that kind of data, and letthe
server-side application handle the rest.

That is a good step indeed, but still a waste of database memory. The
uploaded image needs to get a name on server anyhow - just calling it
2546.jpg for record ID 2546 saves one long data column. And the more
images in a record, the more memory is saved (like 2546-A-thumb.jpg
etc.)

--
*Bart
Jul 18 '08 #5
Also, some clever HTTP caching can reduce the server load for images
quite a bit, making the relative slowness of the database less of an
issue.

--
Joost Diepenmaat | blog:http://joost.zeekat.nl/| work:http://zeekat.nl/
Hi Joost,

Could you recommend any good places to start learning about how this
might be done?

Thanks,
Keith
Jul 18 '08 #6
Joost Diepenmaat wrote:
Not to say that putting large blobs in the database is in general a
good idea, but it does have some advantages. For one, if you've got a
replicating database setup, you won't need any special tricks to also
replicate the "files", which makes data integrity less of an issue.
Yes, I suppose this could be a benefit too. Personally I consider it
as a rule of thumb that storing BLOBs is a bad idea. I might be a bit
pre-occupied since I need to do a lot of performance tuning and I have
seen enough what havoc they can cause when not used with care.
Also, some clever HTTP caching can reduce the server load for images
quite a bit, making the relative slowness of the database less of an
issue.
Once you enter the field of larger BLOB's, I think there isn't much
other choice :-)

--
Bart
Jul 18 '08 #7
Keith Hughitt <ke***********@gmail.comwrites:
>Also, some clever HTTP caching can reduce the server load for images
quite a bit, making the relative slowness of the database less of an
issue.
[ ... ]
Could you recommend any good places to start learning about how this
might be done?
In short, you need to send out the right HTTP headers to make caching
possible, and if at all possible, you want URLs to images to *never*
change the content so you can set extemely long caching times, IOW,
new versions of the same image should get a new URL (probably by
adding a version nr or timestamp to the url).

Once that's done, any standard http caching proxy (like
http://www.squid-cache.org/ ) can be put "in front" of the webserver
and it will keep any duplicate requests from getting to the web server
doing this correctly can also help browsers to cache files
locally. You can even create distributed stacks of caches and/or CDNs
to spread the load over more machines.

http://www.mnot.net/cache_docs/ seems to be a reasonable introduction.

All this works not just for images, but for any HTTP resource, but
images are especially important because they tend to make up the bulk
of the traffic of most sites, and other resources tend to change more
often, making long-term caching more challenging.

--
Joost Diepenmaat | blog: http://joost.zeekat.nl/ | work: http://zeekat.nl/
Jul 18 '08 #8

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

22
by: Fabian | last post by:
var preload1 = new Image(); preload1.src = "/pic/yay.gif"; var preload2 = new Image(); preload2.src = "/pic/nay.gif"; The above is meant to preload image files, yes? Problem is, it doesnt seem...
6
by: michaaal | last post by:
Is this the correct way to preload an image...? Var Image1 = new Image() ....And then when I'm ready to use the image I can do this...? Button1.src=Image1.src ....Or am I just telling...
2
by: windandwaves | last post by:
Hi Gurus Preloading images has got to be JS 101. However, it does not seem to be working. Here is the function that I am using. I added the alerts to make sure it is working and all the right...
5
by: PR | last post by:
Searchable product images + prices database? What system should I use to put a database on the WEB which shows images and allows searches, including searches within given price ranges for...
4
by: Vonnie | last post by:
I have images stored in SQL (not paths or urls) I need to show them on webpages but the image control only seems to have a imageurl property. Is there another control I should use to databind? ...
2
by: Anitha | last post by:
Hi All, How to retrieve images stored in Access database. I am storing images(jpeg) as OleObject. I want display them on my web page. I am unable to do so.Please help me I am using C# The code...
0
by: ashishbaral | last post by:
Hi, I am having some images stored in an access database as OLE objects. I want to display them in a JSP page. how to do this ? Please Help !!
1
by: CodedSammy | last post by:
Hello. I am developing a solution in Visual Basic which will require me to display images stored in a disk files along with the content of my MySQL Database using the filenames of the images to...
4
by: Terry | last post by:
Hi folks. I am about to embark on creating a slideshow using javascript and css. I was wondering what do people consider the best way to preload the images to be used within the show. I saw...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
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...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
marktang
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,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
jinu1996
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...
0
agi2029
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,...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.