feat: 实现一个简单的图片预加载；

jiaoyanlin · Sep 27, 2019 · e7a48b6 · e7a48b6
1 parent 1f411b5
commit e7a48b6
Show file tree

Hide file tree

Showing 14 changed files with 200 additions and 28 deletions.
diff --git a/dist/index.js b/dist/index.js
diff --git a/dist/index.js.map b/dist/index.js.map
diff --git a/dist/index.min.js b/dist/index.min.js
diff --git a/dist/index.min.js.map b/dist/index.min.js.map
diff --git a/es/index.js b/es/index.js
diff --git a/es/index.js.map b/es/index.js.map
diff --git a/example/index.html b/example/index.html
@@ -5,9 +5,39 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>example</title>
+    <style>
+        .img-wrap {
+            display: none;
+        }
+        .img {
+            width: 100px;
+        }
+    </style>
 </head>
 <body>
-
+    <div class="loading">loading</div>
+    <div class="img-wrap">
+        <img class="img img-1" src="" alt="">
+        <img class="img img-2" src="" alt="">
+        <img class="img img-3" src="" alt="">
+        <img class="img img-4" src="" alt="">
+    </div>
 </body>
 <script src="./index.js"></script>
+<script>
+    const images = [
+        './static/images/1.jpg',
+        './static/images/2.jpg',
+        './static/images/3.jpg',
+        './static/images/4.jpg',
+    ];
+    window.npmLibraryDemo(images, function() {
+        console.log('---------图片预加载完毕');
+        document.querySelector('.loading').style.display = 'none';
+        document.querySelector('.img-wrap').style.display = 'block';
+        for (var i = 0; i < images.length; i++) {
+            document.querySelector('.img-' + (i + 1)).setAttribute('src', images[i]);
+        }
+    });
+</script>
 </html>
diff --git a/example/static/images/1.jpg b/example/static/images/1.jpg
diff --git a/example/static/images/2.jpg b/example/static/images/2.jpg
diff --git a/example/static/images/3.jpg b/example/static/images/3.jpg
diff --git a/example/static/images/4.jpg b/example/static/images/4.jpg
diff --git a/lib/index.js b/lib/index.js
diff --git a/lib/index.js.map b/lib/index.js.map
diff --git a/src/main.js b/src/main.js
@@ -1,29 +1,25 @@
-import demo from './demo.js';
-import { version } from '../package.json';
-import answer from 'the-answer';
-import _merge from 'lodash/merge';
-
-console.log('version:' + version);
-
-let users = {
-	'data': [{ 'user': 'barney' }, { 'user': 'fred' }]
-};
-let ages = {
-	'data': [{ 'age': 36 }, { 'age': 40 }]
-};
-const a = _merge(users, ages);
-console.log('-------lodash:', a);
-
-
-async function initDemo() {
-	console.log('the answer is ' + answer);
-	const obj = {}
-	const newObj = Object.assign(obj, { age: 30 });
-	let data = await demo();
-	console.log('initDemo:', data, newObj);
-	return data;
+const preload = (images, cb) => {
+	const len = images.length;
+	const imgArr = [];
+	let count = 0;
+	if (len) {
+		images.forEach((url, i) => {
+			const img = new Image();
+			img.src = url;
+			img.onload = () => imgLoad(i);
+			img.onerror = imgLoad;
+			imgArr.push(img);
+		});
+		function imgLoad(i) {
+			console.log(`---------img-${i} load`);
+			count++;
+			if (count === len) {
+				cb();
+			}
+		}
+	} else {
+		cb();
+	}
 }
 
-initDemo();
-
-export default initDemo;
+export default preload;