小图示优化 - 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的大作 --
这里有 YouTube教学影片(不过,因为版本略有小差异,仅供参考)
https://www.youtube.com/watch?v=URuuSlLZcX0
小图示优化 - ASP.NET Sprite and Image Optimization (Web Form)的更多相关文章
- 不修改代码就能优化ASP.NET网站性能的一些方法
阅读目录 开始 配置OutputCache 启用内容过期 解决资源文件升级问题 启用压缩 删除无用的HttpModule 其它优化选项 本文将介绍一些方法用于优化ASP.NET网站性能,这些方法都是不 ...
- Best Practices for Performance_1、2 memory、Tips 性能和小的优化点、 onTrimMemory
http://developer.android.com/training/articles/memory.htmlhttp://developer.android.com/tools/debuggi ...
- 大数据开发实战:Hive优化实战2-大表join小表优化
4.大表join小表优化 和join相关的优化主要分为mapjoin可以解决的优化(即大表join小表)和mapjoin无法解决的优化(即大表join大表),前者相对容易解决,后者较难,比较麻烦. 首 ...
- MapReduce小文件优化与分区
一.小文件优化 1.Mapper类 package com.css.combine; import java.io.IOException; import org.apache.hadoop.io.I ...
- 不修改代码就能优化ASP.NET网站性能的一些方法 [转]
不修改代码就能优化ASP.NET网站性能的一些方法 阅读目录 开始 配置OutputCache 启用内容过期 解决资源文件升级问题 启用压缩 删除无用的HttpModule 其它优化选项 本文将介绍一 ...
- 腾讯WeTest加入智慧零售“倍增计划”,引领微信小程序质量优化
WeTest 导读 在2019腾讯全球数字生态大会零售分论坛上,腾讯正式面向全行业合作伙伴发布倍增计划,通过咨询.培训.竞赛三步走,帮助零售商户解决前端触点融通的问题,推动微信生意大盘阶梯式上涨. 倍 ...
- ASP.Net Web Form<一> aspx文件编译及呈现
对比复习下JSP 1.jsp的本质是Servlet ,会在第一次被访问时会被翻译成一个类文件,从此对这个页面的访问都是由这个类文件执行后进行输出. aspx 本质是IHttpHandler 2.jsp ...
- ASP.NET Web Form和MVC中防止F5刷新引起的重复提交问题
转载 http://www.cnblogs.com/hiteddy/archive/2012/03/29/Prevent_Resubmit_When_Refresh_Reload_In_ASP_NET ...
- 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 创 ...
随机推荐
- luogu1975 排队(分块)
luogu1975 排队(分块) 给你一个长度为n的序列,每次交换给定的两个数,输出每次操作后的逆序对个数. 首先考虑求出刚开始的逆序对.接着相当于带修改的求区间中比x大的数. 可以用分块,每个块内排 ...
- day20模块作业
1.模块化作业 1.回顾文件递归遍历. 默写一遍. 入口在: 当文件是个文件夹的时候 出口在: 文件是一个文件 2.计算时间差(用户输入起始时间和结束时间. 计算时间差(小时), 例如, 用户输入20 ...
- 利用Putty连接树莓派
解决emergency mode问题 记得上一次玩我的树莓派是做一个小型的服务器,挂载一个8GB的USB做服务器,在Windows电脑上直接进行访问.结果今天就开启不了树莓派了,总是进入emergen ...
- python基本数据类型练习
一.元素分类# 有如下值集合 [11,22,33,44,55,66,77,88,99,90...],将所有大于 66 的值保存至字典的第一个key中,将小于 66 的值保存至第二个key的值中.# 即 ...
- 5、python数据类型之元组(tuple)
元组 元组和列表最大的区别是元组中的元素固定,元组不能修改,所以不能对元组进行增.删.改 1.创建 tu = (11,22,33) tu = tuple(11,22,33) tu = tuple([] ...
- 3Ds Max FTL:Virtual device creation failed.
1.在安装完成并激活3DsMax2017中文版后,启动提示:渲染错误消息:FTL: Virtual device creation failed.(中文译:虚拟设备的创建失败). 2.关闭渲染错误消息 ...
- 牛客练习赛34-C-little w and Segment Coverage(差分数组)
链接:https://ac.nowcoder.com/acm/contest/297/C 来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 262144K,其他语言5242 ...
- spring静态工厂方法得到单例bean
import org.springframework.beans.BeansException; import org.springframework.context.ApplicationConte ...
- 03.Spring IoC 容器 - 初始化
基本概念 Spring IoC 容器的初始化过程在监听器 ContextLoaderListener 类中定义. 具体由该类的的 configureAndRefreshWebApplicationCo ...
- Response.Redirect 打开新窗口的两种方法
一般情况下,Response.Redirect 方法是在服务器端进行转向,因此,除非使用 Response.Write("<script>window.location='htt ...