图片懒加载和预加载

1.懒加载

延迟加载，当达到预定条件的时候，再加载对应的资源
实现

function lazyload（）{
 let imgs = document.querySelectorAll('img')
 //获取浏览器滚动过的距离
 let scrollTop = document.body.scrollTop || document.documentElement.scrollTop
 //获取浏览器可视区的高度
 let winHight = window.innerHeight
 
}

//使用插件
vue-lazyload

npm install vue-lazyload --save-dev

//在main.js中引用
import VueLazyload from "vue-lazyload";

Vue.use(VueLazyload);
//或者自定义

Vue.use(VueLazyload, {
preLoad: 1.3,
error: 'dist/error.png',
loading: 'dist/loading.gif',
attempt: 1
})

在组件中使用时

<div v-lazy-container="{ selector: 'img' }">
  <img data-src="//domain.com/img1.jpg">
  <img data-src="//domain.com/img2.jpg">
  <img data-src="//domain.com/img3.jpg">  
</div>
 
//或者这种：
 <div>
v-lazy-container="{ selector: 'img' }"
class="contentDiv construction"
v-html="content">
</div>

2.预加载

在页面加载的时候，提前加载图片，当用户需要查看的时候从本地缓存中渲染
方法一：
项目打开的时候要对图片进行预加载，在App.vue里面的beforeCreate添加预加载程序

beforeCreate(){
    let count = 0;
    let imgs = [
    //用require的方式添加图片地址，直接添加图片地址的话，在build打包之后会查找不到图片，因为打包之后的图片名称会有一个加密的字符串
        require('xxx')
    ]
    for (let img of imgs) {
        let image = new Image();
        image.onload = () => {
            count++;
        };
        image.src = img;
    }
}

使用new image创建的图片的方式

document.getElementById("domid").appendChild(img);

方法二：创建两个文件名分别为imgPreloader.js(用于导出图片加载的异步方法)，imgPreloaderList.js(用于存放图片列表)

1.imgPreloaderList.js

export default [
  require('相对图片地址1'),
  require('相对图片地址2'),
  ...
];

2.imgPreloader.js

const imgPreloader = url => {
  return new Promise((resolve, reject) => {
    let image = new Image();
    image.onload = () => {
      resolve();
    };
    image.onerror = () => {
      reject();
    };
    image.src = url;
  });
};
export const imgsPreloader = imgs => {
  let promiseArr = [];
  imgs.forEach(element => {
    promiseArr.push(imgPreloader(element));
  });
  return Promise.all(promiseArr);
};

3.使用

// 导入图片预加载方法以及图片列表
import { imgsPreloader } from './config/imgPreloader.js';
import imgPreloaderList from './config/imgPreloaderList.js';
 
(async () => {
  await imgsPreloader(imgPreloaderList);
  //关闭加载弹框
  document.querySelector('.loading').style.display = 'none';
  new Vue({
    router,
    store,
    render: h => h(App)
  }).$mount('#app');
})();

方法3.使用雪碧图