MIS2000 Lab. -- ASP.NET学习&分享 / ASP.NET案例精编(清华大学出版社)
您好,我来自台湾。很高兴与各位分享一些成果。希望对您有帮助。出版书籍是「ASP.NET案例精编 / 清华大学出版社」。
随笔 - 178,  文章 - 13,  评论 - 17,  阅读 - 85171

小图示优化 - 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

 

posted on   MIS2000 Lab.  阅读(387)  评论(0编辑  收藏  举报
编辑推荐:
· ASP.NET Core - 日志记录系统(二)
· .NET 依赖注入中的 Captive Dependency
· .NET Core 对象分配(Alloc)底层原理浅谈
· 聊一聊 C#异步 任务延续的三种底层玩法
· 敏捷开发:如何高效开每日站会
阅读排行:
· 终于决定:把自己家的能源管理系统开源了!
· C#实现 Winform 程序在系统托盘显示图标 & 开机自启动
· 了解 ASP.NET Core 中的中间件
· 实现windows下简单的自动化窗口管理
· 【C语言学习】——命令行编译运行 C 语言程序的完整流程

< 2025年1月 >
29 30 31 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31 1
2 3 4 5 6 7 8


ASP.NET案例精编——适用于VS 2005/2008(配光盘)
 

当当网购买 http://product.dangdang.com/product.aspx?product_id=20583373&ref=search-1-pub


点击右上角即可分享
微信分享提示