ok

2-ui/3-event-details/11-onload-onerror/1-load-img-callback/task.md

@@ -0,0 +1,36 @@
+importance: 4
+
+---
+
+# Load images with a callback
+
+Normally, images are loaded when they are created. So i when we add `<img>` to the page, the user does not see the picture immediately. The browser needs to load it first.
+
+To show an image immediately, we can create it "in advance", like this:
+
+```js
+let img = document.createElement('img');
+img.src = 'my.jpg';
+```
+
+The browser starts loading the image and remembers it in the cache. Later, when the same image appears in the document (no matter how), it shows up immediately.
+
+**Create a function `preloadImages(sources, callback)` that loads all images from the array `sources` and, when ready, runs `callback`.**
+
+For instance, this will show an `alert` after the images are loaded:
+
+```js
+function loaded() {
+  alert("Images loaded")
+}
+
+preloadImages(["1.jpg", "2.jpg", "3.jpg"], loaded);
+```
+
+In case of an error, the function should still assume the picture "loaded".
+
+In other words, the `callback` is executed when all images are either loaded or errored out.
+
+The function is useful, for instance, when we plan to show a gallery with many scrollable images, and want to be sure that all images are loaded.
+
+In the source document you can find links to test images, and also the code to check whether they are loaded or not. It should output `300`.