<!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>