超大尺寸圖片的異步加載

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變量。 對我有用