image event onload testing

JavaScript performance comparison

Revision 2 of this test case created by Mika Marttila

Info

DOM-0, DOM-2 or framework for image onload?

Test src is a base64 encoded 8bit PNG image.

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 
<script>
Benchmark.prototype.setup = function() {
    var img = new Image();
    var src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAMAAAAoyzS7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iAAAF0Uk5TAEDm2GYAAAAMSURBVHjaYmAACDAAAAIAAU9tWeEAAAAASUVORK5CYII=';
};
</script>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
DOM-0
img.onload = function()
{
      console.log("load");
}
img.onerror = function()
{
      console.log("error");
}
pending…
DOM-2
img.addEventListener("load", function()
{
      console.log("load");
});
img.addEventListener("error", function()
{
      console.log("error");
});
pending…
jQuery load
$(img).load(function()
{
      console.log("load");
}).error(function()
{
      console.log("error");
});
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment