jQuery .load Test (v3)

Revision 3 of this benchmark created 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>
<p id="p_status">
</p>

Setup

$(document).ready(function() {
      var p_status = document.getElementById('p_status'),
          img_wrap = document.getElementById('img_wrap'),
          img = img_wrap.getElementsByTagName('img'),
          img_amount = img.length,
          load_each = 100 / img_amount,
          load_percent = 0;
    
      var vfunc = function(i) {
          return function() {
            load_percent = load_percent + load_each;
            p_status.innerHTML = load_percent + "%";
            i.removeEventListener('load', vfunc, true);
          };
          };
    
      var $func = function(i) {
          load_percent = load_percent + load_each;
          p_status.innerHTML = load_percent + "%";
          };
    
    });

Test runner

Ready to run.

Testing in
TestOps/sec
Js EventListener
$(document).ready(function() {
  for (var i = 0, load_percent = 0; i < img_amount; i++) {
    var img_cur = img[i];
    img_cur.addEventListener('load', vfunc(img_cur), true);
  }
});
ready
.one('load')
$(document).ready(function() {
  for (var i = 0; i < img_amount; i++) {
    var img_cur = $(img[i]);
    img_cur.one('load', $func);
  }
});
ready

Revisions

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