图片懒加载和预加载

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');
})();