jQuery .load Test

Benchmark created by Terry on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<div id="img_wrap">
  <img src="http://www.windows2universe.org/earth/images/earth_globe_256pix.jpg" />
  <img src="http://www.windows2universe.org/earth/images/earth_globe_256pix.jpg" />
  <img src="http://www.windows2universe.org/earth/images/earth_globe_256pix.jpg" />
  <img src="http://www.windows2universe.org/earth/images/earth_globe_256pix.jpg" />
  <img src="http://www.windows2universe.org/earth/images/earth_globe_256pix.jpg" />
</div>

Setup

$(document).ready(function() {
      var $img_wrap = $(document.getElementById('img_wrap')),
          $img = $img_wrap.find('img'),
          $img_amount = $img.length,
          load_each = 100 / $list_item_amount,
          load_percent = 0;
    });

Test runner

Ready to run.

Testing in WebKit 537.36 / undefined
TestOps/sec
.one('load')
$(document).ready(function() {
  for (var i = 0; i < $img_amount; i++) {
    $($img[i]).one('load', function() {
      load_percent = load_percent + load_each;
    });
  }
});
ready
.on('load')
$(document).ready(function() {
  for (var i = 0; i < $img_amount; i++) {
    $($img[i]).on('load', function() {
      load_percent = load_percent + load_each;
    });
  }
});
ready
.load()
$(document).ready(function() {
  for (var i = 0; i < $img_amount; i++) {
    $($img_item[i]).load(function() {
      load_percent = load_percent + load_each;
    });
  }
});
ready
.onload = function()
$(document).ready(function() {
  for (var i = 0; i < $img_amount; i++) {
    $($img_item[i]).onload = function() {
      load_percent = load_percent + load_each;
    }
  }
});
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.