超大尺寸图片的异步加载

Question

我正在使用超大滑块，并且我想实现一些我无法做到的事情。

假设我的图像滑动间隔为3秒，

我有四个图像a.jpg，b.jpg，c.jpg和d.jpg。

现在b.jpg是非常大的图像，因此加载需要4秒钟的时间。

现在，在加载并保留a.jpg之后，它会滑动以让位于图像b.jpg。

现在，由于滑块间隔为3秒，并且b.jpg加载需要4秒，因此滑块的更改方式是，在b.jpg完全加载之前，滑块会更改并且c.jpg也会加载。

因此无法看到b.jpg，因为c.jpg在b.jpg之前加载。

我希望滑块的行为如下：除非完全加载一张图像，否则滑块不会过渡。

假设b.jpg加载需要6秒钟，则滑块会将其加载6秒钟。 完全加载后，它将停留3秒钟（过渡间隔），然后滑块将改变。

这是我的脚本：

$(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

首先将您的php代码存储在Javascript变量中：

 <script type="text/javascript">

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

//像这样在您的图片src用户附近

{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/'}, 

//在图像附近使用Javascript变量。 对我有用