图片懒加载 滚动加载图片（懒加载）实现原理

滚动加载图片（懒加载）实现原理

 

本文主要经过如下几方面来讲明懒加载技术的原理，我的前端小菜，有错误请多多指出

1、什么是图片滚动加载？

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

2、为什要使用这个技术？

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

　　所以优势就很明显了：不只能够减轻服务器的压力，并且可让加载好的页面更快地呈如今用户面前（用户体验好）。

3、怎么实现？

　　关键点以下：

      一、页面中的img元素，若是没有src属性，浏览器就不会发出请求去下载图片（也就没有请求咯，也就提升性能咯），一旦经过javascript设置了图片路径，浏览器才会送请求。有点按需分配的意思，你不想看，就不给你看，你想看了就给你看~

　　二、如何获取正真的路径，这个简单，如今正真的路径存在元素的“data-url”（这个名字起个本身认识好记的就行）属性里，要用的时候就取出来，再设置；