透过 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的大作 --

这里有 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 Sprite and Image Optimization (Web Form)的更多相关文章

  1. 不修改代码就能优化ASP.NET网站性能的一些方法

    阅读目录 开始 配置OutputCache 启用内容过期 解决资源文件升级问题 启用压缩 删除无用的HttpModule 其它优化选项 本文将介绍一些方法用于优化ASP.NET网站性能,这些方法都是不 ...

  2. Best Practices for Performance_1、2 memory、Tips 性能和小的优化点、 onTrimMemory

    http://developer.android.com/training/articles/memory.htmlhttp://developer.android.com/tools/debuggi ...

  3. 大数据开发实战：Hive优化实战2-大表join小表优化

    4.大表join小表优化 和join相关的优化主要分为mapjoin可以解决的优化(即大表join小表)和mapjoin无法解决的优化(即大表join大表),前者相对容易解决,后者较难,比较麻烦. 首 ...

  4. MapReduce小文件优化与分区

    一.小文件优化 1.Mapper类 package com.css.combine; import java.io.IOException; import org.apache.hadoop.io.I ...

  5. 不修改代码就能优化ASP.NET网站性能的一些方法 [转]

    不修改代码就能优化ASP.NET网站性能的一些方法 阅读目录 开始 配置OutputCache 启用内容过期 解决资源文件升级问题 启用压缩 删除无用的HttpModule 其它优化选项 本文将介绍一 ...

  6. 腾讯WeTest加入智慧零售“倍增计划”，引领微信小程序质量优化

    WeTest 导读 在2019腾讯全球数字生态大会零售分论坛上,腾讯正式面向全行业合作伙伴发布倍增计划,通过咨询.培训.竞赛三步走,帮助零售商户解决前端触点融通的问题,推动微信生意大盘阶梯式上涨. 倍 ...

  7. ASP.Net Web Form<一> aspx文件编译及呈现

    对比复习下JSP 1.jsp的本质是Servlet ,会在第一次被访问时会被翻译成一个类文件,从此对这个页面的访问都是由这个类文件执行后进行输出. aspx 本质是IHttpHandler 2.jsp ...

  8. ASP.NET Web Form和MVC中防止F5刷新引起的重复提交问题

    转载 http://www.cnblogs.com/hiteddy/archive/2012/03/29/Prevent_Resubmit_When_Refresh_Reload_In_ASP_NET ...

  9. 002.Create a web API with ASP.NET Core MVC and Visual Studio for Windows -- 【在windows上用vs与asp.net core mvc 创建一个 web api 程序】

    Create a web API with ASP.NET Core MVC and Visual Studio for Windows 在windows上用vs与asp.net core mvc 创 ...

随机推荐

  1. 【java数据类型和mysqk数据类型对照表】

      java mysql 数据类型对照 类型名称 显示长度 数据库类型 JAVA类型 JDBC类型索引(int) 描述             VARCHAR L+N VARCHAR java.lan ...

  2. mobile web页面调试方法

    此文已由作者张含会授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 开发过程问题排查 Chrome Emulation关键词:使用方便 模拟各种设备尺寸.像素比.自定义user ...

  3. 目标检测的图像特征提取之_LBP特征

    LBP(Local Binary Pattern,局部二值模式)是一种用来描述图像局部纹理特征的算子:它具有旋转不变性和灰度不变性等显著的优点.它是首先由T. Ojala, M.Pietikäinen ...

  4. es6- Generator函数实现长轮询

    1.Generator 函数是 ES6 提供的一种异步编程解决方案,语法行为与传统函数完全不同. 语法上,首先可以把它理解成,Generator 函数是一个状态机,封装了多个内部状态.形式上,Gene ...

  5. .txt文件转换到Excel

    背景    前几天,自己在实验室里做实验,我们的大偶像肖老师看见我了,把我宣到他的办公室,问我,这个怎么办.都是数字,两列数字,怎么排版到Excel上也显示两列数字.Oh My God! 这个我怎么知 ...

  6. 【转载】GlusterFS六大卷模式說明

    本文转载自翱翔的水滴<GlusterFS六大卷模式說明> GlusterFS六大卷說明 第一,分佈卷 在分布式卷文件被随机地分布在整个砖的体积.使用分布式卷,你需要扩展存储,冗余是重要或提 ...

  7. iPhone摄影中的深度捕捉(WWDC2017-Session 507)

    507是深度媒体相关的概念层面的内容.主要为下面4个部分: Depth and disparity on iPhone 7 Plus Streaming depth data from the cam ...

  8. ELK（+Redis）-开源实时日志分析平台

    ################################################################################################### ...

  9. ng2学习--pipe使用

    We use our custom pipe the same way we use built-in pipes.(自定义Pipe和API里自带的Pipe使用方式一致) We must includ ...

  10. maven 引入本地项目jar报红线错误解决方法

    问题:本地创建了2个项目,A和B,A引入B,A的pom如下: <dependency> <groupId>com.ebc</groupId> <artifac ...