IWMBrowser/iwmlib
4
0
Fork 0
Code Issues 6 Pull Requests Releases Wiki Activity

Added minimal navigation breadcrumbs to doctests.

Browse Source
This commit is contained in:
Uwe Oestermeier
2023-05-09 13:25:39 +02:00
parent 13e0473328
commit 9501264f08
71 changed files with 5700 additions and 5332 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/imageloader.html
+45 -47
View File
@@ -1,52 +1,50 @@
<!doctype html>
<!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">
<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="./3rdparty/highlight/highlight.pack.js"></script>
<script src="./3rdparty/all.js"></script>
<script src="../dist/iwmlib.js"></script>
<script src="../dist/iwmlib.js"></script>
</head>
<body onload="Doctest.run()">
<h1><a href="index.html">lib.</a>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'
]
</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 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
}
}
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>
worker.postMessage({ command: 'load', urls: urls })
worker.postMessage({ command: 'abort', urls: urls })
worker.postMessage({ command: 'load', urls: urls })
</script>
</body>
</html>