Is there a good replacement for onloadend in html/javascript?

  canvas, html, javascript

I was wondering if anyone knows a good supplement for GlobalEventHandlers.onloadend. It functions perfectly for my purposes, but is only supported by Firefox so I would like a more universal approach.

Specifically, I have a load event handler like so:

image.addEventListener('load', function(){
   ctxA.canvas.width = image.width;
   ctxA.canvas.height = image.height;
   ctxA.drawImage(image, 0, 0);

   let imageData = ctxA.getImageData(0, 0, image.width, image.height);
   filterData(imageData, image.height, image.width);
});

My filterData function takes a while to execute. It’s not forever, but it’s noticeable. I would like to draw the image to the page first, and then use the data. However, the browser does not seem to draw the image until the load event handler is fully complete.
I confirmed this by purposely making an infinite while loop in the load event handler and the image is never printed.

This makes sense as an image probably shouldn’t be drawn until all load requirements are met. However, I do not know of a good way to display the image and then execute the filterData function other than onloadend. Any help or suggestions are appreciated.

Source: Ask Javascript Questions

LEAVE A COMMENT