基于.NetCore开发博客项目 StarBlog - (20) 图片显示优化

jh035512

于 2022-11-30 09:53:08 发布

阅读量596

点赞数

文章标签： .netcore 前端 javascript

本文链接：https://blog.youkuaiyun.com/jh035512/article/details/128109821

版权

本文介绍了如何优化博客中的图片加载速度，包括解决图片瀑布流显示错位的问题，通过imagesLoaded库确保图片加载完成后再渲染，以及采用Magick.NET库生成Progressive JPEG格式的缩略图，提供更好的预加载体验。同时，文章对比了ImageSharp.Web中间件的优缺点，并讨论了可能的性能改进方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

我的服务器带宽比较高，博客部署在上面访问的时候几乎没感觉有加载延迟，就没做图片这块的优化，不过最近有小伙伴说博客的图片加载比较慢，那就来把图片优化完善一下吧~

目前有两个地方需要完善

图片瀑布流
图片缩略图

图片瀑布流

关于瀑布流之前的文章有介绍：基于.NetCore开发博客项目 StarBlog - (10) 图片瀑布流

不过当时直接套用的 Bootstrap5 例子代码，有偶尔显示错位的bug

我又去看了一下 masonry-layout 的官网，找到这个bug的原因：瀑布流在图片还没加载完成就渲染好了，而图片的大小不一，造成了最终显示错位。

解决方法也很简单，用 imagesLoaded 这个库，它有个事件，在全部图片加载完成后触发，在事件响应里面再渲染一次瀑布流，就搞定了~

masonry-layout 这个库里面不附带 imagesLoaded ，要用必须自己安装。

我用的版本是 5.0.0

yarn add imagesloaded

在 StarBlog.Web 的 gulpfile.js 里配置一下路径

// 使用 npm 下载的前端组件，自定义存放位置
const customLibs = [
  // ...
  {name: 'imagesloaded&#

最低0.47元/天解锁文章