js 滚动加载图片（懒加载）实现原理 （个人学习笔记）

　　一.what

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

　　二.why　　　

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

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

　　三.how

　　　　1.原理：页面中的img元素，如果没有src属性，浏览器就不会发出请求去下载图片（也就没有请求咯，也就提高性能咯），一旦通过javascript设置了图片路径，浏览器才会送请求。有点按需分配的意思

　　　　2.技术要点：

　　　　　　1) 屏幕可视窗口大小:　　　

　　　　　　　　　　原生方法：window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight 

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

　　　　　　2) 浏览器窗口顶部与文档顶部之间的距离，也就是滚动条滚动的距离：

　　　　　　　　       原生方法：window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop

     　　　　 　　　　 jQuery方法：$(document).scrollTop(); 

　　　　　　3) 获取元素的尺寸：

　　　　　　　　       $(o).width() = o.style.width; 

　　　　　　　　　　$(o).innerWidth() = o.style.width+o.style.padding;

　　　　　　　　　　$(o).outerWidth() = o.offsetWidth = o.style.width+o.style.padding+o.style.border;

　　　　　　　　　　$(o).outerWidth(true) = o.style.width+o.style.padding+o.style.border+o.style.margin;

　　　　　　　　　　注意：要使用原生的style.xxx方法获取属性，这个元素必须已经有内嵌的样式，如<div style="...."></div>；

　　　　　　　　　　如果原先是通过外部或内部样式表定义css样式，必须使用o.currentStyle[xxx] || document.defaultView.getComputedStyle(0)[xxx]来获取样式值