前端性能优化之懒加载，预加载

一、懒加载

这里以手机淘宝为例，我们并不需要在进入页面时显示所有资源，当用户下拉时我们再展示后续内容：
我们来做一个demo如下：
index.html

  
  
  


  

    
    
    ......
  
  

lazyload.js

image.png

我们也可以引用zepto.lazyload.js包帮我们实现：

image.png

image.png

二、预加载

当需要图片内容很多时(比如游戏)，我们需要先把图片文件全部加载一下，然后再进入页面
预加载的有三种实现方式：

1. 直接使用img标签引入，并设置display:none

2. 使用image对象

   
   
   image.png

3. 使用ajax请求 优点，可以监控，缺点，存在跨域

   
   
   image.png

我们也可以使用preload.js帮我们实现预加载

image.png

设置为false代表使用img标签方法，不设就使用xmlhttp方法