前言:

本文主要通过以下几方面来说明懒加载技术的原理,个人前端小菜,有错误请多多指出

先看效果:

本人安装nginx-echo-module的初衷是之前遇到过一些时候,虽然有配置location规则,但是却在浏览器访问时,出现错误等未匹配或不符合预期的情况,想要知道,实际上是否有匹配哪条location规则,但是nginx的日志却只能记录请求url,所以,看到echo输出就很开心,毕竟感觉return不是那么好用的,作为一个小白前端,只能写到这种程度,各位参考指教吧~

一、什么是图片滚动加载?

图片 1

  1. 下载nginx源码 下载地址:链接:
    密码: 936t
  2. 下载nginx-echo-module 
    链接:
  3. 命令行新建文件夹,将下载下来的nginx源码解压,cd到该目录

  通俗的讲就是:当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需请求一次),只有当图片出现在浏览器的可视区域内时,才设置图片正真的路径,让图片显示出来。这就是图片懒加载。

图片 2

./configure

二、为什要使用这个技术?

图片 3

sudo make

  比如一个页面中有很多图片,如淘宝、京东首页等等,如果一上来就发送这么多请求,页面加载就会很漫长,如果js文件都放在了文档的底部,恰巧页面的头部又依赖这个js文件,那就不好办了。更为要命的是:一上来就发送百八十个请求,服务器可能就吃不消了(又不是只有一两个人在访问这个页面)。

就这个效果。当你点击右上角的删除按钮,会删除掉item1。

sudo make install

  因此优点就很明显了:不仅可以减轻服务器的压力,而且可以让加载好的页面更快地呈现在用户面前(用户体验好)。

上代码:

 

三、怎么实现?

图片 4图片 5

此时,nginx已经成功安装到系统/usr/local/nginx目录下,可执行文件是/usr/local/nginx/sbin中的nginx文件

  关键点如下:

  1 <!DOCTYPE html>
  2 <html>
  3 
  4 <head>
  5     <meta charset="utf-8">
  6     <title></title>
  7     <style type="text/css">
  8         .central {
  9             /* 利用绝对定位和flex实现居中 */
 10             position: absolute;
 11             top: 0px;
 12             right: 0px;
 13             bottom: 0px;
 14             left: 0px;
 15             margin: auto;
 16             width: 50%;
 17             height: 80%;
 18             background-color: antiquewhite;
 19             /* 居中效果结束 */
 20 
 21             display: flex;
 22             flex-direction: column;
 23             /* 垂直排列 */
 24             /* 与justify-content相同的方式在侧轴方向上将当前行上的弹性元素对齐。也就是上下居中 */
 25             align-items: center;
 26             /* 居中排列,水平方向 */
 27             justify-content: center;
 28         }
 29 
 30         #pop_div {
 31             background-color: #F6F6F6;
 32             width: 60px;
 33             height: 60px;
 34             border-radius: 30px;    /* 用边框半径实现圆形div */
 35             text-align: center;
 36             line-height: 60px;
 37             outline: none;
 38             font-size: 30px;
 39             color: #C4C6C7;
 40         }
 41 
 42         #pop_div:hover {
 43             cursor: pointer;        /* 当鼠标移动到标签上是,自动变成手指形状 */
 44         }
 45 
 46         .add_item {
 47             background-color: #F6F6F6;
 48             width: 60px;
 49             height: 60px;
 50             border-radius: 30px;
 51             text-align: center;
 52             line-height: 60px;
 53             outline: none;
 54             font-size: 10px;
 55             color: #C4C6C7;
 56         }
 57 
 58         .btn_delete {
 59             position: relative;
 60             float: right;
 61             right: 0px;
 62             top: 0px;
 63             width: 20px;
 64             height: 20px;
 65             border-radius: 10px;
 66             outline: none;
 67             border: none;
 68             cursor: pointer;
 69         }
 70 
 71         .hide_div {
 72             position: absolute;
 73             top: 0px;
 74             right: 0px;
 75             bottom: 0px;
 76             left: 0px;
 77             margin: auto;
 78             width: 100%;
 79             height: 100%;
 80 
 81             display: none;  /* 显示方式:none(标签不显示) */
 82             background-color: rgba(194, 195, 201, 0.7);     /* 实现半透明北京,0.7代表不透明度 */
 83         }
 84 
 85         .hide_div div {
 86             cursor: pointer;
 87         }
 88     </style>
 89 </head>
 90 
 91 <body>
 92     <div class="central">
 93         <div id="panel"></div>
 94         <div id="pop_div" title="添加" onclick="popDiv();">+</div>
 95     </div>
 96     <div id="hide_div" class="hide_div">
 97         <div id="item1" onclick="itemClick('item1');">item1</div>
 98         <div id="item2" onclick="itemClick('item2');">item2</div>
 99         <div id="item3" onclick="itemClick('item3');">item3</div>
100         <div id="item4" onclick="itemClick('item4');">item4</div>
101         <div id="item5" onclick="itemClick('item5');">item5</div>
102     </div>
103     <script>
104         function popDiv() {
105             // alert("将要弹出一个div");
106             var vardiv = document.getElementById("hide_div");
107             vardiv.style.display = "flex";
108             vardiv.style.flexDirection = "column";
109             vardiv.style.justifyContent = "center";
110             vardiv.style.alignItems = "center";
111             // vardiv.onclick = itemClick;
112         }
113 
114         function itemClick(item) {
115             var text = document.getElementById(item).innerHTML; /* 获取元素html属性返回string */
116             // alert(text);
117             var vardiv = document.getElementById("hide_div");
118             vardiv.style.display = "none";
119             addElementToHtml(text);
120         }
121 
122         var index = 0;
123         function addElementToHtml(text) {
124             // 判断是否已经存在这个id的标签
125             if (null != document.getElementById(text + "_p")) {
126                 alert('不能重复添加...');
127                 return;
128             }
129 
130             // 创建一个p标签,设置属性
131             var p = document.createElement('p');
132             p.id = text + "_p";
133             p.innerHTML = text;
134             p.className = "add_item";
135 
136             // 创建一个input标签,设置属性
137             var btnDel = document.createElement('input');
138             btnDel.type = 'button';
139             btnDel.value = '×';
140             btnDel.title = "删除";
141             btnDel.className = "btn_delete";
142 
143             // 绑定删除按钮删除事件
144             btnDel.onclick = function () {
145                 // alert("将删除" + this.parentNode.id + "标签及子标签...");
146                 this.parentNode.parentNode.removeChild(this.parentNode); /* 首先要找到要删除节点的父节点,然后通过父节点才能删除自己 */
147             };
148 
149             // 添加删除按钮到p标签中
150             p.appendChild(btnDel);
151 
152             var panel = document.getElementById("panel");
153             panel.appendChild(p);
154         }
155     </script>
156 </body>
157 
158 </html>

启动命令:cd /usr/local/nginx/sbin

     
1、页面中的img元素,如果没有src属性,浏览器就不会发出请求去下载图片(也就没有请求咯,也就提高性能咯),一旦通过javascript设置了图片路径,浏览器才会送请求。有点按需分配的意思,你不想看,就不给你看,你想看了就给你看~

View Code

           sudo ./nginx

  2、如何获取正真的路径,这个简单,现在正真的路径存在元素的“data-url”(这个名字起个自己认识好记的就行)属性里,要用的时候就取出来,再设置;

 

重启使配置生效  sudo ./nginx -s reload

  3、开始比较之前,先了解一些基本的知识,比如说如何获取某个元素的尺寸大小、滚动条滚动距离及偏移位置距离;
 图片 6

停止服务  sudo ./nginx -s stop

  1)屏幕可视窗口大小:对应于图中1、2位置处

  4. 将nginx-echo-module解压后移动到3中目录下

    原生方法:window.innerHeight 标准浏览器及IE9+ ||
document.documentElement.clientHeight 标准浏览器及低版本IE标准模式 ||

 

           document.body.clientHeight 低版本混杂模式

sudo ./configure –add-module=echo-nginx-module-0.61

       jQuery方法: $(window).height() 

sudo
make

  2)浏览器窗口顶部与文档顶部之间的距离,也就是滚动条滚动的距离:也就是图中3、4处对应的位置;

sudo make
install

    原生方法:window.pagYoffset——IE9+及标准浏览器 ||
document.documentElement.scrollTop 兼容ie低版本的标准模式 ||

  这个过程中,因为按照网上教程操作,但是,下载的0.60及0.58在sudo
make时都会在控制台报2个错,因为没截图,记得报错是赋值类型不匹配相关,错误文件是http-request.c,后来尝试下载了链接中的0.61版本,重新从.configure执行一次,发现没有报错了(这个过程真是煎熬啊,自己又不懂nginx实现的细节,网上又没有很多类似报错信息,像没头苍蝇一样乱试)

         document.body.scrollTop 兼容混杂模式;

发表评论

电子邮件地址不会被公开。 必填项已用*标注