[jQuery] Re: Cycle - preload images possible??

Wed, 15 Jul 2009 15:55:57 -0700 

If you are going to keep the images in the HTML page itself, then you
should probably just preload them in the <head> of your document using
an array:

    <script type="text/javascript">

//check to see if image object exists (real old browsers don't have
it)
    if (document.images)
    {
      //create a new image object
      preload_image_object = new Image();
      // set image url
      image_url = new Array();
      //populate your array for each of your images
      image_url[0] = "http://mydomain.com/image0.gif";;
      image_url[1] = "http://mydomain.com/image1.gif";;
      image_url[2] = "http://mydomain.com/image2.gif";;
      image_url[3] = "http://mydomain.com/image3.gif";;

       var i = 0;
       //loop through the array, if you had 12 images it would be
(i=0; i<=11; i++) since the indexes start at 0
       for(i=0; i<=3; i++)
         preload_image_object.src = image_url[i];
    }


    </script>



On Jul 15, 5:51 pm, whiggins <whiggin...@gmail.com> wrote:
> Thanks for your response!
>
> I have the photos placed within a div (#photoshow) on the html page
> itself - I'm curious to know how might your code be altered to preload
> them in this situation?
>
> Unfortunately I had no success with the script as mentioned on
> the ...cycle/add3.html page. What has worked is a CSS rule of
> display:none for all the imgs except the first, to which I gave a
> class of "first" and a CSS rule of display:block so there is something
> to see while Cycle loads up.
>
> Propped up for now, but working. I appreciate your help!
>
> On Jul 14, 1:22 pm, amuhlou <amysch...@gmail.com> wrote:
>
> > Cyclesupports loading images via ajax, which I think could smooth out
> > the long load issues.
>
> > A very basic impementation would be
>
> > $("#cycleDiv").load(slides.html, function(){
> >                 $(this).cycle({
> >                         timeout: 5000
> >                 });
>
> > });
>
> > where "slides.html" is the path to an html file that looks something
> > like:
> > <img src="slide1.jpg" alt="" />
> > <img src="slide2.jpg" alt="" />
> > <img src="slide3.jpg" alt="" />
>
> > This may also be helpful to you:http://malsup.com/jquery/cycle/add3.html
>
> > On Jul 14, 10:27 am, whiggins <whiggin...@gmail.com> wrote:
>
> > > Am usingCycle(fade) for image slideshow very happily, except for the
> > > big visual flap when all the photos (12 or so, but large-ish) load
> > > prior to cycling.
>
> > > I've looked for apreloadsolution but haven't immediately found any.
> > > Is this best? Is there another solution?
>
> > > Would be grateful for any help with this! (obviously it's safe to
> > > assume I know little re: js)

Reply via email to