基于.NetCore开发博客项目 StarBlog - (20) 图片显示优化
1前言
我的服务器带宽比较高淘宝网图片不显示 ,博客部署在上面访问的时候几乎没感觉有加载延迟,就没做图片这块的优化,不过最近有小伙伴说博客的图片加载比较慢,那就来把图片优化完善一下吧~
目前有两个地方需要完善
图片瀑布流
图片缩略图
2
图片瀑布流
关于瀑布流之前的文章有介绍: 基于.NetCore开发博客项目 StarBlog - (10) 图片瀑布流
不过当时直接套用的 Bootstrap5 例子代码淘宝网图片不显示 ,有偶尔显示错位的bug
我又去看了一下 masonry-layout 的官网,找到这个bug的原因:瀑布流在图片还没加载完成就渲染好了,而图片的大小不一,造成了最终显示错位淘宝网图片不显示 。
解决方法也很简单淘宝网图片不显示 ,用 imagesLoaded 这个库,它有个事件,在全部图片加载完成后触发,在事件响应里面再渲染一次瀑布流,就搞定了~
masonry-layout 这个库里面不附带 imagesLoaded ,要用必须自己安装淘宝网图片不显示 。
淘宝网图片不显示 我用的版本是 5.0.0
yarn add imagesloaded
在 StarBlog.Web 的 gulpfile.js 里配置一下路径
// 使用 npm 下载的前端组件淘宝网图片不显示 ,自定义存放位置
constcustomLibs = [
{ name: 'imagesloaded', dist: './node_modules/imagesloaded/*.js'},
然后执行 gulp move
接着淘宝网图片不显示 ,修改一下图片页面 StarBlog.Web/Views/Photography/Index.cshtml
引入 js 依赖,我这里还用了 environment tag helper,可以根据不同的环境引入不同的文件淘宝网图片不显示 。在开发环境引入完整 js 文件,生产环境引入 ``*.min` 文件。
@section bottom {
<environment include= "Development">
< src= "~/lib/jquery/dist/jquery.js"></>
< src= "~/lib/masonry-layout/dist/masonry.pkgd.js"></>
< src= "~/lib/imagesloaded/imagesloaded.pkgd.js"></>
</environment>
<environment exclude= "Development">
< src= "~/lib/jquery/dist/jquery.min.js"></>
< src= "~/lib/masonry-layout/dist/masonry.pkgd.min.js"></>
< src= "~/lib/imagesloaded/imagesloaded.pkgd.min.js"></>
</environment>
< src= "~/js/photo.js"></>
把图片列表部分的代码改一下
<div id= "photo-grid"class= "row">
@ foreach( varphoto inModel.Photos) {
<div class= "col-sm-6 col-lg-4 mb-4 grid-item">
< partialname= "Widgets/PhotoCard"model= "photo"/>
</div>
</div>
然后是 js/photo.js 里的 js 代码
// init Masonry
let$grid = $( '#photo-grid').masonry({
itemSelector: '.grid-item',
percentPosition: true,
// layout Masonry after each image loads
$grid.imagesLoaded.progress( function( ) {
$grid.masonry( 'layout');
搞定~
3图片缩略图
一开始淘宝网图片不显示 我用的是 SixLabors.ImageSharp.Web 这个库
挺方便的淘宝网图片不显示 ,以中间件的形式使用
通过 Nuget 安装之后淘宝网图片不显示 ,在 program.cs 里配置一下
// 注册服务
builder.Services.AddImageSharp;
// 添加中间件
app.UseImageSharp;
之后就可以在任意图片文件的地址后面加上 width=xxx&format=xxx 这样的参数来实现调整大小和转换格式淘宝网图片不显示 了~
图片列表的每个图片我做成了一个 partial view 组件淘宝网图片不显示 ,在 StarBlog.Web/Views/Shared/Widgets/PhotoCard.cshtml 这个文件
要把这个改成缩略图淘宝网图片不显示 ,只需要修改一下 img 元素
现在每个图片缩略图宽度300(宽度自适应)淘宝网图片不显示 ,格式转换成 webp
<img class= "bd-placeholder-img card-img-top"src= "/media/@Model.FilePath?width=300&format=webp"alt= "">
这个中间件还有很多其他参数可以设置淘宝网图片不显示 ,我只用到两个,详情可以看文档:
4Progressive JPEG
本来用 ImageSharp.Web 中间件已经够好淘宝网图片不显示 了
但还有一点美中不足淘宝网图片不显示 ,就是它不支持生成 progressive JPEG 图片,这样就没办法在加载图片的时候先显示一个模糊的轮廓,再逐渐变清晰,而是从上到下一行一行加载,不好看~
所以,我用了 Magick.NET 这个库来实现生成 progressive JPEG 格式的图片淘宝网图片不显示 。
这个库有三种版本:Q8, Q16, Q16-HDRI
根据官网文档淘宝网图片不显示 ,我选择了它推荐的 Q8 版本,性能最好 (图片质量无所谓了)
使用 nuget 安装 Magick.NET-Q8-AnyCPU 这个库
修改 StarBlog.Web/Services/PhotoService.cs
现在淘宝网图片不显示 我要来写一个生成缩略图的方法
///<summary>
///生成Progressive JPEG缩略图 (使用 MagickImage)
///</summary>
publicasyncTask< byte[]> GetThumb( stringid, intwidth= 300) {
varphoto = await_photoRepo.Where(a => a.Id == id).FirstAsync;
using( varimage = newMagickImage(GetPhotoFilePath(photo))) {
image.Format = MagickFormat.Pjpeg;
image.Resize(width, 0);
returnimage.ToByteArray;
接着再写个接口
编辑 StarBlog.Web/Apis/PhotoController.cs
[ ") ]
publicasyncTask<IActionResult> GetThumb( stringid, [FromQuery] intwidth = 300) {
vardata = await_photoService.GetThumb(id, width);
returnnewFileContentResult(data, "image/jpeg");
搞定淘宝网图片不显示 。
现在只需要访问 /Api/Photo/{图片ID}/Thumb?width=300 这个地址淘宝网图片不显示 ,就可以生成 progressive JPEG 格式的缩略图了~
最后再来改造一下 StarBlog.Web/Views/Shared/Widgets/PhotoCard.cshtml 组件
<img class= "bd-placeholder-img card-img-top"alt= ""
src= "@Url.Action("GetThumb ", "Photo ", new {id = Model.Id, width = 300})">
okk~
5小结
相比起 ImageSharp.Web 中间件自带缓存的特性,我这个自己写的缩略图方法是比较粗糙的,而且每次请求都是动态生成,会给服务器带来一定压力淘宝网图片不显示 。
不过它没有 Progressive JPEG 呀淘宝网图片不显示 ,这个功能缺失真的太难受了,只能期待它早日实现这个功能吧~
不然就只能淘宝网图片不显示 我自己来实现缓存功能提高性能了~
6系列文章
基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客淘宝网图片不显示 ?
基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目
基于.NetCore开发博客项目 StarBlog - (3) 模型设计
基于.NetCore开发博客项目 StarBlog - (4) markdown博客批量导入
基于.NetCore开发博客项目 StarBlog - (5) 开始搭建Web项目
基于.NetCore开发博客项目 StarBlog - (6) 页面开发之博客文章列表
基于.NetCore开发博客项目 StarBlog - (7) 页面开发之文章详情页面
基于.NetCore开发博客项目 StarBlog - (8) 分类层级结构展示
基于.NetCore开发博客项目 StarBlog - (9) 图片批量导入
基于.NetCore开发博客项目 StarBlog - (10) 图片瀑布流
基于.NetCore开发博客项目 StarBlog - (11) 实现访问统计
基于.NetCore开发博客项目 StarBlog - (12) Razor页面动态编译
基于.NetCore开发博客项目 StarBlog - (13) 加入友情链接功能
基于.NetCore开发博客项目 StarBlog - (14) 实现主题切换功能
基于.NetCore开发博客项目 StarBlog - (15) 生成随机尺寸图片
基于.NetCore开发博客项目 StarBlog - (16) 一些新功能 (监控/统计/配置/初始化)
基于.NetCore开发博客项目 StarBlog - (17) 自动下载文章里的外部图片
基于.NetCore开发博客项目 StarBlog - (18) 实现本地Typora文章打包上传
基于.NetCore开发博客项目 StarBlog - (19) Markdown渲染方案探索
基于.NetCore开发博客项目 StarBlog - (20) 图片显示优化
7
参考资料
/
爱资源吧版权声明:以上文中内容来自网络,如有侵权请联系删除,谢谢。