Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit e7a48b6

Browse files
linjiaoyanlinjiaoyan
committedSep 27, 2019
feat: 实现一个简单的图片预加载；
1 parent 1f411b5 commit e7a48b6

File tree

14 files changed

+200
-28
lines changed

14 files changed

+200
-28
lines changed
 

‎dist/index.js

Lines changed: 39 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/index.js.map

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/index.min.js

Lines changed: 39 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/index.min.js.map

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎es/index.js

Lines changed: 31 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎es/index.js.map

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/index.html

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,39 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<meta http-equiv="X-UA-Compatible" content="ie=edge">
77
<title>example</title>
8+
<style>
9+
.img-wrap {
10+
display: none;
11+
}
12+
.img {
13+
width: 100px;
14+
}
15+
</style>
816
</head>
917
<body>
10-
18+
<div class="loading">loading</div>
19+
<div class="img-wrap">
20+
<img class="img img-1" src="" alt="">
21+
<img class="img img-2" src="" alt="">
22+
<img class="img img-3" src="" alt="">
23+
<img class="img img-4" src="" alt="">
24+
</div>
1125
</body>
1226
<script src="./index.js"></script>
27+
<script>
28+
const images = [
29+
'./static/images/1.jpg',
30+
'./static/images/2.jpg',
31+
'./static/images/3.jpg',
32+
'./static/images/4.jpg',
33+
];
34+
window.npmLibraryDemo(images, function() {
35+
console.log('---------图片预加载完毕');
36+
document.querySelector('.loading').style.display = 'none';
37+
document.querySelector('.img-wrap').style.display = 'block';
38+
for (var i = 0; i < images.length; i++) {
39+
document.querySelector('.img-' + (i + 1)).setAttribute('src', images[i]);
40+
}
41+
});
42+
</script>
1343
</html>

‎example/static/images/1.jpg

24.7 KB
Loading

‎example/static/images/2.jpg

51.4 KB
Loading

‎example/static/images/3.jpg

30.1 KB
Loading

‎example/static/images/4.jpg

27.1 KB
Loading

‎lib/index.js

Lines changed: 33 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/index.js.map

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/main.js

Lines changed: 23 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,25 @@
1-
import demo from './demo.js';
2-
import { version } from '../package.json';
3-
import answer from 'the-answer';
4-
import _merge from 'lodash/merge';
5-
6-
console.log('version:' + version);
7-
8-
let users = {
9-
'data': [{ 'user': 'barney' }, { 'user': 'fred' }]
10-
};
11-
let ages = {
12-
'data': [{ 'age': 36 }, { 'age': 40 }]
13-
};
14-
const a = _merge(users, ages);
15-
console.log('-------lodash:', a);
16-
17-
18-
async function initDemo() {
19-
console.log('the answer is ' + answer);
20-
const obj = {}
21-
const newObj = Object.assign(obj, { age: 30 });
22-
let data = await demo();
23-
console.log('initDemo:', data, newObj);
24-
return data;
1+
const preload = (images, cb) => {
2+
const len = images.length;
3+
const imgArr = [];
4+
let count = 0;
5+
if (len) {
6+
images.forEach((url, i) => {
7+
const img = new Image();
8+
img.src = url;
9+
img.onload = () => imgLoad(i);
10+
img.onerror = imgLoad;
11+
imgArr.push(img);
12+
});
13+
function imgLoad(i) {
14+
console.log(`---------img-${i} load`);
15+
count++;
16+
if (count === len) {
17+
cb();
18+
}
19+
}
20+
} else {
21+
cb();
22+
}
2523
}
2624

27-
initDemo();
28-
29-
export default initDemo;
25+
export default preload;

0 commit comments

Comments
 (0)
Please sign in to comment.