手写vue2的Lazyload

调用方式，express写个后台服务调图片，具体使用不贴了

import VueLazyload from "./modules/vue-lazyload";Vue.use(VueLazyload,{loading: 'http://localhost:3000/images/loading.gif',error: 'http://localhost:3000/images/error.jpg',preload: 1 // 倍数
});

使用指令

<img v-lazy="item.src" :alt="item.title">

vueLazyload/index.js

import Lazyload from './Lazyload';
const VueLazyload = {install(Vue, options) {const LazyClass = Lazyload(Vue)const lazyload = new LazyClass(options);Vue.directive('lazy', {bind: lazyload.bindLazy.bind(lazyload)})}
}
export default VueLazyload;

vueLazyload/Lazyload.js

import Lazyimg from "./Lazyimg";
import {getScrollParent
} from "./utils";// 柯里化
export default function Lazyload(Vue) {return class Lazy {constructor(options) {this.options = options;this.isAddScrollListener = false;this.lazyImgPool = [];}bindLazy(el, bindings, vnode) {// console.log(this.options);// 还未渲染Vue.nextTick(() => {const scrollParent = getScrollParent(el);// console.log('scrollParent', scrollParent);if (scrollParent && !this.isAddScrollListener) {scrollParent.addEventListener('scroll', this.handleScroll.bind(this), false)//true 表示在捕获阶段调用事件处理程序，false（默认值）表示在冒泡阶段调用事件处理程序}const lazyImg = new Lazyimg({el,src: bindings.value,options: this.options,imgRender: this.imgRender.bind(this)})// 图片池this.lazyImgPool.push(lazyImg);this.handleScroll(); // 初始化时显示一部分可视区域内的图片})}handleScroll() {let isVisible = false;this.lazyImgPool.forEach(lazyImg => {if (!lazyImg.loaded) { // 未加载isVisible = lazyImg.checkIsVisible() //检测是否出现在区域内isVisible && lazyImg.loadImg() // 出现了加载图片}})}imgRender(lazyImg, state) {const {el,options} = lazyImg;const {loading,error} = options;let src = '';switch (state) {case 'loading':src = loading || '';break;case 'error':src = error || '';break;default:src = lazyImg.src;break;}el.setAttribute('src', src);}}
}

vueLazyload/Lazyimg.js

/* 处理每张图片的类 */
import {imgLoad
} from "./utils";
export default class Lazyimg {constructor({el,src,options,imgRender}) {this.el = elthis.src = srcthis.options = optionsthis.imgRender = imgRender //渲染事件this.loaded = false //加载完没this.state = { // 状态loading: false,error: false}}checkIsVisible() {// 当前图片距离最顶端距离是多少来判断const {top} = this.el.getBoundingClientRect();return top < window.innerHeight * (this.options.preload || 1.3); // 小于倍数}loadImg() {this.imgRender(this.el, 'loading');imgLoad(this.src).then(() => {this.state.loading = true;this.imgRender(this, 'ok');this.loaded = true;}, () => {this.state.error = true;this.imgRender(this, 'error');this.loaded = true;})}
}

vueLazyload/utils.js

export function getScrollParent(el) {let _parent = el.parentNode;while (_parent) {// 查找父节点是否有style overflow:autoconst styleOverflow = window.getComputedStyle(_parent)['overflow'];if (/(scroll)|(auto)/.test(styleOverflow)) {return _parent;}_parent = _parent.parentNode;}
}
export function imgLoad(src) {return new Promise((resolve, reject) => {const oImg = new Image();oImg.src = src;oImg.onload = resolve;oImg.onerror = reject;})
}

手写vue2的Lazyload相关推荐

前端进阶-手写Vue2.0源码（三）｜技术点评
前言今天是个特别的日子祝各位女神女神节快乐哈封面我就放一张杀殿的帅照表达我的祝福哈哈此篇主要手写 Vue2.0 源码-初始渲染原理上一篇咱们主要介绍了 Vue 模板编译原理它是 Vue ...
【手写 Vue2.x 源码】第二十八篇 - diff 算法-问题分析与 patch 优化
一,前言首先,对 6 月的更文内容做一下简单回顾: Vue2.x 源码环境的搭建 Vue2.x 初始化流程介绍对象的单层.深层劫持数组的单层.深层劫持数据代理的实现对象.数组数据变化的观测 ...
【手写 Vue2.x 源码】第十八篇 - 根据 render 函数，生成 vnode
一,前言上篇,介绍了 render 函数的生成,主要涉及以下两点: 使用 with 对生成的 code 进行一次包装将包装后的完整 code 字符串,通过 new Function 输出为 ren ...
【手写 Vue2.x 源码】第十九篇 - 根据 vnode 创建真实节点
一,前言上篇,根据 render 函数,生成 vnode,主要涉及以下几点: 封装 vm._render 返回虚拟节点 _s,_v,_c的实现本篇,根据 vnode 虚拟节点渲染真实节点二,根据 ...
【手写 Vue2.x 源码】第二十二篇 - dep 和 watcher 关联
一,前言上篇,主要介绍了 Vue 依赖收集的过程分析: 介绍了 Vue 的响应式特性介绍了 Vue 的依赖收集过程介绍了 dep 和 watcher 以及观察者模式: 本篇,Vue 依赖收集的实 ...
【手写 Vue2.x 源码】第三十一篇 - diff 算法 - 比对优化（下）
一,前言上篇,diff 算法-比对优化(上),主要涉及以下几个点: 介绍了如何对儿子节点进行比对: 新老儿子节点可能存在的 3 种情况及代码实现: 新老节点都有儿子时,diff 的方案介绍与处理逻辑 ...
Vue2.0 + ElementUI 手写权限管理系统后台模板（一）——简述
简介这个权限管理就是为了方便,跟系统安全真的不沾边,只是根据后台返回的角色信息来生成他可以看见的菜单和按钮,显示菜单的方法是根据权限删除掉路由表里没有权限的路由,然后再动态添加,原本包含没有访问权限 ...
超级详细的手写webpack4配置来启动vue2项目（附配置作用）
基础目录结构以及各个文件的作用初始npm项目 npm init 一路回车,一律使用默认的npm项目配置 package.json修改scripts 如下: {"name": &q ...
Vue2.0 + ElementUI 手写权限管理系统后台模板（三）——页面搭建
框架布局本章只介绍基础布局,和一些主要的js,页面上基本上都是些交互事件,项目代码上都有注释,不懂的地方debug跑一变就知道了,只是这些事件基本上没有独立存在的,相互之间都有关联框架风格新建页 ...

手写vue2的Lazyload

手写vue2的Lazyload相关推荐

最新文章

热门文章