돌아가기
이 글은 다음 언어로만 작성되어 있습니다. English, Español, Français, Italiano, 日本語, Русский, Українська, 简体中文. 한국어 번역에 참여해주세요.

Load images with a callback

중요도: 4

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:

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:

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.

샌드박스를 열어 정답을 작성해보세요.

The algorithm:

  1. Make img for every source.
  2. Add onload/onerror for every image.
  3. Increase the counter when either onload or onerror triggers.
  4. When the counter value equals to the sources count – we’re done: callback().

샌드박스를 열어 정답을 확인해보세요.