Skip to content

Commit 78accf6

Browse files
authored
Update task.md
1 parent 43b92ad commit 78accf6

1 file changed

Lines changed: 10 additions & 10 deletions

File tree

  • 2-ui/5-loading/03-onload-onerror/1-load-img-callback

2-ui/5-loading/03-onload-onerror/1-load-img-callback/task.md

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,22 @@ importance: 4
22

33
---
44

5-
# Load images with a callback
5+
# 用回调函数加载 images
66

7-
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.
7+
通常,图像在被创建时就会被加载,因此当我们在页面中添加 `<img>` 时,用户不会立即看到图像。浏览器首先会加载它。
88

9-
To show an image immediately, we can create it "in advance", like this:
9+
我们可以像这样“提前”创建来立即显示图像:
1010

1111
```js
1212
let img = document.createElement('img');
1313
img.src = 'my.jpg';
1414
```
1515

16-
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.
16+
浏览器开始加载图像然后保存在缓存中。之后,当相同图像出现在文档中时(无论怎样),它会立即显示。
1717

18-
**Create a function `preloadImages(sources, callback)` that loads all images from the array `sources` and, when ready, runs `callback`.**
18+
**创建一个从 `source` 数组中加载所有图像,并在准备就绪时运行 `callback``preloadImages(sources, callback)` 函数。**
1919

20-
For instance, this will show an `alert` after the images are loaded:
20+
例如,这将在加载图像之后显示一个 `alert`
2121

2222
```js
2323
function loaded() {
@@ -27,10 +27,10 @@ function loaded() {
2727
preloadImages(["1.jpg", "2.jpg", "3.jpg"], loaded);
2828
```
2929

30-
In case of an error, the function should still assume the picture "loaded".
30+
如果出现错误,函数仍会认为图像已经“被加载”。
3131

32-
In other words, the `callback` is executed when all images are either loaded or errored out.
32+
换句话说,当所有图像被加载或出现错误输出时,`callback` 就会被执行。
3333

34-
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.
34+
比如,当我们计划显示一个包含许多可滚动图像的图库,并希望确保所有的图像都被加载时,这个函数是非常有用的。
3535

36-
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`.
36+
在源文档中,你可以找到指向测试图像的链接,以及检查它们是否已被加载的代码。它应该输出 `300`

0 commit comments

Comments
 (0)