优化 懒加载预加载

懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力

图片懒加载

首先正常渲染，但是真正的路径要放到data-src中去

获取当前窗口高度，滚动高度

滚动时进行判读，如果当前元素距离窗口高度小于窗口高度+滚动高度则将data-src中的数据放到src中(记得要加上防抖或者节流)

删除data-src属性

让n来控制循环开始数(防止滚回去还会操作src的问题)

控制页面刷新后让滚动条复位(要加延迟否则可能不生效)

预加载

• 将所有所需的资源提前请求加载到本地，这样后面在需要用到时就直接从缓存取资源

• 为什么要用预加载

  • 在网页全部加载之前，对一些主要内容进行加载，以提供给用户更好的体验，减少等待的时间

• 实现

  • 使用HTML标签

  <img src="<http://pic26.nipic.com/20121213/6168183> 0044449030002.jpg" style="display:none"/>
  

  • 使用Image对象

  <script src="./myPreload.js"></script>
  
  //myPreload.js文件
  
  var image= new Image()
  
  image.src="http://pic26.nipic.com/20121213/6168183 004444903000 2.jpg"
  

  • 使用XMLHttpRequest对象,虽然存在跨域问题，但会精细控制预加载过程

  

  • 使用PreloadJS库

    • 预加载可以使用HTML标签以及XHR来完成。默认情况下，PreloadJS会尝试使用XHR加载内容，因为它提供了对进度和完成事件的更好支持，但是由于跨域问题，使用基于标记的加载可能更好

  • 使用 HTML 标签，可以跨域