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

-2

我有创建动态图像幻灯片放映的任务，我使用免费的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

来源

2014-02-28 trai bui

您可以预加载图像，并且当您收到所有图像加载的通知后，即可开始幻灯片显示。在这里预载图像：http://stackoverflow.com/questions/8264528/image-preloader-javascript-that-supports-events/8265310#8265310 – jfriend00

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

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

来源

2014-02-28 09:32:31 Felix

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

也许这将帮助：Waiting for image to load in Javascript

来源

2014-02-28 09:33:03 exec

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

来源

2014-02-28 09:34:14

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

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

来源

2014-02-28 09:34:35 sanjeev

我想如果我没看错，你想要把滑块在屏幕上加载后的图像，那么你可以使用jQuery的

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

//在此处写滑块逻辑它正在等待准备好文档

});

来源

2014-02-28 09:37:20

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

你不会有这个问题，因为它默认加载页面上的所有图像，并且脚本只在图像加载后才运行，基本上你将拥有完全的控制权并且会有无痛的幻灯片显示。我一直在我的网站上使用它:-)

来源

2014-02-28 09:38:10 Wandile

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

来源

2014-02-28 09:55:03 YogiChordiya

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

回答

相关问题