如何在加載圖像後運行腳本

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

您可以嘗試爲圖片添加「onload」偵聽器。

也許這將幫助：Waiting for image to load in Javascript

Answer 3

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

Answer 4

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

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

Answer 5

我想如果我沒看錯，你想要把滑塊在屏幕上加載後的圖像，那麼你可以使用jQuery的

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

//在此處寫滑塊邏輯它正在等待準備好文檔

}); 

Answer 6

這很簡單我建議你使用bxslider它的免費和非常強大的jQuery滑塊，它甚至在每個幻燈片後都提供了各種回調（意味着你可以在每張幻燈片後運行某個功能，非常酷）。

你不會有這個問題，因爲它默認加載頁面上的所有圖像，並且腳本只在圖像加載後才運行，基本上你將擁有完全的控制權並且會有無痛的幻燈片顯示。我一直在我的網站上使用它:-)

Answer 7

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