Skip to content

Commit 24b4362

Browse files
tolkingtolking
authored
Merge pull request #4 from tolking/dev
- suppert image-set - fix error on nuxt - remove v-lazy:background
2 parents 4aa360a + 4ae2d5a commit 24b4362

File tree

6 files changed

+78
-71
lines changed

6 files changed

+78
-71
lines changed

‎README.md

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,8 +48,11 @@ Vue.use(LazyLoading)
4848
<!-- Replace `srcset` with `v-lazy:set` or `v-lazy:srcset` -->
4949
<img v-lazy="'img.jpg'" v-lazy:set="'img.jpg 1000w, img-2x.jpg 2000w'" width="536" height="354" />
5050

51-
<!-- Replace `style.backgroundImage` with `v-lazy:bg` or `v-lazy:background` -->
51+
<!-- Replace `background-image` with `v-lazy:bg` -->
5252
<div v-lazy:bg="logo">background</div>
53+
54+
<!-- Replace `background-image: image-set` with `v-lazy:bgset` -->
55+
<div v-lazy:bgset="'url(bg.img) 1x, url(bg-2x.img) 2x'">background</div>
5356
</template>
5457

5558
<script>
@@ -80,7 +83,7 @@ Use the native image lazy-loading for the web
8083
8184
rootMargin for IntersectionObserver
8285
83-
## Load animation
86+
## Loading animation
8487
8588
Loading animation is not included by default. You can use it this way
8689

‎example/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
img {
1010
display: block;
1111
margin: 0 auto 10px;
12-
background-color: rosybrown;
12+
background: rgba(50, 50, 50, 0.3) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="white"><path opacity=".25" d="M16 0 A16 16 0 0 0 16 32 A16 16 0 0 0 16 0 M16 4 A12 12 0 0 1 16 28 A12 12 0 0 1 16 4"/><path d="M16 0 A16 16 0 0 1 32 16 L28 16 A12 12 0 0 0 16 4z"><animateTransform attributeName="transform" type="rotate" from="0 16 16" to="360 16 16" dur="0.8s" repeatCount="indefinite" /></path></svg>') center no-repeat;
1313
}
1414
.bg {
1515
display: block;
@@ -26,7 +26,7 @@
2626
</head>
2727
<body>
2828
<div id="app">
29-
<div v-lazy:bg="'https://picsum.photos/536/354?random'" class="bg">background</div>
29+
<div v-lazy:bg="'https://picsum.photos/536/354?random'" v-lazy:bgset="'url(https://picsum.photos/536/354?random) 1x, url(https://picsum.photos/1000/1000?random) 2x'" class="bg" style="box-shadow: 2px 3px 10px rgba(0,0,0,.3);">background</div>
3030
<img v-for="n in 20" :key="n" v-lazy="'https://picsum.photos/536/354?random=' + n" width="536" height="354">
3131
</div>
3232
<script type="module">

‎package.json

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-lazy-loading",
3-
"version": "1.0.1",
3+
"version": "1.0.2",
44
"description": "a vue plugin to better supporting lazy loading for image and iframe",
55
"main": "dist/index.js",
66
"type": "module",
@@ -16,9 +16,10 @@
1616
"keywords": [
1717
"vue",
1818
"lazy",
19+
"lazy-loading",
1920
"img",
2021
"iframe",
21-
"loading"
22+
"background-image"
2223
],
2324
"author": "tolking <[email protected]>",
2425
"license": "MIT",

‎src/util.ts

Lines changed: 65 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,12 @@ import { LazyOptions, LazyBinding, LazyElement } from '../types/index.js'
33
export class LazyCore {
44
private useNative: boolean
55
private rootMargin: string
6-
private type: 'loading' | 'observer' | 'none' = 'loading'
6+
private type?: 'loading' | 'observer' | 'none'
77
private io?: IntersectionObserver
88

99
constructor(options: LazyOptions) {
1010
this.useNative = options?.useNative ?? true
1111
this.rootMargin = options?.rootMargin ?? '200px'
12-
this.init()
1312
}
1413

1514
private init() {
@@ -25,8 +24,9 @@ export class LazyCore {
2524
}
2625

2726
bind(el: Element, binding: LazyBinding) {
27+
!this.type && this.init()
2828
binding.arg !== 'bg' &&
29-
binding.arg !== 'background' &&
29+
binding.arg !== 'bgset' &&
3030
!el.hasAttribute('loading') &&
3131
el.setAttribute('loading', 'lazy')
3232
this.update(el, binding)
@@ -36,75 +36,66 @@ export class LazyCore {
3636
if (oldValue === value) return
3737
const isEager = el.getAttribute('loading') === 'eager'
3838

39-
if (arg) {
40-
switch (arg) {
41-
case 'bg':
42-
case 'background':
43-
if ((el as LazyElement).style.backgroundImage) {
44-
(el as LazyElement).style.backgroundImage = ''
45-
}
46-
if (!isEager && (this.type === 'loading' || this.type === 'observer')) {
47-
if (!this.io) {
48-
this.setObserver()
49-
}
50-
el.setAttribute('data-bg', value)
51-
this.io?.observe(el)
52-
} else {
53-
(el as LazyElement).style.backgroundImage = `url(${value})`
54-
}
55-
break;
56-
case 'set':
57-
case 'srcset':
58-
el.hasAttribute('srcset') && el.removeAttribute('srcset')
59-
if (this.type === 'loading') {
60-
el.setAttribute('srcset', value)
61-
} else if (!isEager && this.type === 'observer') {
62-
el.setAttribute('data-srcset', value)
63-
this.io?.observe(el)
64-
} else {
65-
el.setAttribute('srcset', value)
66-
}
67-
break
68-
default:
69-
error('One of [v-lazy="URL", v-lazy:bg="URL", v-lazy:background="URL", v-lazy:set="URL", v-lazy：srcset="URL"]')
70-
break;
71-
}
72-
} else {
73-
el.hasAttribute('src') && el.removeAttribute('src')
74-
if (this.type === 'loading') {
75-
el.setAttribute('src', value)
76-
} else if (!isEager && this.type === 'observer') {
77-
el.setAttribute('data-src', value)
78-
this.io?.observe(el)
79-
} else {
80-
el.setAttribute('src', value)
81-
}
39+
switch (arg) {
40+
case undefined:
41+
el.hasAttribute('src') && el.removeAttribute('src')
42+
if (!isEager && this.type === 'observer') {
43+
el.setAttribute('data-src', value)
44+
this.io!.observe(el)
45+
} else {
46+
el.setAttribute('src', value)
47+
}
48+
break
49+
case 'set':
50+
case 'srcset':
51+
el.hasAttribute('srcset') && el.removeAttribute('srcset')
52+
if (!isEager && this.type === 'observer') {
53+
el.setAttribute('data-srcset', value)
54+
this.io!.observe(el)
55+
} else {
56+
el.setAttribute('srcset', value)
57+
}
58+
break
59+
case 'bg':
60+
if (!isEager && (this.type === 'loading' || this.type === 'observer')) {
61+
!this.io && this.setObserver()
62+
el.setAttribute('data-bg', value)
63+
this.io!.observe(el)
64+
} else {
65+
setStyle(el, 'bg', value)
66+
}
67+
break;
68+
case 'bgset':
69+
if (!isEager && (this.type === 'loading' || this.type === 'observer')) {
70+
!this.io && this.setObserver()
71+
el.setAttribute('data-bgset', value)
72+
this.io!.observe(el)
73+
} else {
74+
setStyle(el, 'bgset', value)
75+
}
76+
break;
77+
default:
78+
error('One of v-lazy, v-lazy:set, v-lazy:srcset, v-lazy:bg, v-lazy:bgset')
79+
break;
8280
}
8381
}
8482

8583
unbind(el: Element) {
86-
if (this.type === 'observer') {
87-
this.io?.unobserve(el)
88-
}
84+
this.type === 'observer' && this.io!.unobserve(el)
8985
}
9086

9187
private setObserver() {
9288
this.io = new IntersectionObserver(entries => {
9389
entries.forEach(item => {
9490
if (item.isIntersecting) {
9591
const el = (item.target as LazyElement)
96-
const { src, srcset, bg } = getDataset(el)
97-
98-
if (src) {
99-
el.src = src
100-
}
101-
if (srcset) {
102-
el.srcset = srcset
103-
}
104-
if (bg) {
105-
el.style.backgroundImage = `url(${bg})`
106-
}
107-
this.io?.unobserve(item.target)
92+
const { src, srcset, bg, bgset } = getDataset(el)
93+
94+
bg && setStyle(el, 'bg', bg)
95+
bgset && setStyle(el, 'bgset', bgset)
96+
src && el.setAttribute('src', src)
97+
srcset && el.setAttribute('srcset', srcset)
98+
this.io!.unobserve(item.target)
10899
}
109100
})
110101
}, {
@@ -126,8 +117,8 @@ function getDataset(el: LazyElement) {
126117
const key = name.split('-')[1]
127118
const value = el.attributes[i].nodeValue || undefined
128119

129-
if (['src', 'srcset', 'bg'].indexOf(key) !== -1) {
130-
obj[key as 'src' | 'srcset' | 'bg'] = value
120+
if (['src', 'srcset', 'bg', 'bgset'].indexOf(key) !== -1) {
121+
obj[key as 'src' | 'srcset' | 'bg' | 'bgset'] = value
131122
}
132123
}
133124
}
@@ -139,6 +130,17 @@ export function getVueVersion(Vue: any) {
139130
return Number(Vue.version.split('.')[0])
140131
}
141132

133+
export function setStyle(el: Element, type: 'bg' | 'bgset', value: string) {
134+
const oldStyle = el.getAttribute('style') || ''
135+
const style =
136+
type === 'bg'
137+
? `background-image: url(${value});`
138+
: `background-image: -webkit-image-set(${value}); background-image: image-set(${value});`
139+
const newStyle = oldStyle + style
140+
141+
el.setAttribute('style', newStyle)
142+
}
143+
142144
export function error(msg: string) {
143145
process.env.NODE_ENV === 'development' &&
144146
console.error('[vue-lazy-loading error]: ' + msg);

‎tsconfig.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"compilerOptions": {
33
"target": "ES5",
44
"module":"ES2015",
5-
"lib": ["ES2015", "ES2016", "ES2017", "DOM"],
5+
"lib": ["ESNext", "DOM"],
66
"outDir": "dist",
77
"strict": true,
88
"declaration": true,

‎types/index.d.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export type LazyOptions = undefined | {
66
export interface LazyBinding {
77
oldValue: string
88
value: string
9-
arg?: 'bg' | 'background' | 'set' | 'srcset'
9+
arg?: 'set' | 'srcset' | 'bg' | 'bgset'
1010
}
1111

1212
export interface LazyElement extends HTMLElement {
@@ -16,5 +16,6 @@ export interface LazyElement extends HTMLElement {
1616
src?: string
1717
srcset?: string
1818
bg?: string
19+
bgset?: string
1920
}
2021
}

0 commit comments

Comments
 (0)