Mass onLoad事件会冻结gif动画

Question

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

我们拥有的

1. #submit按钮
2. [从onClick到#submit时，我们获取getJSON
3. JSON数据-是图片的网址（可能是1-1000 ++的网址）
4. 对于.each src，我们检查onLoad

5. 并且如果加载了它，我们.append 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数组。