前端性能优化的重要方案：图片懒加载
前端性能优化的重要方案：图片懒加载
大家好，我是前端岚枫，一枚二线城市的程序媛，今天主要跟大家分享我整理的前端性能优化的重要方案：图片懒加载，主要包括其原理，我们常用的一些插件，及编写源码实现图片懒加载功能等，图片懒加载是项目比较常见的性能优化方案，也是面试中常遇到的问题。希望下面文章对大家有所帮助。
1. 什么叫懒加载？
懒加载也叫延迟加载或按需加载，比如图片延迟加载或符合某些条件时才加载某些图片。
2. 使用场景：
当我们进入到某个页面的时候，会加载许多图片，有些图片可能在下面，当我们点进页面但没有滚动全部展示时，其实下面的图片是没有作用的，这个时候如果是加载了也相当于白加载，而且还降低了网页的加载速度，那懒加载就是只有滚动到可视区域时才加载当前的图片，也就是说不是一次性加载所有的图片，加快了页面渲染速度，从而在一定程度上减少服务器的请求及宽带，让第一次打开页面的速度变快。
3. 懒加载的优点
提高前端性能，图片在需要的时候才加载，减轻服务器的负担，提高页面的加载速度，能够减少带宽。
4. 实现原理
图片的加载是由src的值引起的，当对src赋值时，浏览器会请求图片资源，基于这个，可以利用html5的属性data-xxx来保存图片的路径，当我们需要加载图片的时候才将data-xxx的值赋予src,就能实现突破的按需加载，也就是懒加载了。
5. 实现方案
把所有需要延迟加载的图片用一个盒子包起来，设置宽高和默认占位图。开始让所有的img的src为空，把真实图片的地址放到img的自定义属性上，让img隐藏属性等到所有其他资源加载完后，我们再开始加载图片对于很多图片，需要当页面滚动的时候，当前图片区域完全显示出来后再加载真实图片
6. 常用懒加载插件
jQuery图片延迟加载插件jQuery.lazyload
插件地址： src="jquery-1.11.0.min.js">
html图片调用方法
图片路径和引用方法用data-original
js调用
$(function() { $("img.lazy").lazyload({effect: "fadeIn"}); });
vue图片懒加载–vue-lazyload的使用
安装
npm install vue-lazyload --save-dev
vue 项目中引入
main.js全局引入
import Vue from 'vue'import App from './App.vue'import VueLazyload from 'vue-lazyload' Vue.use(VueLazyload)// 或添加配置参数Vue.use(VueLazyload, { preLoad: 1.3, error: 'dist/error.png', loading: 'dist/loading.gif', attempt:2})
7.编写代码实现图片懒加载
以上是图片展示图片懒加载过程原理：
简易功能实现核心代码
//html 代码