使用 webworker 覆盖 Image.prototype

Question

是否可以覆盖图像的充电方法，以便由 WebWorker 完成此加载？

示例：

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');

我需要它，因为我只需要使用 ionic 框架在一个屏幕上显示许多图像，而今天加载它正在与 UI 线程作斗争，也许使用 WebWorker 我可以提高性能

Answer 1

您可以在 Worker 内使用 XMLHttpRequest()，ArrayBuffer、Blob 或 data URI 中的 postMessage() 表示图像到主线程当请求成功时。

在主线程

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();
  }
});

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

使用 webworker 覆盖 Image.prototype

Override Image.prototype by using webworker

javascript

ionic-framework

ui-thread