javascript - 图像在悬停之前无法完全加载
问题描述
在我的 React 网站上,我有一个我过去项目的屏幕截图的垂直列表,当页面第一次加载图像加载时,但在用户将鼠标悬停在它们之前只是一小部分。
一旦将鼠标悬停在图像上,就会展开到它们的全尺寸,然后就可以正常工作了。我希望防止用户将鼠标悬停在它们上方以使其正确加载。
该列表是从数组映射的
items: [
{
image: "./images/spokanepowerstroke.jpg",
title: "Spokane Power Stroke",
link: "/powerstroke",
},
...
]
<Col md="auto">
{this.state.items.map(({ title, image, link }) => (
<motion.div className="thumbnail" variants={thumbnailVariants}>
{" "}
<motion.div
key={title}
className="frame"
whileHover="hover"
variants={frameVariants}
transition={transition}
>
<p className="projectstitle">{title}</p>
<Link to={link}>
<motion.img
src={image}
alt={image}
variants={imageVariants}
transition={transition}
/>
</Link>
</motion.div>
</motion.div>
))}
</Col>
悬停和过渡效果由成帧器运动控制。
const transition = { duration: 0.5, ease: [0.43, 0.13, 0.23, 0.96] };
const thumbnailVariants = {
initial: { scale: 0.9, opacity: 0 },
enter: { scale: 1, opacity: 1, transition },
exit: {
scale: 0.5,
opacity: 0,
transition: { duration: 1.5, ...transition },
},
};
const frameVariants = {
hover: { scale: 0.95 },
};
const imageVariants = {
hover: { scale: 1.1 },
};
const changepage = {
in: {
opacity: 1,
},
out: {
opacity: 0,
},
};
const pagetransition = {
duration: 1.5,
};
我查看了我的代码,并没有发现为什么图像只是部分加载。该网站可在此处查看网站
包含所有代码的 Github 存储库在此处Github
(项目页面)
提前感谢您的专业知识。
解决方案
在您的App.css
代码中,更改此:
.thumbnail img { width: 46vw; height: 100%; }
至height:auto;
% 高度通常会拉伸/扭曲图像,如果你想保持纵横比使用auto
也可能在代码中的 img 元素上设置宽度和高度可能有助于防止大小问题,因为现在浏览器不知道图像实际上有多大,并且因为它是通过 React JS 加载的,而不是在 HTML 中首先提供给它在悬停动画强制重新绘制之前可能无法计算它。
推荐阅读
- java - 如何使用 Netty 连接到 docker.sock?
- ios - 无法看懂哨兵异常报告
- sql - 不跨越多行的条目的 SQL 查询
- c - ASCII 转换成字符
- amazon-iam - 跨账户访问 SSM 参数
- python-3.x - 正则表达式:如果没有被 y 包围,则匹配 x
- python - 绘图角落的注释忽略“alpha”参数
- sql-server - 如何优化 netTiers 数据访问性能?
- yaml - GitHub Actions - 您的 yaml 语法有错误
- powershell - 如何正确格式化 PSObject 以传递给 InvokeRest 方法的 PUT 方法