Ban*_*ahu 9 html javascript frontend node.js graphicsmagick
我已使用Node GM在后端将上传的图像转换为渐进式图像并存储在文件中。之后，我想在前端显示转换后的渐进图像。我的问题是当我渲染该图像时，它逐行渲染。但是与正常图像相比，这些渐进图像首先被加载。
但是我想将图像从模糊加载到正常。我怎样才能做到这一点？
在前端，我使用这样的HTML编写了代码。
<html>
<head></head>
<body>
<h1>Hello</h1>
<img style="width:50%" src="https://www.dropbox.com/s/p57ik1kl04k1iax/progressive3.jpg?raw=1" />
<img style="width:30%" src="https://www.dropbox.com/s/3nnc03tfwxrpu5q/Porsche-GT2-4K-UHD-Wallpaper.jpg?raw=1" />
</body>
</html>
小智 2
起初我不明白为什么这似乎是作为基线图像加载的，但使用 Chrome 的开发工具、放大和限制连接向我展示了发生了什么。
您的渐进式图像将以您期望的方式加载，首先显示低分辨率图像，然后逐渐显示更多细节。第一遍逐行加载，因此其行为类似于基线图像。
问题在于图像太大，宽度超过 5000 像素，以至于在浏览器中调整图像大小后，下载初始图像后图像质量没有明显改善。
为了使模糊到清晰的效果变得明显，图像的像素尺寸需要小得多。如果它嵌入到网页上，请将其大小调整为您期望查看的最大尺寸，因此在 1920 宽屏幕上，屏幕宽度为 50% 时，您需要将其大小调整为 960 像素。现在，文件大小也会小得多，图像下载速度也会更快，因此除非您的连接速度非常慢，否则 jpeg 的渐进加载可能仍然不明显。
如果您需要可供用户打印或其他用途的全尺寸图像，那么您始终可以在页面上添加单独的链接以及有关文件大小的警告。
例如。
<a href="https://www.dropbox.com/s/p57ik1kl04k1iax/progressive3.jpg?raw=1">Print quality image (11.1 MB)</a>
| 归档时间： |
|
| 查看次数： |
166 次 |
| 最近记录： |