/
lazy-withref.js
61 lines (58 loc) · 1.35 KB
/
lazy-withref.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
import React, { useRef } from 'react'
import Image from 'next/image'
const Page = () => {
const myRef = useRef(null)
return (
<>
<div
ref={myRef}
style={{
width: '100%',
height: '400px',
position: 'relative',
overflowY: 'scroll',
}}
>
<div style={{ width: '400px', height: '600px' }}>hello</div>
<div style={{ width: '400px', position: 'relative', height: '600px' }}>
<Image
id="myImage1"
src="/test.jpg"
alt="mine"
width="400"
height="400"
lazyBoundary="1500px"
/>
<Image
lazyRoot={myRef}
id="myImage2"
src="/test.png"
alt="mine"
width="400"
height="400"
lazyBoundary="1800px"
/>
<Image
lazyRoot={myRef}
id="myImage3"
src="/test.svg"
alt="mine"
width="400"
height="400"
lazyBoundary="1800px"
/>
<Image
lazyRoot={myRef}
id="myImage4"
src="/test.webp"
alt="mine"
width="400"
height="400"
lazyBoundary="200px"
/>
</div>
</div>
</>
)
}
export default Page