Menu
I am trying to load images using webworker api. I have large images in my html page its takes 5 mins to load all images therefore i am using webworker to load images.
here is technique..
I am keeping src attribute of all img tag empty in html page.
All images have unique id for each img e.g id = events_all_1_01 meaning image src will be "pictures/keywords/events/all/1/01.jpg". i.e last part events/all/1/01.jpg is id.
Main.html file
<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>
webworker code.
//var src = 'pictures/keywords/events/all/1/01.jpg';
//var id = src.substring(src.substring(0,18).length).split('.')[0].replace(/\//g, "_"); // Creating id here......events_all_1_01
//var fst = id.substring(0, id.lastIndexOf("_")+1); // get first part.... events_all_1
//var lst = parseInt(id.substr(id.lastIndexOf("_")+1)); // get last part i.e imagename ..01,02,03 etc....... and convert it to int
function LoadImages(currID) {
setTimeout(function() {
postMessage(currID);
}, 100);
}
self.onmessage = function(event) {
var currID = event.data;
LoadImages(currID);
};
I am getting following error :
Uncaught SyntaxError: Failed to execute 'postMessage' on 'Window': Invalid target origin '' in a call to 'postMessage'.
361
Typo error:
...
worker.onmessage = function(event) {
var url = e.data.replace(/_/g, "/");
e is not defined ... you probably meant function(e) or event.data.replace
UPDATE
Window don't have the postMessage method ... you need to use the worker method worker.postMessage
84
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
