ASP.NET MVC 3 网站优化总结(二)使用ASP.NET Sprite
来源:互联网 发布:画地图软件 编辑:程序博客网 时间:2024/05/21 11:27
来源:http://www.lidongkui.com/asp-net-mvc-3-website-optimization-summary-use-asp-net-sprite
网站中图片的加载是比较影响网站速度的,所以有必要对图片进行优化。今天我们看看在 ASP.NET MVC 3 中使用 ASP.NET Sprite 技术,关于 CSS Sprite 原理在这里不再阐述,可以参考下 CSS Sprites的使用。最终效果图如下:
现在就让我们看看 ASP.NET MVC 3 中实现 CSS Sprites,首先我们需要下载 Sprite and Image Optimization Preview 3,将三个 dll 文件Microsoft.Web.Samples.ImageOptimizationFramework.dll、Microsoft.Web.Samples.ImageSprite.dll和Microsoft.Web.Samples.SpriteHelper.dll添加到我们的 ASP.NET MVC 3 项目中,新建文件夹 App_Sprites,将我们需要生成 CSS Sprites 的图片放置在该文件夹中,运行项目就会自动生成 Sprite 文件:sprite0.png,同时生成了 CSS 文件:lowCompat.css、highCompat.css。如下:
.a-jpg{width:60px;height:60px;background-image:url(sprite0.png);background-position:-0px -0px;}.c-jpg{width:60px;height:60px;background-image:url(sprite0.png);background-position:-61px -0px;}
当我们改变图片的名字时,CSS 中的样式名也会跟着改变,非常的方便。我们不一定要将图片放在 App_Sprites 中,大家可以在说明文档里看到相应的配置。
使用我们生成的图片时,首先引入 CSS 样式如下:
@Sprite.ImportStylesheet("~/App_Sprites/")
在需要显示图片时:
@Sprite.Image("~/App_Sprites/a.jpg")@Sprite.Image("~/App_Sprites/b.png")
解析后:
<img class="a-jpg" src="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /><img class="b-png" src="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
可见,我们已经成功在 ASP.NET MVC 3 中实现了 Sprite,图片来自一个地址,在其他 ASP.NET 项目具体使用方法可以参考下 Scott 的 ASP.NET Sprite and Image Optimization。
- ASP.NET MVC 3 网站优化总结(二)使用ASP.NET Sprite
- ASP.NET MVC 3 网站优化总结(二)使用ASP.NET Sprite
- ASP.NET MVC 3 网站优化总结(四)使用缓存
- ASP.NET MVC 网站优化总结 使用 Gzip 压缩
- ASP.NET MVC 3 网站优化总结(六)压缩 HTML
- ASP.NET MVC 3 网站优化总结(一) 使用 Gzip 压缩
- ASP.NET MVC 3 网站优化总结(一) 使用 Gzip 压缩
- ASP.NET MVC 3 网站优化总结(一) 使用 Gzip 压缩
- ASP.NET MVC 3 网站优化总结(五)视图的优化
- ASP.NET MVC 3 网站优化总结(三)Specify Vary: Accept-Encoding header
- ASP.NET MVC 3 网站优化总结(三)Specify Vary: Accept-Encoding header
- 二. ASP NET MVC
- asp.net 网站优化
- ASP.NET MVC总结
- ASP.NET 2.0网站优化技巧总结
- ASP.NET 2.0网站优化技巧总结
- ASP.NET 2.0网站优化技巧总结
- ASP.NET 2.0网站优化技巧总结
- ASP.NET MVC 3 网站优化总结(一) 使用 Gzip 压缩
- hibernate--数据库完整操作流程
- Drupal 7 如何实现多级菜单?
- 利用Zabbix对亚马逊EC2服务器进行监测和报警(一)
- C# 让程序自动以管理员身份运行
- ASP.NET MVC 3 网站优化总结(二)使用ASP.NET Sprite
- Drupal 7中如何实现更加精细的权限和可见性控制?
- 文件切割之键盘录入
- 电台列表
- 如何在Linux下解压zip, tar, tar.gz和tar.bz2文件
- Linux学习方向
- phpcms 之主入口文件
- ASP.NET MVC 3 网站优化总结(三)Specify Vary: Accept-Encoding header
- 李开复、洪小文、黄学东关系