我在渲染大文件大小的图像时遇到了问题.当我上传了很多大文件大小的图片并展示它们时,它变得非常滞后.

我的问题是:

最理想的方式是后端应该提供一个非常小的图片文件大小的url? 或者前端可以使用Canvas API来做到这一点?

你能给我解释一下吗?谢谢

推荐答案

如果你有一堆缩略图要显示,这些缩略图的源图像绝对不应该是原始的全尺寸图像.如果这些图像很大,则无论您在客户端渲染how个图像,客户端都需要很长时间来下载它们.

在确定要向客户端显示的图像时,服务器上应该有两个版本:

  • 缩略图版本-分辨率低、文件大小小,易于一次下载和渲染多个
  • 全尺寸版本,当用户想要放大其中之一时下载

这可能是全尺寸版本should not必须是原始图像.例如,如果原始图像是20MB(是的,它们可以存在),您不会想要给客户端带来负担.因此,您可能希望在服务器上同时针对缩略图版本和"完整"版本执行大小调整和优化--这足以保证在客户端try 放大和完全加载全尺寸图像之间没有太多延迟.

Javascript相关问答推荐

使用JavaScript更改json值顺序

Angular 拦截器错误处理删除方法问题

事件错误:类型错误:无法读取未定义的属性(读取stopPropagation)

如何避免使用ajax在Vue 3合成API中重定向

使用redux-toolet DelivercThunks刷新访问令牌

按钮未放置在html dis位置

网页自检测外部元素无法加载

InDesign—创建一个独立的窗口,在文档中进行更正时保持打开状态

当点击注册页面上的注册按钮时,邮箱重复

在拖放时阻止文件打开

如何添加绘图条形图图例单击角形事件

在open shadow—root中匹配时,使用jQuery删除一个封闭的div类

Html文件和客户端存储的相关问题,有没有可能?

为什么123[';toString';].long返回1?

查询参数未在我的Next.js应用路由接口中定义

是否可以在Photoshop CC中zoom 路径项?

try 将Redux工具包与MUI ToggleButtonGroup组件一起使用时出错

Django导入问题,无法导入我的应用程序,但我已在设置中安装了它

JAVASCRIPT SWITCH CASE语句:当表达式为';ALL';

如何在Java脚本中并行运行for或任意循环的每次迭代