小图示优化 - ASP.NET Sprite and Image Optimization (Web Form)
2015-12-22 17:26
676 查看
小图示优化 - ASP.NET Sprite and Image Optimization (Web Form)
透过 NuGet安装下面的套件,可以将您的小图示(icon)合并成一张图透过 CSS Sprites的方式,减少浏览器跟Web Server之间的图档传递,藉此增加效率。
您常看见的 Google 涂鸦(特定节日,Google的标示会有一段动画)
也会用到这样的效果喔!
关于 CSS Sprites可以参阅下面两篇中文文章的说明:
http://www.techbang.com/posts/5803-today-google-doodle-css-sprites-principle
http://www.wibibi.com/info.php?tid=373
范例演练 -- http://www.w3schools.com/css/css_image_sprites.asp
https://www.youtube.com/watch?v=g52lgaUO8bQ
在 NuGet里面,搜寻关键词「aspnetsprites」即可
这个套件可以用在 Web Form 或是 ASP.NET MVC
(文末有 Demo分享的文章,就是介绍在MVC里面使用之)
安装完成后,会出现一个 App_Sprites目录
然后,我把几个「小图标」的图片,复制到这个新的 App_Sprites目录里面
(不要把你所有的图档,尤其是 "大图档" 通通摆进去。您还是回头把 CSS Sprites的观念厘清吧)
记得喔!要建置您的网站或项目,才会帮您处理
完成后,您可以看见 App_Sprites目录里面 多了一张新图片与CSS文件。
我放进去的十张小图示,被结合成一张大图档
以下使用 Web Form 说明
我们可以使用一个新的控件,名为 <asp:ImageSprite>
建议图片的路径,必须使用 ASP.NET的根目录,写完整,
从~符号写起,不然的话,结果可能出不来!
上图我刻意采用两种比对方法:
上方,使用传统HTML的 <img>标签与 <asp:Image>来展示图片。
下方,则使用新的 <asp:ImageSprite>控件
从执行结果来看,您可以发现两者的差异(如下图)
相关文章:
使用ASP.NET MVC的朋友 请看 Demo的大作 --
Sprite and Image Optimization 网站优化套件,无脑实做 CSS Sprite 的套件
http://demo.tc/post/783
这里有 YouTube教学影片(不过,因为版本略有小差异,仅供参考)
https://www.youtube.com/watch?v=URuuSlLZcX0
这篇文章也很清楚 http://dotnetslackers.com/articles/aspnet/CSS-Sprites-and-the-ASP-NET-Sprite-and-Image-Optimization-Library.aspx
相关文章推荐
- 检测到在集成的托管管道模式下不适用的ASP.NET设置的解决方法
- Page_Load与sender -- PostBack是由哪个 ASP.NET控件引起 ?
- ASP.NET(Web Form)绘制图表 -- Google Chart 三部曲
- Action与func委托的区别有哪些
- ASP.NET MVC开发中常见异常及解决方案
- ASP.NET GridView控件固定表头(适用于IE浏览器,css操作)
- kafkaspout以及kafkabolt的最简实例
- Easyui Tree + Asp.net加载数据
- Asp.net 生成 导出 Excel 下载
- asp、php、asp.net、jsp介绍及优缺点比较
- asp.net mvc情况下使用jqery ajax的方法进行json数据传递
- ASP.NET: Setup a MVC5 website with MySQL, Entity Framework 6 Code-First and VS2013
- casperjs# install
- asp.net前台ListView中判断CheckBox选中状态
- 在ASP.NET Web API中实现CORS(跨域资源共享)
- (转)ASP.NET MVC4 部署错误 Could not load file or assembly
- ASP.NET中生成并导出Excel
- asp.net自定义404页面
- raspberry
- ASP.NET Web API与Owin OAuth:调用与用户相关的Web API(非第三方登录)