Question

I have task that create dynamic image slide show,I use free javascript for image slide show,I load images in database and put them to script,I recognize that script runs before we load image,Is there any ways to load data before script run or any suggestions to do this action?

here is my code:

<?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>

here is the free script I copy :

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

No correct solution

OTHER TIPS

You can wait until your load() finish then run your code:

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

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

You can try to add "onload" listener for your image.

Maybe this will help: Waiting for image to load in Javascript

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

I think if i am not wrong and you want to put slider on screen after loading image then you can use the jquery

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

// write your slider logic here it's wait for ready the document

 });

This is simple I suggest you use bxslider its free and very powerfull jquery slider it provides all kinds of callbacks even after each slide (meaning you can run a certain function after each slide, pretty cool).

You will not have this problem as it loads all the images on page by default and the script only runs after the images have been loaded, basicly you will have full control and will have painless slideshow. I use it all the time on my websites :-)

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top