Override Image.prototype by using webworker

Question

it is possible to overwrite the charging method of an image so that this loading is done by a WebWorker?

Example:

Image.prototype.contructor = function(arguments){  // Webworker implementation }

//or

Image.prototype.setSrc = function(arguments){  // Webworker implementation }

var image = new Image('somePath.jpg'); //or 
image.setSrc('somePath.jpg');

I need it because I need to carry many images on a single screen only once using ionic framework, and loading it stands today is fighting the UI Thread and perhaps using a WebWorker I improve performance

Answer 1

You can use XMLHttpRequest() within Worker, postMessage() of ArrayBuffer, Blob, or data URI representation of image to main thread when request is successful.

at main thread

var worker = new Worker("/path/to/worker.js");

worker.addEventListener("message", function(e) {
  // do stuff with `Blob` of image
  console.log(e.data);
  var img = new Image;
  img.onload = function() {
    document.body.appendChild(this)
  }
  img.src = URL.createObjectURL(e.data);
});

worker.postMessage("request" /* or, path to image */);

worker.js

self.addEventListener("message", function(e) {
  if (e.data === "request") {
    var request = new XMLHttpRequest();
    request.open("GET", "/path/to/image" /* or, `e.data` */);
    request.responseType = "blob";
    request.onload = function() {
      self.postMessage(request.response);
    }
    request.send();
  }
});

plnkr http://plnkr.co/edit/smqVzIMSOJR3GNSBBxul?p=preview