Skip to content

Commit dff4944

Browse files
tolkingtolking
committed
feat: support background-image
1 parent e3757eb commit dff4944

File tree

4 files changed

+75
-21
lines changed

4 files changed

+75
-21
lines changed

‎example/index.html

+12
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,24 @@
1111
margin: 0 auto 10px;
1212
background-color: rosybrown;
1313
}
14+
.bg {
15+
display: block;
16+
margin: 0 auto 10px;
17+
width:536px;
18+
height:354px;
19+
background-color: rosybrown;
20+
font-size: 80px;
21+
color: aqua;
22+
text-align: center;
23+
line-height: 354px;
24+
}
1425
</style>
1526
</head>
1627
<body>
1728
<div id="app">
1829
<img v-for="item in imgList" :key="item" v-lazy="item" width="536" height="354">
1930
<!-- <img v-for="n in 20" :key="n" :data-src="'https://picsum.photos/536/354?random=' + n" width="536" height="354"> -->
31+
<div v-lazy:bg="'https://picsum.photos/536/354?random'" class="bg">background</div>
2032
</div>
2133
<script type="module">
2234
import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.esm.browser.min.js'

‎src/index.ts

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { getVueVersion, LazyCore } from './util.js'
1+
import { getVueVersion, LazyCore, error } from './util.js'
22
import { LazyOptions } from '../types/index.js'
33

44
export default {
@@ -7,7 +7,9 @@ export default {
77
const version = getVueVersion(Vue)
88
let config
99

10-
if (version === 2) {
10+
if (version < 2) {
11+
error('Support version 2.X and 3.X')
12+
} else if (version === 2) {
1113
config = {
1214
bind: lazy.bind.bind(lazy),
1315
update: lazy.update.bind(lazy),

‎src/util.ts

+50-16
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { LazyOptions, LazyElement } from '../types/index.js'
1+
import { LazyOptions, LazyBinding, LazyElement } from '../types/index.js'
22

33
export class LazyCore {
44
private useNative: boolean
@@ -10,7 +10,7 @@ export class LazyCore {
1010
this.useNative = options?.useNative ?? true
1111
this.rootMargin = options?.rootMargin ?? '200px'
1212
this.init()
13-
this.type = 'listener' // NOTE: test
13+
// this.type = 'listener' // NOTE: test
1414

1515
console.log(this);
1616
}
@@ -26,24 +26,46 @@ export class LazyCore {
2626
}
2727
}
2828

29-
bind(el: Element, { value }: { value: string }) {
30-
console.log('bind', value);
29+
bind(el: Element, binding: LazyBinding) {
30+
console.log('bind', binding.value);
3131

32-
!el.getAttribute('loading') && el.setAttribute('loading', 'lazy')
33-
this.update(el, { value })
32+
!el.hasAttribute('loading') && el.setAttribute('loading', 'lazy')
33+
this.update(el, binding)
3434
}
3535

36-
update(el: Element, { value }: { value: string }) {
37-
console.log('update', value);
36+
update(el: Element, { value, arg }: LazyBinding) {
37+
console.log('update', arg, value);
3838

39-
if (this.type === 'loading') {
40-
el.setAttribute('src', value)
41-
} else if (this.type === 'observer') {
42-
el.setAttribute('data-src', value)
43-
this.io?.observe(el)
44-
} else {
45-
console.log('TODO: ');
39+
if (arg) {
40+
if (['bg', 'background'].includes(arg)) {
41+
if (this.type === 'loading' || this.type === 'observer') {
42+
if (!this.io) {
43+
this.setObserver()
44+
}
45+
el.setAttribute('data-bg', value)
46+
this.io?.observe(el)
47+
} else {
48+
console.log('TODO: ');
49+
50+
el.setAttribute('data-bg', value)
51+
}
52+
} else {
53+
error('One of [v-lazy="URL", v-lazy:bg="URL", v-lazy:background="URL"]')
54+
}
55+
console.log(el.getAttribute('style.backgroundImage'));
4656

57+
} else {
58+
el.hasAttribute('src') && el.removeAttribute('src')
59+
if (this.type === 'loading') {
60+
el.setAttribute('src', value)
61+
} else if (this.type === 'observer') {
62+
el.setAttribute('data-src', value)
63+
this.io?.observe(el)
64+
} else {
65+
console.log('TODO: ');
66+
67+
el.setAttribute('data-src', value)
68+
}
4769
}
4870
}
4971

@@ -59,7 +81,15 @@ export class LazyCore {
5981
this.io = new IntersectionObserver(entries => {
6082
entries.forEach(item => {
6183
if (item.isIntersecting) {
62-
(item.target as LazyElement).src = (item.target as LazyElement).dataset.src
84+
const src = (item.target as LazyElement).dataset?.src
85+
const bg = (item.target as LazyElement).dataset?.bg
86+
87+
if (src) {
88+
(item.target as LazyElement).src = src
89+
}
90+
if (bg) {
91+
(item.target as LazyElement).style.backgroundImage = `url(${bg})`
92+
}
6393
this.io?.unobserve(item.target)
6494
}
6595
})
@@ -72,3 +102,7 @@ export class LazyCore {
72102
export function getVueVersion(Vue: any) {
73103
return Number(Vue.version.split('.')[0])
74104
}
105+
106+
export function error(msg: string) {
107+
console.error('[vue-lazy-loading error]: ' + msg);
108+
}

‎types/index.d.ts

+9-3
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,15 @@ export type LazyOptions = undefined | {
33
rootMargin?: string
44
}
55

6-
export interface LazyElement extends Element {
7-
src: string | null
6+
export interface LazyBinding {
7+
value: string
8+
arg?: 'bg' | 'background'
9+
}
10+
11+
export interface LazyElement extends HTMLElement {
12+
src: string
813
dataset: {
9-
src: string
14+
src?: string
15+
bg?: string
1016
}
1117
}

0 commit comments

Comments
 (0)