Question

可以覆盖图像的计费方法，以便由WebWorker完成此加载吗？

示例：

elem.style.display = "none"

我需要它，因为我需要使用离子框架在一个屏幕上只携带许多图像，今天加载它就是在与UI线程对抗并且可能使用WebWorker我提高了性能

Answer 1

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

在主线程

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

使用webworker覆盖Image.prototype

1 个答案: