使用 webworker 覆盖 Image.prototype
Override Image.prototype by using webworker
是否可以覆盖图像的充电方法,以便由 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');
我需要它,因为我只需要使用 ionic 框架在一个屏幕上显示许多图像,而今天加载它正在与 UI 线程作斗争,也许使用 WebWorker 我可以提高性能
您可以在 Worker
内使用 XMLHttpRequest()
,ArrayBuffer
、Blob
或 data URI
中的 postMessage()
表示图像到主线程当请求成功时。
在主线程
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();
}
});
是否可以覆盖图像的充电方法,以便由 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');
我需要它,因为我只需要使用 ionic 框架在一个屏幕上显示许多图像,而今天加载它正在与 UI 线程作斗争,也许使用 WebWorker 我可以提高性能
您可以在 Worker
内使用 XMLHttpRequest()
,ArrayBuffer
、Blob
或 data URI
中的 postMessage()
表示图像到主线程当请求成功时。
在主线程
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();
}
});