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变量。它对我有用

超大型图像的异步加载

1 个答案: