A verification on whether the image content load will block UI

88 阅读1分钟

Created by Jerry Wang on Jun 21, 2015

source code:

<html>
<div>Button
<button type="button" onclick = "display()">Click Me!</button>
</div>

<img id="jerry_image" src= "http://chuantu.biz/t2/10/1434770977x1822613880.jpg"></img>
<script src="jQuery/jquery1.7.1.js"> 
</script>

<script>
   function display() {
    alert("button clicked!");
   };
   console.time("image");
   $("#jerry_image").load(function() {
     console.timeEnd("image");
     console.log("Jerry image load ok");
   });

 $(document).ready( function() {
   console.log("ok");
});
</script> 
</html>

在image load其content的24多秒钟的时间段内,ui始终保持可操作状态 - button可以点击:

要获取更多Jerry的原创文章,请关注公众号"汪子熙":