53 lines
1.9 KiB
HTML
53 lines
1.9 KiB
HTML
|
<!doctype html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||
|
|
<link rel="stylesheet" href="../lib/3rdparty/highlight/styles/default.css">
|
||
|
|
<link rel="stylesheet" href="../css/doctest.css">
|
||
|
|
|
||
|
|
<script src="../lib/3rdparty/highlight/highlight.pack.js"></script>
|
||
|
|
<script src="../lib/3rdparty/all.js"></script>
|
||
|
|
|
||
|
|
<script src="all.js"></script>
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body onload="Doctest.run()" >
|
||
|
|
<h1>Image Loader Worker</h1>
|
||
|
|
<p>
|
||
|
|
The loading of multiple small images (e.g. loadimng tiles of a zoomable
|
||
|
|
map) is a time consuming task that leads to small but noticeable delays
|
||
|
|
in touch interaction if standard DOM events are used. With a worker we
|
||
|
|
can try to do most of the time consuming processing in the background.
|
||
|
|
</p>
|
||
|
|
<p>Let's look at an example of a image loader worker:</p>
|
||
|
|
<img id="img1" width="160" height="120" class="grayBorder interactive" src=""/>
|
||
|
|
<img id="img2" width="160" height="120" class="grayBorder interactive" src=""/>
|
||
|
|
<img id="img3" width="160" height="120" class="grayBorder interactive" src=""/>
|
||
|
|
<img id="img4" width="160" height="120" class="grayBorder interactive" src=""/>
|
||
|
|
<script class="doctest">
|
||
|
|
|
||
|
|
let urls = [
|
||
|
|
'http://i.imgur.com/JmvCQXd.jpg',
|
||
|
|
'http://i.imgur.com/L4ipvCE.jpg',
|
||
|
|
'http://i.imgur.com/fKDIYIP.jpg',
|
||
|
|
'http://i.imgur.com/4ad4bo5.jpg'
|
||
|
|
]
|
||
|
|
|
||
|
|
let imgs = [img1, img2, img3, img4]
|
||
|
|
let count = 0
|
||
|
|
let worker = new Worker("imageloader.js")
|
||
|
|
worker.onmessage = (event) => {
|
||
|
|
console.log("Loaded", event.data)
|
||
|
|
if (event.data.success) {
|
||
|
|
console.log("Loaded", event.data.url)
|
||
|
|
imgs[count].src = event.data.url
|
||
|
|
count += 1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
worker.postMessage({command: "load", urls: urls})
|
||
|
|
worker.postMessage({command: "abort", urls: urls})
|
||
|
|
worker.postMessage({command: "load", urls: urls})
|
||
|
|
</script>
|
||
|
|
</body>
|