webworker를 사용하여 Image.prototype 재정의

Question

이미지의 청구 방법을 덮어 쓸 수 있으므로이 로딩이 WebWorker에서 수행됩니까?

예 : I는 한 화면에 많은 이미지를 전달해야하기 때문에 내가 한 번만 나는 향상 시키 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 내 ArrayBuffer의 postMessage(), Blob, 또는 주 스레드 이미지의 data URI 표현을 XMLHttpRequest()를 사용할 수 있습니다. 메인 쓰레드

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