如何在 Chrome 处于离线状态时显示图片

Question

我正在尝试在Chrome浏览器离线时显示图像，而当它在线时显示网页。

我将图像传输到 base64 数据并尝试将其加载到 img 标签中，但是 base64 数据太大。

有没有办法在浏览器离线时显示图像？

import imageToBase64 from "image-to-base64";
const Home = () => {
const [isOnline, setIsOnline] = useState(true);
// Checks to see if the browser has internet connection or not
window.addEventListener("online", () => setIsOnline(true));
window.addEventListener("offline", () => setIsOnline(false));
//Link to the image 
const idleImgUrl = `${window.location.href}${coffeeMachine}`;
//convert image to base64 and save to local storage
imageToBase64(idleImgUrl)
.then(res => {
window.localStorage.setItem("idleImgData", res);
})
.catch(err => {
console.log(err);
});
return (
isOnline 
? (<div>The web page to show</div>) 
:
// <p> tag shows 
<p>The browser is offline now</p> 
// img tag does not show
(<img src={window.localStorage.getItem("idleImgData"} />)
);
};

任何帮助将不胜感激...

Answer 1

诀窍是在用户代理仍有互联网连接时加载图像。在呈现<img>标记之前，不会下载图像。然后，缓存的图像可以在以后显示而不会出现问题。

我写了一个简短create-react-app的例子来说明。

import React, { useState, useEffect, useCallback } from 'react';
const App = () => {
const [online, setOnline] = useState(true);
const onlineListener = useCallback(() => setOnline(true), [setOnline]);
const offlineListener = useCallback(() => setOnline(false), [setOnline]);
useEffect(() => {
window.addEventListener('online', onlineListener);
window.addEventListener('offline', offlineListener);
return () => {
window.removeEventListener('online', onlineListener);
window.removeEventListener('offline', offlineListener);
};
}, [onlineListener, offlineListener]);
return (
<div className="App">
<img
style={online ? { display: 'none' } : undefined}
src="TODO"
alt="no internet"
/>
</div>
);
};
export default App;

当用户代理失去连接时，它会显示一个图像，并在连接恢复时再次隐藏它。如果一开始就切断连接，它显然不起作用，但在这种情况下，用户如何加载您的应用程序🤔？

Answer 2

如果您处于离线状态，您甚至可能无法首先加载您的 react bundle.js 文件，并且对此无能为力。

另外，在这种情况下，我没有看到将其保留在本地存储中的优势。如果大小在这里很重要，浏览器可能会缓存它。

如果用户能够加载您的捆绑包，您可以将 b64 硬编码为变量直接存储在您的捆绑包中，或者在 componentDidMount 上启动 ajax(使用 useEffect，因为您使用钩子(。

const Home = () => {
const [base64Img, setBase64Img] = useState();
const [isOnline, setIsOnline] = useState(true);
const setOnline = () => setIsOnline(true);
const setOffline = () => setIsOnline(false);
useEffect(() => {
initiateB64Retrieval().then((b64) => setBase64Img(b64));
window.addEventListener('online', setOnline);
window.addEventListener('offline', setOffline);
return () => {
window.removeEventListener('online', setOnline);
window.removeEventListener('offline', setOffline);
}
}, [])
...
}

删除事件侦听器的好习惯始终存在。请注意，如果使用匿名函数传递或使用 .bind(( 时，则无法删除事件侦听器，因为它为函数创建了另一个引用。