Basically what I'm trying to achieve is when a new image is selected(clicked), the 'click' passes the new image name (and width, height) to the 'changeimg' function, I want this function to fade the current img so we can see the back ground wait img. then when the new image has preloaded successully, replace the current image and fade it back to full. It appears to do this mostly, but its not preloading the image, sometimes the contain will exapand to the new size and I'll see the image loading into it.
I'm wondering if I'm using the preload (new Image()) correctly, I cant locate any examples similar to what I'm doing. Most exapmles I see all appear to be to do with image rollovers. Which isn't what I need, I also do not want to pre load any images until they have been requested.
I have this working fine, and I can append the preloaded image to a hidden div then fade the div in for a smooth effect.
Problem is I want to set this preloaded image as a css background image, not as a <img /> in a container. But if when the image is loaded, instead of .prepend() I do .css() and set the css property of a background-image to be the preloaded images URL, then when it carries on with displaying it the browser loads the image again. Rather than using the preloaded one.
I want the image to be a background image as I want it centered in the page background, even if it is too large for the viewport.
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?
I got a script that rotates my images, but I have almost 300 in stock and it is preloading all 300 once the script is started. How do I get it to preload one at a time, or nothing at all? Code:
This isn't working and I can't figure out what I'm doing wrong:
var c_imgs = new Array( 'images/champascari.jpg', 'images/champfangio.jpg', 'images/champhawthorn.jpg', 'images/champhill.jpg', 'images/champsurtees.jpg', 'images/champlauda.jpg', 'images/champschumacher.jpg'); var pre_img; for (var i = 0; i < c_imgs.length; i++) { pre_img[i] = new Image(); pre_img[i].src = c_imgs[i]; }
If this code is correct, should I put it in a function and then call for it ?
I want to use an image as a CSS background-image so I used the Image constructor to load the image: [URL] but I noticed that the browser (Firefox) load the image from the URL and not from the memory when changing the background-image property (it takes about 1.5 seconds before showing the image, and every time I reload the page!)
I'm trying to preload an image before it fades in and I'm using the following code to do so. Could someone please tell why it doesn't work? The layer fades in and then the image suddenly shows up.
I have a large image that I change by clicking on some small images to change it.
I use this code to preload images and then fade in, but it doesn't look nice. Once the images are cached into the computer the fading is perfect, but the first time it seems like it fades at the same time as it loads. I wonder if it could be done in some other way? Perhaps use a callback or preload all images into an array, but I'm new and don't really knows how to put i together yet?
I've got 2 questions if that's OK. I have a number of scripts running on a site i'm working on and I think I may be getting a clash with the image preload and another font resizing script. As I am new to javascript I have picked up the code from elsewehere. I am trying to get my head around it reading tutorials etc but am getting stuck when it comes to multiple scripts on the page
There are a number of scripts running: browser detect, png opacity, image preload, layer show/hide and a font resize.
here is the site
Q1 In IE5.5+ on the PC neither the font sizer nor the image preload is working - i think it is a clash of onload events. Can anyone suggest a fix?
Q2 I think there must be a better way to have my images preload. The current code is the dreamweaver version. Is there a better way?
function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; }
function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} }
function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; }
function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} }
a) preload all img's and background's on a given page
b) display an animated gif in the center of the original's img's or background's container
c) fade out showing each image once it's downloaded
d) as a consequence of (a) allow the page to render (show) quicker even if (depending on server speed, connection speed and user computer speed) the remaining images are still in a 'load state'.
e) is based on JQuery so not to increase page's footprint via adding Mootools, Prototype, YUI or the like (unless the additional 100KB or so is so worth it).
I've scouted Google and there a few out there but amazingly none seem to focus on doing this for a web page's image's but rather seem to focus on galleries/lightbox windows and so forth.
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.
I´m using dreamweaver´s built in preloader for a menu. it looks like this:
function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
Has anyone else had this issue? Basically, the preload of images for a rollover effect for the navigation is really really slow when using IE 6.0 but when i view the site using Netscape, it's fast like it should be(no lag!)
My problem is that since 96% of users use IE, i need to figure a way to fix this. Below is the javascript currently being used. The arguments are passed in before the script is called.
function gn_rollover_preload(){ //preloads middle images for the navigation if (document.images){ var argLength = gn_rollover_preload.arguments.length;
for (arg=0; arg < argLength; arg++){ eval(arguments[arg] + "_off = new Image()"); eval(arguments[arg] + "_on = new Image()"); eval(arguments[arg] + "_left = new Image()"); eval(arguments[arg] + "_right = new Image()");
// Now Preload all "corner" images for faster swapping corner1 = new Image(); corner2 = new Image(); corner2_both = new Image(); corner3 = new Image(); corner3_both = new Image(); corner4 = new Image(); corner4_both = new Image(); corner5 = new Image();
Want to know if there is a way to preload a song before the slide show starts. Also, would like to be able to show the lyrics 2 paragraphs at a time, timed with the singer so viewers don't have to scroll to see the lyrics. The lyrics are currently just in a table row with the <td> tag. I would have to have a timer start with the execution of the song, and replace the lyric text as the singer completes each verse.
Or, can you link the photo image with the scroll bar so if they scroll, photo will scroll so they can still see it as they view the lyrics.
I really have little idea of what I am doing, and have gotten to where I am by lifting various scripts off the Internet. Any help would be greatly appreciated. Please keep in mind I am a web designer IDIOT.
im working on a webpage with rollover buttons, and im noticing that on everylink of the page the page reload the buttons again,and again, is there something i can do to use them from cache instead load them every time? it could save time for audience and bandwith for the hosting :) the rollover was made for imageready Code:
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).
