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

我需要它，因爲我需要在一個屏幕上進行大量圖像只有一次使用離子框架，並加載它代表今天戰鬥在UI線程，也許使用WebWorker我提高性能

Answer 1

可以內Worker使用XMLHttpRequest()的ArrayBufferpostMessage()，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