◐ Shell
reader mode source ↗
Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
File filter
Conversations
Jump to
Diff view
Apply and reload
Show whitespace
Diff view
Apply and reload
10 changes: 5 additions & 5 deletions 2-ui/5-loading/03-onload-onerror/1-load-img-callback/solution.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@

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()`.
Original file line number Diff line number Diff line change
Expand Up @@ -7,24 +7,24 @@

<script>
function preloadImages(sources, callback) {
/* your code */
}

// ---------- The test ----------

let sources = [
"https://en.js.cx/images-load/1.jpg",
"https://en.js.cx/images-load/2.jpg",
"https://en.js.cx/images-load/3.jpg"
];

// add random characters to prevent browser caching
for (let i = 0; i < sources.length; i++) {
sources[i] += '?' + Math.random();
}

// for each image,
// let's create another img with the same src and check that we have its width immediately
function testLoaded() {
let widthSum = 0;
for (let i = 0; i < sources.length; i++) {
Expand All @@ -35,7 +35,7 @@
alert(widthSum);
}

// every image is 100x100, the total width should be 300
preloadImages(sources, testLoaded);
</script>

Expand Down
Loading
Toggle all file notes Toggle all file annotations