如何在Jquery中延迟for循环

问题描述

我正在尝试制作一个图像库，并且正在使用for循环加载所有图像.但是现在我有一个问题，那就是它运行得很快，所以我想每次都延迟循环.

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.

我尝试设置超时时间，但这不起作用
有人知道如何延迟与Jquery的循环.

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

js代码:

 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);
    }

 }

还有另一个问题.是否可以使用Jquery将所有图像加载到文件夹中?

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

推荐答案

您也可以尝试以下操作:

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);
}

将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);
}

这篇关于如何在Jquery中延迟for循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！