Webworkerを使用してImage.prototypeをオーバーライドする

Question

イメージの課金方法を上書きして、このローディングをWebWorkerで行うことはできますか？

例：私は、単一の画面上に多くの画像を携帯する必要があるので、私は一度だけ、私は改善WebWorkerを使用して、おそらくイオン性フレームワークを使用して、それが今日はUIスレッドを戦っているスタンドロードし、それを必要とする

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

パフォーマンス

Answer 1

要求が成功したときは、メインスレッドにWorker内XMLHttpRequest()、ArrayBufferのpostMessage()、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