Remplacer Image.prototype à l'aide de Webworker

Question

Il est possible d'écraser la méthode de chargement d'une image afin que ce chargement soit effectué par un WebWorker?

Exemple:

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

je en ai besoin parce que je dois réaliser de nombreuses images sur un seul écran une seule fois en utilisant le framework ionique, et le chargement qu'il est aujourd'hui combat l'interface utilisateur de cette discussion et peut-être au moyen d'un WebWorker j'améliorer la performance

Answer 1

Vous pouvez utiliser XMLHttpRequest() dans les Worker, postMessage() de ArrayBuffer, Blob ou data URI représentation de l'image à thread principal lorsque la demande est acceptée.

au fil conducteur

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