1

I am trying to make a image gallery and i am using a for loop to load all the images. but now I have the problem that it is going fast so I want to delay the the loop each time.

I tried to set a timeout but that does not work
does somebody know how to delay the loop with Jquery.

js code:

 function test(){
 var src = 'img/nature/';
 var img = ['1.jpg'];
 var image = [ "1.jpg", "2.jpg", "3.jpg",'4.jpg','5.jpg','6.jpg','7.jpg' ];
    for ( var i = 0; i < image.length; i = i + 1 ) {
    $('#frame').append('<img class="tile hide" src="'+src + image[ i ]+ '">');
    $('.hide').show(500);
        setTimeout(function(){

        },500);
    }

 }

And I have a other question. Is it possible to load all the imags in a folder using Jquery?

Vinc199789
  • 1,046
  • 1
  • 10
  • 31
  • 3
    about the second question: No, js can't access OS and client folders or system – Amr Elgarhy Nov 04 '14 at 20:17
  • Use `setInterval` which is more accurate anyways. And, instead of loop, use jquery `each`. – Solomon Closson Nov 04 '14 at 20:18
  • but if you load an image from a folder you actually load an image from the client folder system. – Vinc199789 Nov 04 '14 at 20:19
  • @Vinc199789 That only works if you have the path to the image. If you have a folder with images of unknown names, JavaScript alone cannot search the folder for its images and load them. You would have to provide the paths manually or by querying some server-side code. – apparatix Nov 04 '14 at 20:20
  • 1
    What is the `setTimeout` supposed to do? – Solomon Closson Nov 04 '14 at 20:22
  • 3
    `setTimeout` doesn't pause the current execution flow. It only sets up a new execution flow to run when the JS engine is free again. If you want a delayed continuation, the continuation must go *in* the `setTimeout` callback. – Keen Nov 04 '14 at 20:23
  • @SolomonClosson I tried to delay the loop by using an empty timeout function but that doesn't work. – Vinc199789 Nov 04 '14 at 20:23
  • No, see Cory comment. That is impossible within a for loop, you have to do it outside of the for loop. – Solomon Closson Nov 04 '14 at 20:24
  • @Vinc199789 You can get inspired from this article http://patrickmuff.ch/blog/2014/03/12/for-loop-with-delay-in-javascript/ and there are some examples on stackoverflow.com for js loop delays. – Amr Elgarhy Nov 04 '14 at 20:30

4 Answers4

4

instead of using a for loop you may use a recursive function

 var src = 'img/nature/';
 var img = ['1.jpg'];
 var image = [ "1.jpg", "2.jpg", "3.jpg",'4.jpg','5.jpg','6.jpg','7.jpg' ];
 var i = 0;
 var showGallery = function(){
    $('#frame').append('<img class="tile hide" src="'+src + image[ i ]+ '">');
    $('.hide').show(500);
    i++;
    if (i<image.length){
        setTimeout(showGallery,500);
    }
 };

 if (image.length > 0){
    showGallery();
 }
Sampath Liyanage
  • 4,776
  • 2
  • 28
  • 40
  • My intuition tells me that this will allocate an infinite number of stack frames that will never be garbage collected... – Ziggy Nov 04 '14 at 20:28
  • The recursive function doesn't return a value. So I don't think this needs a stack. I think the js scheduler can schedule these function calls in the same way it schedules other events.. – Sampath Liyanage Nov 04 '14 at 20:34
  • 2
    I'm wrong! Also, this isn't actually recursion: setTimeout schedules an event, so the showGallery function actually runs to completion every time it is called. If you put a console log statement after that if block, you will see: http://jsfiddle.net/0a6ssfpL/ in a recursive function the log statements would all happen at the end. In this code the log statements come one at a time, following the interval. – Ziggy Nov 04 '14 at 20:46
  • Thanks for the explanation. I'll never call it a recursion.. :) – Sampath Liyanage Nov 04 '14 at 23:03
1

You can also try this:

function test() {
    var src = 'img/nature/';
    var img = ['1.jpg'];
    var image = [ '1.jpg', '2.jpg', '3.jpg','4.jpg','5.jpg','6.jpg','7.jpg' ];

    setInterval(function() {
         $.each(image, function(index, value) {
            $('#frame').append('<img class="tile hide" src="'+src + value + '">');
            $('.hide').show(500);
         });
    }, 500);
}

Change 500 at end to whatever...

But I suspect this is not what you want to do... The approach below might be what you want:

function test() {
    var src = 'img/nature/',
        img = ['1.jpg'],
        image = [ '1.jpg', '2.jpg', '3.jpg','4.jpg','5.jpg','6.jpg','7.jpg' ],
        maxIndex = (image.length - 1),
        cIndex = 0;

    setInterval(function() {
        if (cIndex == maxIndex)
            cIndex = 0;
        $('#frame').append('<img class="tile hide" src="'+src + image[cIndex] + '">');
        $('.hide').show(500);
        cIndex++;
    }, 500);
}
Solomon Closson
  • 6,111
  • 14
  • 73
  • 115
1

Your slideshow is for only 500 milliseconds. Increase that value at

setTimeout(function(){ },500); to have delay in slideshow.

& call the function test inside the loop...so that the slideshow continues.

sample:

function slideit(){

if (!document.images)
return 0
document.images.slide.src=eval("image"+step+".src")
if (step<3)
step++
else
step=1

setTimeout("slideit()",3000)

}

rc reddy
  • 306
  • 1
  • 2
  • 8
  • 1
    Actually, you are missing the point. This question is about asyncronous callbacks. In the example code given by the OP, the for loop will run to the end immediately. Then, 500 millisecond later, all the setTimeout callbacks will run at the same time. No matter what number you use, this will always happen. Check out this fiddle: http://jsfiddle.net/xL8rjpyx/ look at the output in the console. Do you understand why this is happening? – Ziggy Nov 04 '14 at 20:34
  • It worked for me.... function slideit(){ if (!document.images) return document.images.slide.src=eval("image"+step+".src") if (step<3) step++ else step=1 setTimeout("slideit()",3000) } – rc reddy Nov 04 '14 at 20:38
0

Another solution is to use a temporary scope with increasing time values for the timeout events..

function test(){
    var src = 'img/nature/';
    var img = ['1.jpg'];
    var image = [ "1.jpg", "2.jpg", "3.jpg",'4.jpg','5.jpg','6.jpg','7.jpg' ];
    for ( var i = 0; i < image.length; i++ ) {
        (function(i){
            setTimeout(function(){
                $('#frame').append('<img class="tile hide" src="'+src + image[ i ]+ '">');
                $('.hide').show(500);
            }, 500*i);
         })(i);
    }
}
Sampath Liyanage
  • 4,776
  • 2
  • 28
  • 40