<!doctype html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<link rel="stylesheet" href="./3rdparty/highlight/styles/default.css">
	<link rel="stylesheet" href="../css/doctest.css">

	<script src="./3rdparty/highlight/highlight.pack.js"></script>
    <script src="./3rdparty/all.js"></script>

	<script src="../dist/iwmlib.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>