Próbuję załadować obrazy za pomocą api webworker. Mam duże obrazy na mojej stronie html, co zajmuje 5 minut, aby załadować wszystkie obrazy, dlatego używam webworkera do ładowania obrazów.Jak ładować obrazy za pomocą operatora sieci?
tu jest technika ..
jestem utrzymując atrybutu src znacznika img wszystkich pustych w stronę html.
Wszystkie obrazy mają unikatowy identyfikator dla każdego img np id = events_all_1_01 czyli obraz src będzie "obrazki/słowa kluczowe/wydarzenia/all/1/01.jpg". tj. ostatnia część events/all/1/01.jpg to id.
plik Main.html
<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>
kod WebWorker.
//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);
};
otrzymuję następujący błąd:
Uncaught SyntaxError: Nie udało się wykonać 'postMessage' na 'Okno': Nieprawidłowa pochodzenia target '' w wywołaniu 'postMessage'.
Być może będziesz musiał edytować swój wpis, aby twoje pytanie stało się bardziej przejrzyste. – user3334690