36 lines
1.3 KiB
Markdown
36 lines
1.3 KiB
Markdown
importance: 4
|
|
|
|
---
|
|
|
|
# Load images with a callback
|
|
|
|
Normally, images are loaded when they are created. So 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`.
|