PreLoading images

C

CD

I had a suggestion from previous post about preloading images. I gather it
was due to the menu using image swaps. Question is if I create a preloader
of some sort(not sure how or what) Is it possible to do without having to
add in every page the details of the images to preload? Eample being if I
have to add another button I dont want to go to every web page and add the
additional image for preloading. Hope this makes sense?

What is the best way to do? some type of java and add the referenced java
file to each page head? Then only update the jave file for new images?

TIA
 
M

Murray

ONce the images are loaded into the cache (whether by virtue of a preload or
simply being referenced on a page) they will always be used from the local
cache. So - you only need to mention any given image once. This is usually
only used for rollover images.

To preload images on any given page, open the page in FP, select the body
tag (or click in it), and use FORMAT | Behaviors > Insert > Preload
Images....
 
T

Thomas A. Rowe

Only true when images are referenced by the same absolute URL in all pages, then is will be
available from the cache for use in all pages.

When you use FP navigation, the path to images are adjusted based on the folder structure of your
web.

--
==============================================
Thomas A. Rowe (Microsoft MVP - FrontPage)
WEBMASTER Resources(tm)

FrontPage Resources, WebCircle, MS KB Quick Links, etc.
==============================================
 
A

Andrew Murray

Which version of FP?
FP 2003 has a preload images behaviour to do exactly what you want.

I think the code would need to be added to every page that used those
images.....?

Once the page has been viewed initially, on subsequent viewing, images and
such would be most likely loaded from the web cache (on the user's machine's
hard drive).
 
M

Murray

I think the code would need to be added to every page that used those
images.....?
Click to expand...

Naahhh - assuming they are referenced with the same link (as Thomas
mentions).
 
T

toxa26

You can do this in javascript. All you need to do is on top of your
page do something like this:

var images = new Array();
var myimage = images[0] = new Image();
myimage.src = "http://myurl/myimage.jpg";
.....

If you refer to these images later, they will all be cached

Anton
 
M

Murray

As Thomas points out, and in the context of your example, the image would
only be pulled from the cache if you refer to it with the same URI, e.g.,

<img src=''http://myurl/myimage.jpg"....

--
Murray

You can do this in javascript. All you need to do is on top of your
page do something like this:

var images = new Array();
var myimage = images[0] = new Image();
myimage.src = "http://myurl/myimage.jpg";
....

If you refer to these images later, they will all be cached

Anton
Click to expand...
 
T

Trevor L.

Thomas, Andrew and Murray

I would like to see if I have this clear also, as I think I am not
preloading/caching an image successfully.

My site http://tandcl.homemail.com.au/ uses framesets (I know, I know, I am
still looking at doing it differently). It is a fairly normal set-up - a
heading frame on top (heading.html) then underneath another frame, split
vertically into a sidebar frame (sidebar.html, with a menu of links on it)
and a mainpage frame (named index_main).

The heading and sidebar have a parchment gif of 4.87KB as a background. The
mainpage has a background image of 98.8KB - try as I might, I can't get it
any smaller. This mainpage can be overwritten by (currently) any of 4 other
pages with the same background image, by using anchors such as <a
href="about.html" target="index_main">.

The images are specified in style.css by the statements:
body {font : 16px Times New Roman, Arial, Helvetica, sans-serif ;
color : black ;
background: url(images/04-08-24-1-bird-bath.jpg) ;
margin : 0 ; padding : 0 ; }

body.border {background: url(images/parchmnt.gif) ;}
(class="border" is used on the <body> tags in heading.html and sidebar.html)

When the site is opened, parchmnt.gif loads fairly quickly, but it takes a
while for the main background image to come up. However, I thought that once
loaded, this image would be cached and then swapping to one of the other
pages would not cause it to reload. But the time taken for this background
image to appear is much the same.

The structure is simple - all html files are on the parent directory
http://tandcl.homemail.com.au/ and the image is on an images directory
http://tandcl.homemail.com.au/images/

My question is -
Does the main background image get cached?
If not, what can I do to ensure that it is?
--
Cheers,
Trevor L.


I choose Polesoft Lockspam to fight spam, and you?
http://www.polesoft.com/refer.html
 
T

Thomas A. Rowe

All images are cached, however to use the cached image, you must reference the image by the same URL
from every page.

--
==============================================
Thomas A. Rowe (Microsoft MVP - FrontPage)
WEBMASTER Resources(tm)

FrontPage Resources, WebCircle, MS KB Quick Links, etc.
==============================================
 
T

Trevor L.

Thomas,
It now tales a long time to switch between pages on my local site (as it
used to on the internet). I get this message in the status bar: "downloading
picture 04-08-24-1-bird-bath.jpg at http://tandcl.homemail.com.au/images/"
when I switch pages.

It seems therefore as if the download occurs every time I switch, i.e.
either the caching or the extracting from the cache is not working.

I have placed this in style.css
___________________________________________________________
body, frameset
{font : 16px Times New Roman, Arial, Helvetica, sans-serif ;
color : black ;
background:
url("http://tandcl.homemail.com.au/images/04-08-24-1-bird-bath.jpg") ;
margin : 0 ;
padding : 0 ;
}
___________________________________________________________

I have placed this in index.html
___________________________________________________________
<head>
..........
<script type="text/javascript" src="external.js">
</script>
..........
</head>

<!-- ------------------------------------------------ -->
<frameset rows ="65,*" onload="PreLoad()">
......
___________________________________________________________

I have placed this in external.js
___________________________________________________________
function PreLoad()
{
var images = new Array();
var myimage1 = images[0] = new Image();
myimage1.src =
http://tandcl.homemail.com.au/images/04-08-24-1-bird-bath.jpg;
}
___________________________________________________________

What am I doing wrong?
--
Cheers,
Trevor L.


I choose Polesoft Lockspam to fight spam, and you?
http://www.polesoft.com/refer.html
 
T

Thomas A. Rowe

Trevor,

I see a small delay when I first opened your site as the background load, thereafter no wait time as
load other pages.

However what type of JPEG format did you save this images under, progressive?

You still need to reduce the overall image file size to about 50 kb or less.

--
==============================================
Thomas A. Rowe (Microsoft MVP - FrontPage)
WEBMASTER Resources(tm)

FrontPage Resources, WebCircle, MS KB Quick Links, etc.
==============================================
 
T

Trevor L.

Thomas,

I agree that there is no delay in switching pages, but there is a delay in
reloading the background image for each page, and the downloading message
appears in the status bar every time. When I use my local web i.e.
C:\Documents and Settings\Trevor\My Documents\My Webs\myweb and don't point
to the web address, there is no delay in reloading the image (clearly
because it is on the directory named in Subdirectory images.)

So I need to set it up so that a user (myself included) doesn't have to wait
for the background to reload. Is my preload code correct?

I have used IrfanView to save the image. The settings were
Progressive JPEG
Keep EXIF info ) I don't know what these mean
Keep IPTC info )
Keep JPEG - Comment (I doubt there is a comment)

The last time I saved it I set quality to 80% and this reduced file size to
82.1 KB. Maybe I'll try again with 60% and I might get 50KB (80%*60% * 98.8
KB)
--
Cheers,
Trevor L.




I choose Polesoft Lockspam to fight spam, and you?
http://www.polesoft.com/refer.html
 
T

Trevor L.

Thomas,

My apologies, it now works on the Internet. The image is retained between
pages.

When I use it on local disk, I will have to ensure it either uses a cached
copy from the Internet or I use amended code which accesses the local disk
copy. This could be annoying for me, but it won't be seen by users.
--
Thanks,
Trevor L/


I choose Polesoft Lockspam to fight spam, and you?
http://www.polesoft.com/refer.html
 
M

Murray

The target weight for a typical FIRST page is 40-45K. That includes all
images, all rollovers, all backgrounds, all externally linked files, and all
code on the page. In a framed site, the target would be the aggregate
weight of all the pages!

I could never commit 2x that budget to a single background image.
 
T

Thomas A. Rowe

I am not seeing the delay in the background image loading after it is loaded the first time.

--
==============================================
Thomas A. Rowe (Microsoft MVP - FrontPage)
WEBMASTER Resources(tm)

FrontPage Resources, WebCircle, MS KB Quick Links, etc.
==============================================
 
C

CD

FP2003

I go to sleep and discussion breaks out. :)

I one nav page that has rollover images which is <included> on everypage.
The images are referenced by the folder not by full url, in fact all images
used are folder referenced.. I am confused on what to do so that the image
dont have to reload on each page using the include. From what I see it
appears the <include> only uses what is between the body tags. Don't know
if it uses any info that is wrapped int the body tag itself <body bla bla>?

test site www.frankkimmel.com/default.htm

Is it bad to use inlcudes? I have the same 3 on the every page, just from
the fact of being to update 3 pages as to the every page.

THANKS to all, I keep expanding my ablites with the help of this
group..kudos
 
M

Murray

I am confused on what to do so that the image
dont have to reload on each page using the include
Click to expand...

You would have to do nothing. It will be reloaded from the local cache,
e.g.

Page 1 ===> <img src="foo.gif"
Page 2 ===> <img src="foo.gif"
Page 3 ===> <img src="foo.gif"

When page 1 loads, foo.gif will be fetched from the server and placed in the
local cache. When page 2, 3, etc., load, they will retrieve this image from
the local cache.

Includes have nothing to do with it, since by the time the code gets to the
local browser, the includes have been ... well ... included, and it's just
code as far as the local browser is concerned. It then parses all links
from the code, checks the cache for any that match, and fetches the rest
from the server.
Is it bad to use inlcudes? I have the same 3 on the every page, just from
the fact of being to update 3 pages as to the every page.
Click to expand...

This is exactly the advantage of using includes. Is it bad to use them?
Certainly not.
 
C

CD

More confused :(

Do I need to pre load or not? :)

The images are folder referenced based on every comments this would not use
local cache. Did I interpet wrong?

Should I change image references to the full url for the images instead of
folder stucture?

The include portion I was trying to refer to was all comments add the
preload in the <head> that would not occur with the included pages since it
appears the <include> starts at the <body> tag.

TIA
 
M

Murray

Here are two circumstances where you might need to preload -

1. You have a page with rollover images. Without a preload, the first time
each rollover is tickled, the over image would have to be fetched.
Subsequent rollovers would (should) pull from the cache, but that can also
depend on your browser and its local settings. Consider a reload for the
rollover images in this situation.

2. You have some heavy images that *may* need to be downloaded depending on
visitor interactions. You can parcel them out to preload on OTHER pages so
that the cache is already primed with them if and when the need arises.

I can't think of any others.

In general, the lighter weight your pages become, and the more you integrate
CSS techniques, the less meaningful any preload will be.....
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

css problem with background images 7
Please help! Remote rollovers takes too long 16
Behaviors & Preloading Images 1
Clock requests data each tick? 6
Preloading Images 4
Include Page and Image Swap 1
Variable Home Page Image 6
Calling external js file 4

Top