@blocklet/editor 2.5.47 → 2.5.48
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -363,6 +363,7 @@ function formatFileSize(size) {
|
|
|
363
363
|
function SimpleImageComponent({ src, altText = '', width, height, }) {
|
|
364
364
|
const [loaded, setLoaded] = useState(false);
|
|
365
365
|
const imageRef = useRef(null);
|
|
366
|
+
const containerRef = useRef(null);
|
|
366
367
|
const hasFixedSize = typeof width === 'number' && typeof height === 'number' && width > 0 && height > 0;
|
|
367
368
|
const { maxContentWidth } = useEditorConfig();
|
|
368
369
|
const displaySrc = useMemo(() => {
|
|
@@ -383,6 +384,26 @@ function SimpleImageComponent({ src, altText = '', width, height, }) {
|
|
|
383
384
|
return src;
|
|
384
385
|
}
|
|
385
386
|
}, [src, maxContentWidth]);
|
|
387
|
+
// 当图片出现在 viewport 中时，预加载原图
|
|
388
|
+
useEffect(() => {
|
|
389
|
+
if (!containerRef.current || displaySrc === src)
|
|
390
|
+
return;
|
|
391
|
+
const observer = new IntersectionObserver((entries) => {
|
|
392
|
+
entries.forEach((entry) => {
|
|
393
|
+
if (entry.isIntersecting) {
|
|
394
|
+
const preloadImg = new Image();
|
|
395
|
+
preloadImg.src = src;
|
|
396
|
+
observer.disconnect();
|
|
397
|
+
}
|
|
398
|
+
});
|
|
399
|
+
}, {
|
|
400
|
+
rootMargin: '50px',
|
|
401
|
+
});
|
|
402
|
+
observer.observe(containerRef.current);
|
|
403
|
+
return () => {
|
|
404
|
+
observer.disconnect();
|
|
405
|
+
};
|
|
406
|
+
}, [src, displaySrc]);
|
|
386
407
|
useMediumZoom(imageRef);
|
|
387
408
|
const renderSkeleton = () => {
|
|
388
409
|
if (hasFixedSize) {
|
|
@@ -390,7 +411,7 @@ function SimpleImageComponent({ src, altText = '', width, height, }) {
|
|
|
390
411
|
}
|
|
391
412
|
return _jsx(Skeleton, { variant: "rectangular", animation: "wave", sx: { width: 300, height: 200, borderRadius: 1 } });
|
|
392
413
|
};
|
|
393
|
-
return (_jsxs(_Fragment, { children: [!loaded && renderSkeleton(), _jsx(Box, { sx: {
|
|
414
|
+
return (_jsxs(_Fragment, { children: [!loaded && renderSkeleton(), _jsx(Box, { ref: containerRef, sx: {
|
|
394
415
|
p: 1,
|
|
395
416
|
border: 1,
|
|
396
417
|
borderColor: 'divider',
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@blocklet/editor",
|
|
3
|
-
"version": "2.5.
|
|
3
|
+
"version": "2.5.48",
|
|
4
4
|
"main": "lib/index.js",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"publishConfig": {
|
|
@@ -73,7 +73,7 @@
|
|
|
73
73
|
"ufo": "^1.5.4",
|
|
74
74
|
"url-join": "^4.0.1",
|
|
75
75
|
"zustand": "^4.5.5",
|
|
76
|
-
"@blocklet/pdf": "2.5.
|
|
76
|
+
"@blocklet/pdf": "2.5.48"
|
|
77
77
|
},
|
|
78
78
|
"devDependencies": {
|
|
79
79
|
"@babel/core": "^7.25.2",
|