质量onLoad事件冻结GIF动画

2011-12-06 130 views 0 likes

我试图让琐碎的负荷指标，但在这种情况下，我坚持...质量onLoad事件冻结GIF动画

我们有什么

#submit按钮
时的onClick到#submit，我们获取的getJSON
JSON数据 - 是图像的URL（可能是1-1000 ++的URL）
的。每个SRC我们检查的onLoad

，如果它加载我们.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 +镀铬17（我的应用程序特别为这个浏览器）

来源

2011-12-06 J_z

回答

如果你想给浏览器的一些周期做其他的事情，同时加载了无限的图像，你可以做一个小的量在一系列的通话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对象，并将jQuery对象放入一个闭包中，这样它就不会重新生成每一次创造。

因为我不能在这个编码结构中使用jQuery的.each()，我不得不手动迭代你的数据。我认为这是一组网址。

来源

2011-12-06 02:53:30 jfriend00

质量onLoad事件冻结GIF动画

回答

相关问题