jQuery .load Test (v6)

Revision 6 of this benchmark created on

Description

Testing jQuery .one (add event listener + callback, remove after triggered) vs. my best attempts at doing the same thing with vanilla JavaScript.

Hey, I'm a graphic design student with no 'real' coding education. So, take these tests with a grain of salt.

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,
          test = document.addEventListener,
          vfunc, load_add;
    
      var $func = function(i) {
          load_percent = load_percent + load_each;
          p_status.innerHTML = load_percent + "%";
          };
    
      if (test) {
        vfunc = function(i) {
          return function() {
            load_percent = load_percent + load_each;
            p_status.innerHTML = load_percent + "%";
            i.removeEventListener('load', vfunc, true);
          };
        };
        load_add = function(i) {
          i.addEventListener('load', vfunc(i), true);
        };
      } else {
        vfunc = function(i) {
          return function() {
            load_percent = load_percent + load_each;
            p_status.innerHTML = load_percent + "%";
            i.detachEvent('onload', vfunc(img_cur));
          };
        };
        load_add = function(i) {
          i.attachEvent('onload', vfunc(i));
        };
      }
    });

Test runner

Ready to run.

Testing in
TestOps/sec
Js EventListener
$(document).ready(function() {
  for (var i = 0; i < img_amount; i++) {
    load_add(img[i]);
  }
});
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.