透过 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. .net core 中使用NLog

    在.net standard 2.0.3 和.net core 2.1适用.其他版本的.net 应该也可以. 1.新建一个空白解决方案,再建一个类库 2.安装NLog.Config,会生成一个配置文件 ...

  2. CODING 告诉你硅谷的研发项目管理之道(3)

    前言: 本文为 CODING 教你一步步从一个程序员变身成管理者系列文章的第三篇,文章内容来自 Unity 的一位研发总监,详细叙述了他的管理风格和处事态度,同时列举了很多扩展阅读材料来帮助读者更全面 ...

  3. 2017-9-26 NOIP模拟赛

    NOIP 2017 全真模拟冲刺 ---LRH&&XXY 题目名称 那些年 铁路计划 毁灭 题目类型 传统 传统 传统 可执行文件名 years trainfare destroy 输 ...

  4. Android进阶书籍推荐

    版权声明:本文为xing_star原创文章,转载请注明出处! 本文同步自http://javaexception.com/archives/124 Android进阶书籍推荐 端午节前我写了drake ...

  5. EasyUI/TopJUI之如何动态改变下拉列表框ComboBox输入框的背景颜色

    简单记录一下 前段时间接到客户需求:动态改变下拉列表框ComboBox输入框的背景颜色. 刚开始想的很简单在用户选择列表项的时候,判断一下列表框的value值添加相应的背景颜色就OK了,然而在实际操作 ...

  6. PAT甲级——1101 Quick Sort (快速排序)

    本文同步发布在CSDN:https://blog.csdn.net/weixin_44385565/article/details/90613846 1101 Quick Sort (25 分)   ...

  7. 提高mysql千万级大数据SQL查询优化30条经验

    1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使用索 ...

  8. web.xml中监听器如何顺序加载

    最近用到在Tomcat服务器启动时自动加载数据到缓存,这就需要创建一个自定义的缓存监听器并实现ServletContextListener接口, 并且在此自定义监听器中需要用到Spring的依赖注入功 ...

  9. 使用scrapy+selenium爬取淘宝网

    --***2019-3-27测试有效***---- 第一步: 打开cmd,输入scrapy startproject taobao_s新建一个项目. 接着cd 进入我们的项目文件夹内输入scrapy ...

  10. (转)centos7优化内核参数详解

    centos7优化内核参数详解 原文:http://blog.csdn.net/xiegh2014/article/details/52132863 cat /etc/sysctl.conf #CTC ...