jQuery .load Test (v10)

Revision 10 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, as they say.

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">
  0%
</p>

Setup

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,
        Add_Load, jQuery_Round;
    
    if (p_status.addEventListener) {
      Add_Load = function(i) {
        var Math_Round = function() {
          load_percent += load_each;
          p_status.textContent = Math.round(load_percent) + "%";
          i.removeEventListener('load', Math_Round, false);
        };
        i.addEventListener('load', Math_Round, false);
      };
      jQuery_Round = function() {
        load_percent += load_each;
        p_status.textContent = Math.round(load_percent) + "%";
      };
    } else {
      Add_Load = function(i) {
        var Math_Round = function() {
          load_percent += load_each;
          p_status.innerText = Math.round(load_percent) + "%";
          i.detachEvent('onload', Math_Round);
        };
        i.attachEvent('onload', Math_Round(i));
      };
      jQuery_Round = function() {
        load_percent += load_each;
        p_status.innerText = Math.round(load_percent) + "%";
      };
    }

Test runner

Ready to run.

Testing in
TestOps/sec
addEventListener or attachEvent THEN remove event
var load_percent = 0;

for (var i = 0; i < img_amount; i++) {
  var cur_img = img[i];
  Add_Load(cur_img);
}
ready
jQuery - .one('load')
var load_percent = 0;

for (var i = 0; i < img_amount; i++) {
  var cur_img = $(img[i]);
  cur_img.one('load', jQuery_Round);
}
ready

Revisions

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