Question

我有创建动态图片幻灯片的任务，我使用免费的javascript进行图片幻灯片放映，我在数据库中加载图片并将它们放到脚本中，我认识到脚本运行之前我们加载图片，有没有办法加载数据在脚本运行之前或任何建议执行此操作？

这是我的代码：

<?php  
  $baseUrl = Yii::app()->baseUrl;   
  $cs = Yii::app()->getClientScript();
  $cs->registerScriptFile($baseUrl.'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'); 
  $cs->registerScriptFile($baseUrl.'/themes/classic/js/jquery.cycle.all.min.js');  
  $cs->registerScriptFile($baseUrl.'/themes/classic/js/presentationCycle.js');   
  $cs->registerCssFile($baseUrl.'/themes/classic/css/presentationCycle.css');
  $cs->registerCssFile($baseUrl.'/themes/classic/css/slidecontent.css');
?>
<div class="container">  

        <div id="presentation_container" class="pc_container">       
            <div class="pc_item">
            <?php if($models != null): ?>       

                        <?php  foreach($models as $model): ?>                   
                <div class="desc">
                   <h1><?php echo $model->cate_name?></h1>                 
                </div>
                <img src="/uploadfiles/categories/<?php echo $model->cate_image?>"  alt="<?php echo $model->cate_image?>" /> 
            <?php endforeach;?> 
                        <?php endif; ?> 
            </div>           

             <div class="pc_item">                      
                <div class="desc">
                   <h1>TEST</h1>                 
                </div>
                <img src="/uploadfiles/categories/02-08-2014-06-58-02-regular acrylic.jpg "  alt=" 02-08-2014-06-58-02-regular acrylic.jpg " /> 

            </div>
        </div>

        <script type="text/javascript">
            presentationCycle.init();
        </script>

    </div>

这是我复制的免费脚本：

http://ntuts.com/tong-hop/15-jquery-slideshow-ban-khong-nen-bo-qua

Answer 1

您可以等到load()完成后再运行代码：

$('selector').load(...................., function() {
     // Your script here
});

Answer 2

$(document).ready(function(){
 $('img').load(function(){

     //your script inside it
  });
});

Answer 3

<img src='your-image-name' onload='callLoad()' />
function callLoad(){
// your code goes here
}

Answer 4

您可以尝试为图片添加“onload”侦听器。

也许这会有所帮助：Waiting for image to load in Javascript

Answer 5

$('#myImage').attr('src', 'image.jpg').load(function() {  
  // your script
});

Answer 6

我想如果我没错，你想在加载图片后将滑块放在屏幕上，那么你可以使用jquery

 $("document").ready(function(){

//在这里编写滑块逻辑，等待文档准备就绪

});

Answer 7

这很简单我建议你使用bxslider它的免费且非常强大的jquery滑块它甚至在每张幻灯片之后提供各种回调（意味着你可以在每张幻灯片之后运行某个功能，非常酷）。

您不会遇到此问题，因为默认情况下它会加载页面上的所有图像，并且脚本仅在图像加载后运行，基本上您将完全控制并且将进行无痛的幻灯片放映。我一直在我的网站上使用它： - ）

如何在加载图像后运行脚本

7 个答案: