Asynchronised loading of image in supersized

Question

I am using a supersized slider, and I want to implement something which I am unable to do.

Say I have a image slide-interval of 3 secs,

I have four images a.jpg, b.jpg, c.jpg and d.jpg.

Now b.jpg is a very big image, so it takes time 4 secs to load.

Now after a.jpg is loaded and stayed, it slides to give way to image b.jpg.

Now since slider interval is 3 secs and b.jpg needs 4 secs to load, the slider changes in such a manner that before b.jpg gets completely loaded, the slider changes and c.jpg gets loaded.

So as such b.jpg cant be seen because c.jpg gets loaded before the b.jpg.

I want the slider to act like this: untill and unless one image gets totaly loaded, the slider won't transit.

Say if b.jpg takes 6 secs to load, the slider would give it 6 secs to load. After loading completely it will stay for 3 secs (transition interval) and then the slider would change.

Here's my script:

$(window).load(function(){
            jQuery(function($){

                $.supersized({

                    // Functionality
                    slide_interval          :   3000,       // Length between transitions
                    transition              :   1,          // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
                    transition_speed        :   1200,       // Speed of transition

                    // Components                           
                    slide_links             :   'blank',    // Individual links for each slide (Options: false, 'num', 'name', 'blank')
                    slides                  :   [           // Slideshow Images
                                                                                                          <?php
                                                                                                             foreach($wed_image as $wi)
                                                                                                             {?>
                                                        {image : '<?php echo base_url().$wi['wed_pic_image'];?>', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-1.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'},
                                                        <?php
                                                                                                             }?>

                                                ]

                });
            });
           }); 

Answer 1

First Store your php code in Javascript variable:

 <script type="text/javascript">

    var x="<?php echo base_url().$wi['wed_pic_image']; ?>";

// Near your image src user like this

{image : x, title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-1.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'}, 

// Use the Javascript variable near image. it's worked for me