const lazyPlugin = {
? install (app, options) {
? ? app.directive('lazy', {
? ? ? // 指令對(duì)象
? ? })
? }
}

export default lazyPlugin

import { createApp } from 'vue'
import App from './App.vue'
import lazyPlugin from 'vue3-lazy'

createApp(App).use(lazyPlugin, {
? // 添加一些配置參數(shù)
})

const State = {
? loading: 0,
? loaded: 1,
? error: 2
}

export class ImageManager {
? constructor(options) {
? ? this.el = options.el
? ? this.src = options.src
? ? this.state = State.loading
? ? this.loading = options.loading
? ? this.error = options.error
? ??
? ? this.render(this.loading)
? }
? render() {
? ? this.el.setAttribute('src', src)
? }
? load(next) {
? ? if (this.state > State.loading) {
? ? ? return
? ? }
? ? this.renderSrc(next)
? }
? renderSrc(next) {
? ? loadImage(this.src).then(() => {
? ? ? this.state = State.loaded
? ? ? this.render(this.src)
? ? ? next && next()
? ? }).catch((e) => {
? ? ? this.state = State.error
? ? ? this.render(this.error)
? ? ? console.warn(`load failed with src image(${this.src}) and the error msg is ${e.message}`)
? ? ? next && next()
? ? })
? }
}

export default function loadImage (src) {
? return new Promise((resolve, reject) => {
? ? const image = new Image()

? ? image.onload = function () {
? ? ? resolve()
? ? ? dispose()
? ? }

? ? image.onerror = function (e) {
? ? ? reject(e)
? ? ? dispose()
? ? }

? ? image.src = src

? ? function dispose () {
? ? ? image.onload = image.onerror = null
? ? }
? })
}

const DEFAULT_URL = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'

export default class Lazy {
? constructor(options) {
? ? this.managerQueue = []
? ? this.initIntersectionObserver()
? ??
? ? this.loading = options.loading || DEFAULT_URL
? ? this.error = options.error || DEFAULT_URL
? }
? add(el, binding) {
? ? const src = binding.value
? ??
? ? const manager = new ImageManager({
? ? ? el,
? ? ? src,
? ? ? loading: this.loading,
? ? ? error: this.error
? ? })
? ??
? ? this.managerQueue.push(manager)
? ??
? ? this.observer.observe(el)
? }
? initIntersectionObserver() {
? ? this.observer = new IntersectionObserver((entries) => {
? ? ? entries.forEach((entry) => {
? ? ? ? if (entry.isIntersecting) {
? ? ? ? ? const manager = this.managerQueue.find((manager) => {
? ? ? ? ? ? return manager.el === entry.target
? ? ? ? ? })
? ? ? ? ? if (manager) {
? ? ? ? ? ? if (manager.state === State.loaded) {
? ? ? ? ? ? ? this.removeManager(manager)
? ? ? ? ? ? ? return
? ? ? ? ? ? }
? ? ? ? ? ? manager.load()
? ? ? ? ? }
? ? ? ? }
? ? ? })
? ? }, {
? ? ? rootMargin: '0px',
? ? ? threshold: 0
? ? })
? }
? removeManager(manager) {
? ? const index = this.managerQueue.indexOf(manager)
? ? if (index > -1) {
? ? ? this.managerQueue.splice(index, 1)
? ? }
? ? if (this.observer) {
? ? ? this.observer.unobserve(manager.el)
? ? }
? }
}

const lazyPlugin = {
? install (app, options) {
? ? const lazy = new Lazy(options)

? ? app.directive('lazy', {
? ? ? mounted: lazy.add.bind(lazy)
? ? })
? }
}

export default class Lazy {
? remove(el) {
? ? const manager = this.managerQueue.find((manager) => {
? ? ? return manager.el === el
? ? })
? ? if (manager) {
? ? ? this.removeManager(manager)
? ? }
? }
}

const lazyPlugin = {
? install (app, options) {
? ? const lazy = new Lazy(options)

? ? app.directive('lazy', {
? ? ? mounted: lazy.add.bind(lazy),
? ? ? remove: lazy.remove.bind(lazy)
? ? })
? }
}

export default class ImageManager {
? update (src) {
? ? const currentSrc = this.src
? ? if (src !== currentSrc) {
? ? ? this.src = src
? ? ? this.state = State.loading
? ? }
? } ?
}

export default class Lazy {
? update (el, binding) {
? ? const src = binding.value
? ? const manager = this.managerQueue.find((manager) => {
? ? ? return manager.el === el
? ? })
? ? if (manager) {
? ? ? manager.update(src)
? ? }
? } ? ?
}

const lazyPlugin = {
? install (app, options) {
? ? const lazy = new Lazy(options)

? ? app.directive('lazy', {
? ? ? mounted: lazy.add.bind(lazy),
? ? ? remove: lazy.remove.bind(lazy),
? ? ? update: lazy.update.bind(lazy)
? ? })
? }
}

export default class Lazy {
? constructor(options) {
? ? // ...
? ? this.cache = new Set()
? }
}