图片懒加载技术

今天搞VUE，真的头皮发麻，感觉数据驱动，那个数据让人很无奈的。哎！总结下其他的东西吧！没错就是图片懒加载！对优化网页有极大的用处。

图片懒加载

一般后端直出的页面中，img标签中的src为一张占位图，真实的图片地址放在了一个伪属性中，一般来说是放在data-src中。当页面滚动时遍历当前页面需要进行懒加载的图片，判断图片是否是在可视的区域内，如果在的话，则取放在伪属性的真实src替换当前的src。
优化点：
1.滚动函数节流
onscroll事件是一个非常频繁的事件。因此我们要对滚动事件进行节流，只有当后触发滚动与前触发一次滚动时间大于一定间隔时，才认为这次滚动是生效的。
也就是说，用户快速滑动页面时。筛选加载策略并不会执行，只有用户缓慢下滑页面，呈页面游览状态时，才会进行加载策略。

    var scrollTimer = 0;
    _window.scroll(function(){//当用户滚动指定的元素时，会发生 scroll 事件。
        clearTimeout(scrollTimer);
        scrollTimer = setTimeout(_load,150)
    })
    var resizeTimer = 0;
    _window.resize(function(){//当调整浏览器窗口的大小时，发生 resize 事件。
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(_load,100)
    })

2.预加载
即是预先加载一些未在当前视窗内的，但即将出现的一些图片
一般的实现思想是当前视窗下方的一段图片进行加载。极大的提高用户体验。