CODEWITHSUNDEEP
javascriptjquery
Istiaque Ahmed
Istiaque Ahmed

Reputation: 6488

fadein images proloaded with javascript

image preloading code snippet :

myimages=new Array()
function preloadimages(){
   for (i=0;i<preloadimages.arguments.length;i++){
      myimages[i]=new Image()
      myimages[i].src=preloadimages.arguments[i]
    }
}

preloadimages("img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg")

jquery code to display preloaded images:

$(".vrpl_slider_img").fadeIn(40000).html(myimages[i]);

I used image preloading so that the first image in my slider does not take time to show up, but it does with a blank space instead and all the consequent images show up without showing any blank space. But I don't know how to fadeIn the images during display.

the following code

$(".vrpl_slider_img").fadeIn(40000).html(myimages[i]).fadeIn('slow');

shows an error in console:

$(".vrpl_slider_img").fadeIn(40000).html(myimages[i]).fadeIn is not a function

I want a slider the one in http://www.cisco.com/

1) what should be the steps so that no blank space shows up at the very first time the slider begins? Putting code inside $(document).ready(.. or not does nothing.

2) how to achieve the fadeIn effect?

3) In http://www.cisco.com/, for each image, the text on the image seems to be highlighted a bit after the rest part of the image. How to achieve that?

EDIT:

after the image preloading snippet, the next segment follows:

for (i=0; i<n; i++){

$(".vrpl_slider_img").fadeIn(40000).html(myimages[i]);



if(i==n-1){

i=0;
}
    }

that is all about the part of the slideshow I am interested to discuss here.

Upvotes: 0

Views: 168

Answers (1)

jfriend00
jfriend00

Reputation: 707416

You don't want to be calling .html() on an img tag. You want to be setting the .src attribute on the img tag to point it to a new image. Assuming that .vrpl_slider_img is initially not visible, you would use this:

preloadimages("img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg")

// then some time later after the preload images have loaded
$(".vrpl_slider_img").attr("src", "img/1.jpg").fadeIn(40000);

You do not need to use the preload images at all once they've been loaded. The point of the preload images it to cause the images to get loaded into the browser cache so they are available locally (rather than over the internet) and will thus be loaded immediately when requested in the future. So, you just use the .src attribute with the normal image path and, because the image is in the browser cache, it will load immediately.

Upvotes: 2

Related Questions