Javascript 如何使用web worker加载图像?
我正在尝试使用webworker api加载图像。我在我的html页面中有大图像,加载所有图像需要5分钟,因此我使用webworker加载图像 这是技巧Javascript 如何使用web worker加载图像?,javascript,html,image,web-worker,Javascript,Html,Image,Web Worker,我正在尝试使用webworker api加载图像。我在我的html页面中有大图像,加载所有图像需要5分钟,因此我使用webworker加载图像 这是技巧 我在html页面中保持所有img标记的src属性为空 所有图像对于每个img都有唯一的id,例如id=events\u All\u 1\u 01意味着图像src将是“pictures/keywords/events/All/1/01.jpg”。i、 e最后一部分事件/all/1/01.jpg为id Main.html文件 <body&g
<body>
<script src="js/modernizr.custom.js"></script>
<script language="javascript">
window.onload = function(){
if (Modernizr.webworkers) {
var worker = new Worker('js/webworker/test_ww_23_04.js');
worker.onmessage = function(event) {
var url = event.data.replace(/_/g, "/");
var image_src = "pictures/keywords/"+url+".jpg";
var img = new Image();
img.src = image_src;
img.onload = function(){
// do stuff when your image is loaded
document.getElementById(event.data).src = image_src;
}
};
worker.onerror = function(e) {
alert('Error: Line ' + e.lineno + ' in ' + e.filename + ': ' + e.message);
};
var img_container = document.getElementById("wrapper");
var image_array = img_container.getElementsByTagName('img');
for(var i=0;i<image_array.length;i++){
var img_id = image_array[i].id;
console.log(img_id); // http://jsfiddle.net/5vyseob7/
postMessage(img_id); // http://jsfiddle.net/k04t6760/ here i am passing id one by one to webworker..
}
} // end of if condition
} // end of window.onload()
</script>
<div id="wrapper" style="height: 500px;width: 200px;overflow-y: auto;border: 1px solid gray;">
<div id="pictures1">
<div class="effect-1">
<div><img src="" id="events_all_1_01" width="150" height="100"></div>
<div><img src="" id="events_all_1_02" width="150" height="100"></div>
<div><img src="" id="events_all_1_03" width="150" height="100"></div>
<div><img src="" id="events_all_1_04" width="150" height="100"></div>
</div>
<hr/>
<div class="effect-2">
<div><img src="" id="events_all_2_01" width="150" height="100"></div>
<div><img src="" id="events_all_2_02" width="150" height="100"></div>
<div><img src="" id="events_all_2_03" width="150" height="100"></div>
<div><img src="" id="events_all_2_04" width="150" height="100"></div>
</div>
<hr/>
<div class="effect-3">
<div><img src="" id="events_all_3_01" width="150" height="100"></div>
<div><img src="" id="events_all_3_02" width="150" height="100"></div>
<div><img src="" id="events_all_3_03" width="150" height="100"></div>
<div><img src="" id="events_all_3_04" width="150" height="100"></div>
</div>
<hr/>
<div class="effect-4">
<div><img src="" id="events_all_4_01" width="150" height="100"></div>
<div><img src="" id="events_all_4_02" width="150" height="100"></div>
<div><img src="" id="events_all_4_03" width="150" height="100"></div>
<div><img src="" id="events_all_4_04" width="150" height="100"></div>
</div>
</div>
</div>
</body>
我遇到以下错误:
未捕获语法错误:未能在“窗口”上执行“postMessage”:调用“postMessage”时目标源“”无效。键入错误:
...
worker.onmessage = function(event) {
var url = e.data.replace(/_/g, "/");
e未定义。。。您可能指的是function(e)
或event.data.replace
更新
窗口没有postMessage方法。。。您需要使用worker方法。postMessage您可能需要编辑您的帖子以使您的问题更清晰。或者我有一些键入错误。但是它给出了不完整的语法错误:无法在“窗口”上执行“postMessage”:调用“postMessage”时目标源无效。更改
postMessage(img_id);//这里我将…
传递给worker.postMessage…
我们不能使用var img=new Image();在webworker内部,所以它没有给我所需的性能…?我想在后台加载图像,因为我不想让用户等到所有图像都加载了…我使用异步方法,使用xmlhttp=new XMLHttpRequest();加载图像也需要时间
...
worker.onmessage = function(event) {
var url = e.data.replace(/_/g, "/");