重置 gif 动画
当浏览器渲染img 时，src 属性中指定的源被缓存到内存中以备将来重用。这可以提高页面加载/重新加载的速度，并减少网络上的负载。这种行为几乎适合所有人，因为实际上，这是最理想和最需要的选择。
但是，与往常一样，也有例外。我想出了一个基于 dataUrl 的动画更新选项，它解决了几个问题。
已解决的问题：
-
需要显示带有动画的 gif 图像，没有循环 (loop = 1)，可能具有相同的 src。但是当出现这样一张图片时，它必须播放动画而不改变具有相同src的其他图片的动画。同一张图片应该只从服务器加载一次。 Stackoverflow
-
重置 gif 动画。
-
悬停时开始动画
重置 src 属性
如果我们使用清除图像的src 属性的解决方案，那么具有相同来源的所有图像都将重放它们的动画。不幸的是，我仍然不完全理解为什么会发生这种情况，但它会干扰正确的工作。
缺点
优点
随机查询修改url
此解决方案包括在src 属性的末尾添加一个随机查询参数，以便所有图像都有不同的来源，因此它们将彼此独立地进行动画处理。有一个大胖子NO：这会导致不断向服务器请求下载图片，因此它们将不再被缓存。而如果我们需要展示 100 张相同的图片，那么就会有 100 个请求向服务器发送。粗暴而艰难，但它总是有效的。
缺点
优点
修改dataUrl（建议解决方案）
数据 URL，以 data: 为前缀的 URL 方案，允许内容创建者在文档中嵌入小文件。在 WHATWG 停用该名称之前，它们以前被称为“数据 URI”。
MDN
本文档中的 dataUrl 结构：
data:[<mediatype>][;base64],<data>
这就是specification中的指示方式：
dataurl := "data:" [ mediatype ] [ ";base64" ] "," data
mediatype := [ type "/" subtype ] *( ";" parameter )
data := *urlchar
parameter := attribute "=" value
如果您仔细查看mediatype 的描述，那么那里会显示一些奇怪的 parameter。但是，还有一个specification：
attribute := token
; Matching of attributes
; is ALWAYS case-insensitive.
value := token / quoted-string
token := 1*<any (US-ASCII) CHAR except SPACE, CTLs, or tspecials>
tspecials := "(" / ")" / "<" / ">" / "@" /
"," / ";" / ":" / "\" / <">
"/" / "[" / "]" / "?" / "="
; Must be in quoted-string,
; to use within parameter values
可以看出，我们可以指定任何参数，主要是满足上面提出的要求！
因此，我们可以在 mediatype 中嵌入一个额外的属性，它不会对图片产生任何影响，但数据 url 会与同一张图片不同。
广义算法：
- 我们通过常规请求加载图像，并从 blob 中创建的 dataUrl 中删除元数据。
fetch("https://cdn140.picsart.com/330970106009201.gif").then(async (res) => {
const blob = await res.blob();
const reader = new FileReader();
reader.onload = (ev) => {
// It would be reasonable to remove metadata to the point!
// But for simplicity, I'm using this implementation.
const dataUrl = ev.currentTarget.result.replace(
"data:image/gif;base64",
""
);
};
reader.readAsDataURL(blob);
});
-
使用src 属性"src=data:image/gif;base64;${Math.random()}${dataUrl}" 创建/编辑img 元素
-
就是这样！
Vanila JS 示例
const url = "https://cdn140.picsart.com/330970106009201.gif";
function loadImage(src) {
fetch(src)
.then((res) => res.blob())
.then(async(blob) => {
const reader = new FileReader();
reader.onload = (ev) => {
const dataUrl = ev.currentTarget.result.replace("data:image/gif;base64", "")
const container = document.getElementById("container");
while (container.firstChild) {
container.firstChild.remove()
}
for (let i = 0; i < 6; i++) {
const img = document.createElement("img");
img.setAttribute("src", `data:image/gif;base64;gif-id=${Date.now()}${dataUrl}`)
container.appendChild(img);
img.addEventListener('click', ev => {
img.setAttribute("src", `data:image/gif;base64;gif-id=${Date.now()}${dataUrl}`)
})
}
};
reader.readAsDataURL(blob);
});
}
loadImage(url);
function updateImage() {
const newSrc = document.getElementById("image-src");
loadImage(document.getElementById("image-src").value);
}
#main {
display: flex;
flex-direction: column;
gap: 5px;
}
img {
width: 128px;
height: 128px;
padding: 5px;
}
<div id="main">
<label>Change gif url if current will become unavailable </label>
<input id="image-src" value="https://cdn140.picsart.com/330970106009201.gif"></input>
<button onclick="updateImage()">Update image source attribute</button>
<span>Click to reset!</span>
<div id="container">
</div>
</div>
示例反应
import React, { useState, useRef } from "react";
function App() {
const [stars, setStars] = useState(0);
const [data, setData] = useState(null);
const ref = useRef(null);
React.useEffect(() => {
fetch("https://cdn140.picsart.com/330970106009201.gif")
.then((res) => res.blob())
.then(async (text) => {
const reader = new FileReader();
reader.onload = (ev) => {
setData(ev.currentTarget.result.replace("data:image/gif;base64", ""));
};
reader.readAsDataURL(text);
});
}, []);
return (
<React.Fragment>
<p onClick={() => setStars((s) => s + 1)}>+</p>
{data &&
new Array(stars).fill().map((s, ind) => {
return <Star src={data} key={ind}></Star>;
})}
<p onClick={() => setStars((s) => (s === 0 ? 0 : s - 1))}>-</p>
</React.Fragment>
);
}
export function Star(props) {
const [id] = useState(Math.random());
return (
<img
className="icon"
src={`data:image/gif;base64;gif-id=${id}` + props.src}
alt="animated star"
/>
);
}
export default App;