How To Run Script After Load Image

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

You can preload the images and when you get a notification that all images are loaded, you can then start the slideshow. Preloading images here: http://stackoverflow.com/questions/8264528/image-preloader-javascript-that-supports-events/8265310#8265310 — jfriend00, Feb 28 '14 at 09:32

score 1 · Answer 1 · answered Feb 28 '14 at 09:32

1

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

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

answered Feb 28 '14 at 09:32

Felix

37,892
8
43
55

score 1 · Answer 2 · answered Feb 28 '14 at 09:34

1

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

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

answered Feb 28 '14 at 09:34

sanjeev

4,405
2
19
27

score 1 · Answer 3 · answered Feb 28 '14 at 09:55

1

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

answered Feb 28 '14 at 09:55

YogiChordiya

46
9

score 0 · Answer 4 · edited May 23 '17 at 10:31

0

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

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

edited May 23 '17 at 10:31

Community

1
1

answered Feb 28 '14 at 09:33

exec

52
3

score 0 · Answer 5 · answered Feb 28 '14 at 09:34

0

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

answered Feb 28 '14 at 09:34

124

2,757
26
37

score 0 · Answer 6 · answered Feb 28 '14 at 09:37

0

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

});

answered Feb 28 '14 at 09:37

Uday A. Navapara

1,237
5
20
40

score 0 · Answer 7 · answered Feb 28 '14 at 09:38

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 :-)

How To Run Script After Load Image

7 Answers7