add lazyload

实现懒加载效果
wkstudy · Mar 23, 2019 · 8169b8d · 8169b8d
1 parent 42b5571
commit 8169b8d
Show file tree

Hide file tree

Showing 34 changed files with 140 additions and 0 deletions.
diff --git a/lazyload/README.md b/lazyload/README.md
@@ -0,0 +1,15 @@
+## demo
+[view](https://wkstudy.github.io/smallplugs/lazyload/index.html)
+
+## time
+19.03.23
+
+##  参考
+
+* 关于懒加载的实践部分主要参考[原生js实现图片懒加载（lazyLoad） - 天之蓝源的文章 - 知乎](https://zhuanlan.zhihu.com/p/55311726)
+* 关于节流部分的使用主要参考的是[JS简单实现防抖和节流](https://blog.csdn.net/sml115/article/details/81280101)
+
+## 说明
+
+* 本次懒加载实现主要使用getBoundingClientRect() 这个api
+* throttle 函数两个都可以用
diff --git a/lazyload/index.html b/lazyload/index.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>lazyload</title>
+  <style>
+    ul {
+      padding: 0 10% 0 10%;
+      list-style-type: none;
+      font-size: 0;
+    }
+    li {
+      vertical-align: middle;
+      display: inline-block;
+      width: 25%;
+      height: 700px;
+      box-sizing: border-box;
+    }
+    li img {
+      width: 100%;
+      height: 100%;
+    }
+  </style>
+</head>
+<body>
+  <ul>
+    <li><img src="./pic/default.jpg" alt="picture-lazy" data-src="./pic/1.jpg"></li>
+    <li><img src="./pic/default.jpg" alt="picture-lazy" data-src="./pic/2.jpg"></li>
+    <li><img src="./pic/default.jpg" alt="picture-lazy" data-src="./pic/3.jpg"></li>
+    <li><img src="./pic/default.jpg" alt="picture-lazy" data-src="./pic/4.jpg"></li>
+    <li><img src="./pic/default.jpg" alt="picture-lazy" data-src="./pic/5.jpg"></li>
+    <li><img src="./pic/default.jpg" alt="picture-lazy" data-src="./pic/6.jpg"></li>
+    <li><img src="./pic/default.jpg" alt="picture-lazy" data-src="./pic/7.jpg"></li>
+    <li><img src="./pic/default.jpg" alt="picture-lazy" data-src="./pic/8.jpg"></li>
+    <li><img src="./pic/default.jpg" alt="picture-lazy" data-src="./pic/9.jpg"></li>
+    <li><img src="./pic/default.jpg" alt="picture-lazy" data-src="./pic/10.jpg"></li>
+    <li><img src="./pic/default.jpg" alt="picture-lazy" data-src="./pic/11.jpg"></li>
+    <li><img src="./pic/default.jpg" alt="picture-lazy" data-src="./pic/12.jpg"></li>
+    <li><img src="./pic/default.jpg" alt="picture-lazy" data-src="./pic/13.jpg"></li>
+    <li><img src="./pic/default.jpg" alt="picture-lazy" data-src="./pic/14.jpg"></li>
+    <li><img src="./pic/default.jpg" alt="picture-lazy" data-src="./pic/15.jpg"></li>
+    <li><img src="./pic/default.jpg" alt="picture-lazy" data-src="./pic/16.jpg"></li>
+    <li><img src="./pic/default.jpg" alt="picture-lazy" data-src="./pic/17.jpg"></li>
+    <li><img src="./pic/default.jpg" alt="picture-lazy" data-src="./pic/18.jpg"></li>
+    <li><img src="./pic/default.jpg" alt="picture-lazy" data-src="./pic/19.jpg"></li>
+    <li><img src="./pic/default.jpg" alt="picture-lazy" data-src="./pic/20.jpg"></li>
+    <li><img src="./pic/default.jpg" alt="picture-lazy" data-src="./pic/21.jpg"></li>
+    <li><img src="./pic/default.jpg" alt="picture-lazy" data-src="./pic/22.jpg"></li>
+    <li><img src="./pic/default.jpg" alt="picture-lazy" data-src="./pic/23.jpg"></li>
+    <li><img src="./pic/default.jpg" alt="picture-lazy" data-src="./pic/24.jpg"></li>
+    <li><img src="./pic/default.jpg" alt="picture-lazy" data-src="./pic/25.jpg"></li>
+    <li><img src="./pic/default.jpg" alt="picture-lazy" data-src="./pic/26.jpg"></li>
+    <li><img src="./pic/default.jpg" alt="picture-lazy" data-src="./pic/27.jpg"></li>
+    <li><img src="./pic/default.jpg" alt="picture-lazy" data-src="./pic/28.jpg"></li>
+    <li><img src="./pic/default.jpg" alt="picture-lazy" data-src="./pic/29.jpg"></li>
+    <li><img src="./pic/default.jpg" alt="picture-lazy" data-src="./pic/30.jpg"></li>
+  </ul>
+</body>
+<script>
+  var imgs = document.getElementsByTagName('img'),
+      clientHeight = document.documentElement.clientHeight;
+
+  lazyload(imgs, clientHeight, 'file:///F:/GitHub/smallplugs/lazyload/pic/default.jpg'); // 初始化加载，防止一开始全部是默认图片
+
+  window.addEventListener('scroll', throttle(lazyload, 1000).bind(null, imgs, clientHeight, 'file:///F:/GitHub/smallplugs/lazyload/pic/default.jpg'), false);
+
+/**
+ * @parms imgs {Array-like} element节点结合
+ * @parms clientHeight {Number} 浏览器可视区高度
+ * @parms defaultSrc {String} 图片默认加载地址
+*/ 
+function lazyload (imgs, clientHeight, defaultSrc) {
+  imgArr = Array.from(imgs); // 将类数组对象转换为数组，方便使用数组方法forEach,当然也可以直接使用for循环，不用转换为数组
+  imgArr.forEach(img => {
+    var src,
+        rect = img.getBoundingClientRect();
+
+    // 图像在可视区域往上100px，往下100px以内加载图片 
+    if (rect.top < clientHeight + 100 && rect.top > -(rect.height + 100) ) {
+      src = img.getAttribute('data-src');
+      // 如果加载过了，就不加载 
+      if(img.src == defaultSrc) {
+        img.src = src;
+      }
+    }
+  });
+}
+/*
+function throttle (fn, delay) {
+  var timeId = null;
+
+  return function () {
+    var context = this,
+        args = arguments;
+    if (!timeId) {
+      timeId = setTimeout(function () {
+        fn.apply(context, args);
+        timeId = null;
+      }, delay);
+      
+    }
+  }
+}
+*/
+
+function throttle (fn, delay) {
+  var time = new Date();
+
+  return function () {
+    var context = this,
+        args = arguments;
+
+    var now = new Date();
+    if (now.getTime() - time.getTime() >= delay) {
+      fn.apply(context, args);
+      time = now;
+    }
+  }
+}
+</script>
+</html>
diff --git a/lazyload/pic/1.jpg b/lazyload/pic/1.jpg
diff --git a/lazyload/pic/10.jpg b/lazyload/pic/10.jpg
diff --git a/lazyload/pic/11.jpg b/lazyload/pic/11.jpg
diff --git a/lazyload/pic/12.jpg b/lazyload/pic/12.jpg
diff --git a/lazyload/pic/13.jpg b/lazyload/pic/13.jpg
diff --git a/lazyload/pic/14.jpg b/lazyload/pic/14.jpg
diff --git a/lazyload/pic/15.jpg b/lazyload/pic/15.jpg
diff --git a/lazyload/pic/16.jpg b/lazyload/pic/16.jpg
diff --git a/lazyload/pic/17.jpg b/lazyload/pic/17.jpg
diff --git a/lazyload/pic/18.jpg b/lazyload/pic/18.jpg
diff --git a/lazyload/pic/19.jpg b/lazyload/pic/19.jpg
diff --git a/lazyload/pic/2.jpg b/lazyload/pic/2.jpg
diff --git a/lazyload/pic/20.jpg b/lazyload/pic/20.jpg
diff --git a/lazyload/pic/21.jpg b/lazyload/pic/21.jpg
diff --git a/lazyload/pic/22.jpg b/lazyload/pic/22.jpg
diff --git a/lazyload/pic/23.jpg b/lazyload/pic/23.jpg
diff --git a/lazyload/pic/24.jpg b/lazyload/pic/24.jpg
diff --git a/lazyload/pic/25.jpg b/lazyload/pic/25.jpg
diff --git a/lazyload/pic/26.jpg b/lazyload/pic/26.jpg
diff --git a/lazyload/pic/27.jpg b/lazyload/pic/27.jpg
diff --git a/lazyload/pic/28.jpg b/lazyload/pic/28.jpg
diff --git a/lazyload/pic/29.jpg b/lazyload/pic/29.jpg
diff --git a/lazyload/pic/3.jpg b/lazyload/pic/3.jpg
diff --git a/lazyload/pic/30.jpg b/lazyload/pic/30.jpg
diff --git a/lazyload/pic/4.jpg b/lazyload/pic/4.jpg
diff --git a/lazyload/pic/5.jpg b/lazyload/pic/5.jpg
diff --git a/lazyload/pic/6.jpg b/lazyload/pic/6.jpg
diff --git a/lazyload/pic/7.jpg b/lazyload/pic/7.jpg
diff --git a/lazyload/pic/8.jpg b/lazyload/pic/8.jpg
diff --git a/lazyload/pic/9.jpg b/lazyload/pic/9.jpg
diff --git a/lazyload/pic/default.jpg b/lazyload/pic/default.jpg
diff --git a/notePaper/README.md b/notePaper/README.md
@@ -53,8 +53,10 @@ import {EventUtil} from './tool.js';
 
 
 ### error
+
 #### v1
 * bind使用过程中，需要传过来鼠标点击时input中的内容，刚开始时的代码为：`createList.bind(null, document.getElementsByClassName('lists')[0], document.getElementById('text-in').value)`,结果在下面一直获取不到值，显示input内容为空，最后发现如果只传过去`document.getElementById('text-in')`,而在函数中获取input内容时就可以了，我得出的 **结论** 是：bind中的参数的内容可能是在编写的时候就确定的，而不是运行的时候（点击）才获取的。为了验证这个结论，将代码改回去，直接在初始的时候就给input赋值，然后点击，发现可以获取到值，而这个值就是初始给的值,之后无论怎么改变，仍然传递的是初始的值，而现在再改成只传递input的写法，只要input内容改变，那么传递的值就改变。
+* 
 #### v2
 * 生成记录的函数 之前的写法：
 ```
-Original file line number
+Diff line change
@@ Expand Up / @@ -53,8 +53,10 @@ import {EventUtil} from './tool.js'; @@
     ### error
     #### v1
     * bind使用过程中，需要传过来鼠标点击时input中的内容，刚开始时的代码为：`createList.bind(null, document.getElementsByClassName('lists')[0], document.getElementById('text-in').value)`,结果在下面一直获取不到值，显示input内容为空，最后发现如果只传过去`document.getElementById('text-in')`,而在函数中获取input内容时就可以了，我得出的 **结论** 是：bind中的参数的内容可能是在编写的时候就确定的，而不是运行的时候（点击）才获取的。为了验证这个结论，将代码改回去，直接在初始的时候就给input赋值，然后点击，发现可以获取到值，而这个值就是初始给的值,之后无论怎么改变，仍然传递的是初始的值，而现在再改成只传递input的写法，只要input内容改变，那么传递的值就改变。
+    *
     #### v2
     * 生成记录的函数 之前的写法：
     ```
@@ Expand Down @@