Question

我试图制作琐碎的负载指示器，但在这种情况下我被卡住了......

我们拥有什么

#submit button
当onClick到#submit时，我们获取getJSON
json数据 - 是图像的网址（可能是1-1000 ++网址）
for .each src我们检查onLoad

如果加载我们.hpend html到div #out

<img id="load" src="load.gif" />
<input id="submit" type="submit" value="submit" />
<div id="out"></div>

<script type="text/javascript">

$('#submit').click(function()
{
    $.getJSON('/data.json', function(data) {

        $.each(data, function(idx, img_src) {

            $('<img src="'+img_src+'">').load(function() {
                $('#out').append('<img id="id'+idx+'" src="'+img_src+'">');
            });     

        });

    });

});

在我的例子中，我不显示/隐藏load.gif， nvm现在，它显示了主要问题 - 当脚本工作时动画冻结。

在jQuery 1.7.1 + Chrome 17（我的应用程序专用于此浏览器）上进行了测试

Answer 1

如果您想在浏览器中添加一些周期来执行其他操作，那么您可以对一系列setTimeout()调用进行少量工作，以便在您的块之间进行其他一些操作像这样的工作：

$('#submit').click(function() {
    $.getJSON('/data.json', function(data) {
        var i = 0;
        var out$ = $('#out'); 
        function appendNextImage() {
            // assumes data is an array of image URLs
            $('<img id="id'+i+'" src="'+data[i]+'">').load(function() {
                out$.append(this);
            });
            i++;
            if (i < data.length) {
                setTimeout(appendNextImage, 1);
            }
        }
        appendNextImage();
    });
});

我还改变了你的图像创建，所以你附加了你已经创建的DOM对象，而不是制作第二个重复的DOM对象，并将$('#out') jQuery对象放在一个闭包中，这样就不会出现这种情况。每次都要重新创造。

由于我无法在此编码结构中使用jQuery的.each()，因此我必须手动迭代您的数据。我认为它是一组URL。

Mass onLoad事件冻结了gif动画

1 个答案: