Defining Preload Var For Composite Images

Nov 13, 2006

I have built a function that allows users to select a color tile and trim option for a cooking range. Here is a code snippet showing the function:

var color, trim, description;
function displayRange(selectColor, selectTrim, showDes)
{
var rangeName;
if (selectColor != '')
color = selectColor;
if (selectTrim != '')
trim = selectTrim;
rangeName = "images/cluny1400" + color;
if (trim == 'chrome')
rangeName += "_chrome";
rangeName += ".jpg";

var rangeDescription;
if (showDes != '')
description = showDes;
rangeDescription = description;
document.getElementById('rangePict').src = rangeName;
document.getElementById('rangeDes').innerHTML = rangeDescription;
}

Based on the users selections the range image in the selected color and trim is loaded into the interface. My problem is this:

The selected image is made up of three elements, based on the users selection, color and trim and the .jpg extension. This function works well.

However, I cannot work out how to use the image object to preload the images (of which there will be over 34). Normally you would assing a var to hold a new instance of the image object and then assign the src property to the image url. But how do I do that when the var rangeName is composed of three elements. I cannot use a simple var and then call that var in the function.

I have this code snippet, that illustrates my problem:

// create function to preload images
// eliminate older browsers by checking for image object support
function preload() {
if (document.images) {
cluny1400au = new Image(478, 314);
cluny1400au.src = "images/cluny1400au_fw.jpg";
cluny1400au_fw_chrome = new Image(478, 314);
cluny1400au_fw_chrome.src = "images/cluny1400au_fw_chrome.jpg";
}
}

The vars cluny1400au and cluny1400au_fw_chrome would be fine if I could use them in the function to call the images, but I don't think this will work as I believe that you have to use the same var name in the function as in the image object.

Can anyone tell me how the cluny1400au = new Image(478, 314); and cluny1400au_fw_chrome.src = "images/cluny1400au_fw_chrome.jpg"; should be constructed to work with the function.

Here is an html snippet from the page to aid clarity:

<body onLoad="preload()">
<div id="wrapper">
<p><img src="images/cluny1400_bw_chrome.jpg" name="rangePict" width="478" height="314" id="rangePict" /></p>
<p id="rangeDes" name="rangeDes">Description</p>

Thank you in advance for any help.

View 1 Replies


ADVERTISEMENT

Difference Between Defining Variable With 'var' Before Versus Defining Without It?

Nov 26, 2010

What's the difference between defining a variable with 'var' before, versus defining without it?[code]

View 2 Replies View Related

Preload Many Images

Jul 23, 2005

I have tried several preload scripts found here; plus, some of my own.
The only thing that works is the unsophisticated loading of those
tiny images. The download consist of 100+ images amounting to 50+mb;
and, normally completes in less than 1 minute without preload (using
DSL).

The preload terminates after 6 or 7 images and seems to time-out in the middle of an image. A reload will download a few more, etc. I have used the <body onLoad=function()>
approach as well as the non-function approach of JS that executes immediately with the page's loading. Getting the same results with Netscape-7 and IE-6.

I need to add: The source of the array containing the image references is a '.js' file. That doesn't seem pertinent as some of the images always load.

View 2 Replies View Related

Preload All Images

Jun 1, 2004

I would like to preload all images on a certain page, without 'knowing' which pictures are on the page. (I want to write a .js file, put in the header of all the pages)... So, I don't know what pictures are on the particular pages.

Can this be done? If so, how?

Than another question (if the above is possible)... Say, one of the 'found' pictures can't be loaded (it's not in the correct folder)... can this pictures be replaced with another picture? (for instance: pic_not_found.jpg).

View 4 Replies View Related

How To Preload Images

Dec 5, 2010

the first 4 tabs are showing some images as background:clicking the tabs will trigger a fading-effect, but as long as the user hasn't watched the 4 images, the effect is "interupted" by the loadingprocess of the images. is it possible to preload those images so that they are in the browsercache or something?

View 4 Replies View Related

Preload Images Not Working

Jul 23, 2005

I'm preloading images with the standard code:

default1 = new Image(); default1.src = "images/image1.gif";
changed1 = new Image(); changed1.src = "images/image1-on.gif";
default2 = new Image(); default2.src = "images/image2.gif";
changed2 = new Image(); changed2.src = "images/image2-on.gif";

And this is my rollover code:

var iName="";
function Ichange(p) {
var pSrc=eval(p+ ".src");
document[iName].src = pSrc;
}

But for some reason on the first mouseover it doesn't seem like the
image has been preloaded. There is a delay, like it's looking for the
rollover image, which should have already been preloaded. Anyone have
any ideas why?

Here is the inline code for a mouseover:

View 5 Replies View Related

Preload Images In A Loop

Nov 25, 2006

I think to preload an image I should us something like:

img = new Image();
img.src = 'images/img.jpg'

Could someone tell me how to create a loop which would preload a list
of images? Something like:

ImagesFolder = '...'
ImagesNames = '...'

For i = 0 to ImagesNames.Count
img = new Image();
img.src = imagesFolder + imagesNames(i)
End

Is this a good approach? Could someone tell me the javascript code for this?

View 4 Replies View Related

Preload Images Using A Loop

Feb 3, 2009

i am making a gallery and i was advised by philip m to preload my images before hand, so that the gallery runs smooth. i have done so but in a different way to what ive seen on some of the other posts on this forum and i was just wondering if this was practical javascript or am i over doing it.bascially, the images are external hrefs loaded into place holders.the external hrefs are stored as strings in an array.

so the loop runs for however many image hrefs are in the array.so the first iteration of the loop, an image is created and is given the href of whateever value the loop is of the array.then for each iteration of the loop, the var img, is overwritten with the next href in the array.so technically, iam not creating as many images as there are in the array, i am just creating 1 then overwriting it, but still loading the image data in to the browser cache.

View 2 Replies View Related

Preload Images From Directory?

Mar 28, 2011

I have some images 5 or 6 that are 800 x 300 i use in my website banner.The start loading but when number one is 1/3 of the way teh next one starts then the next, it looks real messy nee some way to preload them ... like black square or something .code i used below


<script language="JavaScript">
// configuration structure
var A_TPL = {[code].....

View 1 Replies View Related

Preload Images From FOLDER

May 27, 2009

I want to create a preload for images but do not want to have to specify every single image file name.Is there a way to just specify a folder and all images in ti will be preloaded?

View 2 Replies View Related

Preload Images In Array

Nov 18, 2009

i want all of the images to preload, but i want to do it in such a way that i don't have to list all of the images a second time.. I want it to somehow grab all the images from the array and load them. is there a simple or relatively easy way of doing that?

View 4 Replies View Related

Javascript Preload Images

Jun 24, 2003

I have a site that I have a bunch of rollovers for..

I have a preload image script as follows:


<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
image1 = new Image();
image1.src = "/images/image1-over.jpg";
image2 = new Image();
image2.src = "/images/image2-over.jpg";
// End -->
</script>


This works just fine for NETSCAPE... it preloads it, so you can cruise over the rollovers perfectly without wait the first time you load.


However, with IE, it doesn't work the way it should, and it still takes time to load each rollover when you hover the first time. And they don't seem to cache properly and you're constantly reloading them.

View 2 Replies View Related

Preload Images On Navigation

Mar 29, 2005

can I use JS to preload images used later on the nav? So when a user uses it, it doesn't have to download the image, just take it from the cache?

View 12 Replies View Related

Preload Directry Of Images

May 14, 2007

I have a site that uses image navigation with a CSS rollover. The images flicker for about a second while the rollover images load. I'd like to preload the images with JS. Now, they're about 10 images in one directory, is there a way to just preload all the contents of the directory?

View 4 Replies View Related

Javascript How-To: Preload Images

Mar 4, 2002

I had opportunity to meet with Creole a few days ago and we were discussing some options to pursue in the Build forum. I thought I'd start here in javascript and find out methods users use to preload images. I realize that this information can likely be found in a google search, but if we can get some good insight, maybe start putting an FAQ of javascript issues for Sitepoint Forums together. What do you think?

View 1 Replies View Related

Preload Images Script!!

Oct 29, 2002

I am using the below preload images script and It seems to not be working... PHP Code:

<script>
function doPreload()
{

   var the_images = new Array('/images/pd2.gif','/images/explore2.gif',
   '/images/games2.gif','/images/shops2.gif','/images/chat2.gif',
   '/images/mail2.gif','/images/help2.gif','/images/login2.gif',
   '/images/logout2.gif');
   preloadImages(the_images);
}

function preloadImages(the_images_array) {

   for(var loop = 0; loop < the_images_array.length; loop++)
    
   {
    var an_image = new Image();
    an_image.src = the_images_array[loop];
   }
}
</script>

View 1 Replies View Related

Preload Images Still Reloading From Server?

Jul 20, 2005

I have a rolling image script that works fine except that the images do not seem to be preloading properly. The images are still being pulled on every interval from the
server according to the logs...is it because I am using the document.write method? Is that forcing a refresh? Code:

View 2 Replies View Related

Why Ie Doesn't Preload Images Properly?

Jul 18, 2009

i am using the javascript Image object to preload images, on FF everything works fine but ie always reload the images so i get some flicking.

View 9 Replies View Related

Preload All The Images When The Page Loads?

Dec 29, 2010

i am working on a facebook like photo viewer. I have used javascript to declare an array of about 200 images. I have the following approach to pre-load the images.I preload all the images when the page loads:

HTML: <body onload = "lodpic()">
JAVASCRIPT:
function lodpic()
{
for(i=0; i<=199; i++) {[code]....

The problem is the page tries to load all the images when opened. And when the user clicks "next" to view other photos, the other photo is still loading where as some are already loaded.I would like the code to be able to load the photo that the user is currently viewing as the user gets to that picture, before the page tries to finish loading all the photos.In other words, if the user wants to view a particular photo directly, that photo should get the priority of loading quickly.

View 4 Replies View Related

Preload Images In Image Swap

Aug 4, 2003

This code seems so simple but I can not get it to work. I am trying to preload images for use in an image swap. This is the code I am using:

<body onLoad="preloadimages('ro_bui.jpg', 'ro_mar.jpg', 'ro_sto.jpg', 'ro_mec.jpg', 'ro_pai.jpg', 'ro_fib.jpg')">

<script language="JavaScript" type="text/javascript">
<!--
function preloadimages() {
var roimages=new Array();
var arguments=preloadimages.arguments;
for (i=0;i<arguments.length;i++){
roimages[i]=new Image();
roimages[i].src=preloadimages.arguments[i];
}
}
-->
</script>

In the mouseover event I have

<a href="marina.htm" onmouseover="document.images['ro'].src=roimage[0].src" onmouseout="document.images['ro'].src='ro_base.jpg'">

for each rollover....

View 8 Replies View Related

Preload Images Using Variables In A Loop

Jul 28, 2005

I want to create a javascript function which preloads a few images.

The function preloadImages should receive a variable which indicates the web site current culture.

If culture = "pt-PT" then should use arrayptPT
If culture = "en-GB" then should use arrayenGB
and so on...

Then all images of the array should be loaded using a For loop.

All the images in the array are in path: images/ culture value /.

So the ideal would be to have only the image filenames in the arrays.

Then the loop would go throught the right culture array and load all the images there from folder images/ culture value /...

View 1 Replies View Related

Automatically Preload All Images In A Stylesheet

Nov 11, 2005

Ever had the problem that when creating mouseover buttons using CSS and Javascript, it takes a little while to load the second image? This script will automatically loop through all loaded stylesheets and will preload them into your browser, so no need to create an image-list by hand.. Code:

View 1 Replies View Related

Using Preload For Multiple Images And Want To Link To A Webpage?

Mar 31, 2009

Am using jquery and javascript to load images.Everthing is working fine, but I would like the user to be taken to a webpage for each of the images below.

Code:
function PreloadImg(){
$.ImagePreload("/images/slash2.jpg");

[code]....

View 7 Replies View Related

Defining Div Width Equal To Undefined Amount Of Images Total Width?

Oct 4, 2010

let me try to explain better what I'm trying to do. I'm a real newbie I don't know much javascript but I understand more or less the logic behind it... tell me if this solution should work and if you know how to do it please show me. [URL]... I need to make div#photo's width to match the total width measurement of all the images it contains. If you load the page and you don't touch the size, it will work fine... but that's not realistic. If I resize the page, which will happen often on this kind of page (I'm assuming), the whole thing goes haywire (try it, scroll to the last image and resize the page you'll see what I mean). What can I do? Is my idea the right solution? Am I not explaining this clearly enough? Let me know please, I'm desperate. I've been trying to get CSS to do this for me for 3 hours now. Nothing works.

View 6 Replies View Related

Defining New Opener

Dec 21, 2002

I have just created an 'open window' function for an animated page. It opens the current animation from the current page into a new window, and lets the user change the 'opener' animation while the new animation in the new window continues, sychronised with the opener.

As the opener contains the clock for sychronisation, I can only use the animations from that page (and I have a few pages of small animations). I can let the new animation on the new page continue with its own clock if the opener is closed, but what I would like is if a new animation is started from a new opener, then it tells the existing opened window the new page speed...

got it?????
trymy rhythm pages
follow steps.....
1; open new window
2; click on drum in new window to turn on
3; start rhythm by clicking on hands in main window

I can change between rhythms, so long as I stay on the main page. The problem is when I change the main page to go to other rhythms I loose the sychronisation.

I can go to another page(from opener) and put a new rhythm in the current new window, but I would prefer to keep the old rhythm and sychronise.

View 2 Replies View Related

Defining Pictures In An Array

Jun 15, 2006

I wish to access several pictures on my page by defining them as an array. This way I can either loop through them or access them by array index.

What I am really doing is writing my own picture gallery and slide show. The reason I am doing this is so that I can have my web page look exactly the way I want. In addition, it is an excellent way to learn Javascript.

View 2 Replies View Related







Copyrights 2005-15 www.BigResource.com, All rights reserved