ggarnier
Modern Asynchronous JavaScript: displaying images as they're loaded (page 50)
In Aborting Multiple Fetch Requests with One Signal section, the code in abort/abort_ex09.js doesn’t show the downloaded images until Promise.all fulfills, which means you need to wait for all the image downloads before seeing them. Also, if you cancel after some downloads have finished, you won’t see those images.
I suggest a small change to make it display the images as the corresponding promise fulfills:
33c33,38
< const tasks = urls.map(url => fetch(url, {signal: controller.signal}));
---
> const tasks = urls.map(url => fetch(url, {signal: controller.signal}).then(async (r) => {
> const img = document.createElement('img');
> const blob = await r.blob();
> img.src = URL.createObjectURL(blob);
> gallery.appendChild(img);
> }));
36,43c41,43
< const response = await Promise.all(tasks);
< response.forEach(async (r) => {
< const img = document.createElement('img');
< const blob = await r.blob();
< img.src = URL.createObjectURL(blob);
< gallery.appendChild(img);
< });
< result.textContent = '';
---
> Promise.all(tasks).then(() => {
> result.textContent = '';
> });
Marked As Solved
Faraz
Author of Modern Asynchronous JavaScript
Oh, my bad!
Thanks for clarifying that. We’re updating the code in the next version of the book.
Popular Community topics
So I have enough money to last a year. Realistically I’m still going to have to work part time painting. I’m so done with it though!
I h...
New
Crystal recently reached version 1. I had been following it for awhile but never got to really learn it. Most languages I picked up out o...
New
Concurrent Data Processing in Elixir is now content complete and I finally found the time I’ve been looking for to dedicate behind readin...
New
I am going to dump my thoughts, methods, codes, experiences and rants while learning OCaml into this thread.
This is probably the 5th or...
New
My overall initial first impressions of this book are very good.
I will document my local spacemacs setup to as I work through the book.
New
I have read first chapter. Will add my notes / code tries / self exploration as I go along!
Thank you @AstonJ for encouraging to start ...
New
In Aborting Multiple Fetch Requests with One Signal section, the code in abort/abort_ex09.js doesn’t show the downloaded images until Pro...
New
Hello all.
Creating this space here for general discussion and chat about Powerful Command-Line Applications In Go
In particular, we ca...
New
With Tailwind now the default CSS framework shipped with Phoenix we thought it would be nice to run this book club on the Elixir Forum.
...
New
When the pandemic, heart disease, and personal tragedy threatened to steal everything the Tates spent years building, they found hope, he...
New
Other popular topics
Reading something? Working on something? Planning something? Changing jobs even!?
If you’re up for sharing, please let us know what you’...
New
Algorithms and data structures are much more than abstract concepts. Mastering them enables you to write code that runs faster and more e...
New
I am thinking in building or buy a desktop computer for programing, both professionally and on my free time, and my choice of OS is Linux...
New
I know that -t flag is used along with -i flag for getting an interactive shell. But I cannot digest what the man page for docker run com...
New
My first contact with Erlang was about 2 years ago when I used RabbitMQ, which is written in Erlang, for my job. This made me curious and...
New
poll
poll
Be sure to check out @Dusty’s article posted here: An Introduction to Alternative Keyboard Layouts It’s one of the best write-...
New
New
Will Swifties’ war on AI fakes spark a deepfake porn reckoning?
New
Hello,
I’m a beginner in Android development and I’m facing an issue with my project setup. In my build.gradle.kts file, I have the foll...
New
Hair Salon Games for Girls Fun
Girls Hair Saloon game is mainly developed for kids. This game allows users to select virtual avatars to ...
New
Categories:
Sub Categories:
Popular Portals
- /elixir
- /rust
- /wasm
- /ruby
- /erlang
- /phoenix
- /keyboards
- /python
- /js
- /rails
- /security
- /go
- /swift
- /vim
- /clojure
- /java
- /emacs
- /haskell
- /svelte
- /onivim
- /typescript
- /kotlin
- /c-plus-plus
- /crystal
- /tailwind
- /react
- /gleam
- /ocaml
- /flutter
- /elm
- /vscode
- /ash
- /html
- /opensuse
- /zig
- /deepseek
- /centos
- /php
- /scala
- /react-native
- /lisp
- /sublime-text
- /textmate
- /nixos
- /debian
- /agda
- /django
- /deno
- /kubuntu
- /arch-linux
- /nodejs
- /revery
- /ubuntu
- /manjaro
- /spring
- /julia
- /lua
- /diversity
- /markdown
- /v









