add lazyloading practice

visugar · Jul 18, 2017 · 11e0d92 · 11e0d92
1 parent 7a7f172
commit 11e0d92
Show file tree

Hide file tree

Showing 10 changed files with 70 additions and 0 deletions.
diff --git a/07lazyLoading/imgs/06.jpg b/07lazyLoading/imgs/06.jpg
diff --git a/07lazyLoading/imgs/07.jpg b/07lazyLoading/imgs/07.jpg
diff --git a/07lazyLoading/imgs/08.jpg b/07lazyLoading/imgs/08.jpg
diff --git a/07lazyLoading/imgs/09.jpg b/07lazyLoading/imgs/09.jpg
diff --git a/07lazyLoading/imgs/10.jpg b/07lazyLoading/imgs/10.jpg
diff --git a/07lazyLoading/imgs/11.jpg b/07lazyLoading/imgs/11.jpg
diff --git a/07lazyLoading/imgs/12.jpg b/07lazyLoading/imgs/12.jpg
diff --git a/07lazyLoading/imgs/13.jpg b/07lazyLoading/imgs/13.jpg
diff --git a/07lazyLoading/imgs/default.png b/07lazyLoading/imgs/default.png
diff --git a/07lazyLoading/index.html b/07lazyLoading/index.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="keywords" content="懒加载 首屏加载">
+    <meta name="description" content="实现图片懒加载来提升前端性能">
+    <title>图片懒加载具体实现</title>
+    <style>
+        li {
+            list-style: none;
+        }
+
+        img {
+            width: 400px;
+            height: 300px;
+        }
+    </style>
+</head>
+
+<body>
+    <ul>
+        <li><img src="" data-src="./imgs/06.jpg"></li>
+        <li><img src="" data-src="./imgs/07.jpg"></li>
+        <li><img src="" data-src="./imgs/08.jpg"></li>
+        <li><img src="" data-src="./imgs/09.jpg"></li>
+        <li><img src="" data-src="./imgs/10.jpg"></li>
+        <li><img src="" data-src="./imgs/11.jpg"></li>
+        <li><img src="" data-src="./imgs/12.jpg"></li>
+        <li><img src="" data-src="./imgs/13.jpg"></li>
+    </ul>
+    <script>
+
+        /*图片懒加载*/
+        function LazyLoad(){
+            this.config = {
+                windowH:window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight,  //屏幕可视窗口高
+                windowW:window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,   //屏幕可视窗口宽
+            },
+
+            this.init()
+        }
+
+        LazyLoad.prototype = {
+            init: function(){
+                var aImg = document.querySelectorAll('img');  //获取文档中所有的img图片
+                for(var i=0;i<aImg.length;i++){
+                    if((this.getClientRect(aImg[i]).clientT>0 && this.getClientRect(aImg[i]).clientT<this.config.windowH)||(this.getClientRect(aImg[i]).clientB>0&&this.getClientRect(aImg[i]).clientB<this.config.windowH)){
+                        aImg[i].src = aImg[i].dataset.src;  //如果图片出现在浏览器可视区域中则用img标签中自定义的data-src值去替src路径
+                    }
+                }
+            },
+
+            getClientRect: function(obj){
+                var clientT = obj.getBoundingClientRect().top;  //getBoundingClientRect方法可以获取元素到浏览器窗口边缘的距离
+                var clientR = obj.getBoundingClientRect().right;
+                var clientB = obj.getBoundingClientRect().bottom;
+                var clientL = obj.getBoundingClientRect().left;
+                return {clientT,clientR,clientB,clientL}
+            }
+        }
+
+        window.onload = window.onresize = window.onscroll = function(){
+            var lazyLoad = new LazyLoad();  //当页面加载或页面滚动或窗口大小改变时实例化一个懒加载对象
+        }
+
+    </script>
+</body>
+
+</html>