备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

15.5. 图片优化

2018-01-10 750
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

15.5.1. onMouseOver/onMouseOut

我们在网站冲浪常常看会看到很多图片按钮，当鼠标入上去或鼠标移开图片会随之改变，这个的按钮至少需要三张小图片才能实现这样的功能。

我先说说这样做的缺点

  • 三张图片，你的浏览器会启动三个线程链接你的图片服务器，不划算。

  • 一旦其中一幅图片下载过程中中断，用户当把鼠标放到按钮上时，可能会出现一个红叉叉。

  • 图片太多不好维护，易产生垃圾，占用磁盘空间，linux ext3一个空文件占用2048

最优方法是使用一张图片，将三幅图片平行或垂直排开，放到一幅图片中，然后使用CSS控制显示你需要的部分。

15.5.2. 使用一幅图片处理BLOCK四角

corner.gif

stylesheet

			
<style type="text/css">
<!--

.clear { clear: both; height: 0; font-size: 0; line-height: 0; zoom: 1 }

.containerPlain {
	background-color: #fff;
	border-right: 1px solid #cacaca;
	border-left: 1px solid #cacaca;
	padding: 0 3px;
}

.left_top_corner {
	display: block;
	width: 4px;
	height: 4px;
	background-position: top left;
	float: left;
	font-size: 0;
}

.right_top_corner {
	display: block;
	width: 4px;
	height: 4px;
	background-position: top right;
	float: right;
	font-size: 0;
}

.left_bottom_corner {
	display: block;
	width: 4px;
	height: 4px;
	background-position: bottom left;
	float: left;
	font-size: 0;
}


.right_bottom_corner {
	display: block;
	width: 4px;
	height: 4px;
	background-position: bottom right;
	float: right;
	font-size: 0;
}
.left_bottom_corner, .right_bottom_corner ,
.left_top_corner, .right_top_corner{
	background-image: url(corners/corner.gif);
}

.middle_top_line {
	display: block;
	float: left;
	height: 3px;
	line-height: 0;
	border-top: 1px solid #cacaca;
}

.middle_bottom_line {
	display: block;
	float: left;
	height: 3px;
	border-bottom: 1px solid #cacaca;
	font-size: 0;
}

.middle_top_line, .middle_bottom_line {
		width: 167px;
}

-->
</style>

HTML

			
<div style="width:175px;">
	<span class="left_top_corner"></span> <span class="middle_top_line"></span> <span class="right_top_corner"></span>
	<div class="containerPlain">
    	You Content
	</div>
	<span class="left_bottom_corner"></span> <span class="middle_bottom_line"></span> <span class="right_bottom_corner"></span>
</div>

下面是一个更复杂的例子

  • corner.gif
  • block_title_left.gif
  • block_title_right.gif

stylesheet

			
<style type="text/css">
<!--

.clear { clear: both; height: 0; font-size: 0; line-height: 0; zoom: 1 }

.containerPlain {
	background-color: #fff;
	border-right: 1px solid #cacaca;
	border-left: 1px solid #cacaca;
	padding: 0 3px;
	clear: both;
}

.left_top_corner {
	display: block;
	width: 4px;
	height: 4px;
	background-position: top left;
	float: left;
	font-size: 0;
}

.right_top_corner {
	display: block;
	width: 4px;
	height: 4px;
	background-position: top right;
	float: right;
	font-size: 0;
}

.left_bottom_corner {
	display: block;
	width: 4px;
	height: 4px;
	background-position: bottom left;
	float: left;
	font-size: 0;
}


.right_bottom_corner {
	display: block;
	width: 4px;
	height: 4px;
	background-position: bottom right;
	float: right;
	font-size: 0;
}
.left_bottom_corner, .right_bottom_corner ,
.left_top_corner, .right_top_corner{
	background-image: url(corners/corner.gif);
}

.middle_top_line {
	display: block;
	float: left;
	height: 3px;
	line-height: 0;
	border-top: 1px solid #cacaca;
}

.middle_bottom_line {
	display: block;
	float: left;
	height: 3px;
	border-bottom: 1px solid #cacaca;
	font-size: 0;
}

.middle_top_line, .middle_bottom_line {
		width: 167px;
}


.block_title {
	line-height: 26px;
	height: 26px;
	background-image: url(corners/block_title_left.png);
	background-repeat: no-repeat;
	padding-left: 10px;
	font-size: 13px;
	font-weight: bold;
	background-color: #dddbdc;
}

.block_title_right {
	display: block;
	background-image: url(corners/block_title_right.png);
	background-repeat: no-repeat;
	background-postition: right;
	float: right;
	width: 4px;
	height: 26px;
}
-->
</style>

HTML

			
<div style="width:175px;">
  <span class="left_top_corner"></span> <span class="middle_top_line"></span> <span class="right_top_corner"></span>
  <div class="containerPlain">
    <div class="block_title">
		<span class="block_title_right"></span> Title
    </div>
    <div style="padding: 10px 7px 7px 7px">
		Content
	</div>
  </div>
  <span class="left_bottom_corner"></span> <span class="middle_bottom_line"></span> <span class="right_bottom_corner"></span>
</div>

15.5.3. 图片用背景图代替 img 标记

			
图片用背景图代替<img src="">

15.5.4. 合并图片

下面是摘取LinkedIn网页,作为例子.

合并多张小图片为一张图片,然后通过偏移量取其中一部分显示,这样做的目的是,加快浏览器下载速度,降低与服务器建立连接的开销.

			
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head profile="http://gmpg.org/xfn/11">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>LinkedIn Blog</title>
	<style type="text/css">
/*
Theme Name:  LinkedIn Blog
Theme URI:   http://blog.linkedin.com/
Description: LinkedIn's main blog theme
Author:      Prajakta Godbole
Author URI:  http://linkedin.com/
Version:     2.0
*/

/*
Reset styles
Copyright (c) 2011, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.com/yui/license.html
version: 2.9.0
*/
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,select,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,button,caption,cite,code,dfn,em,input,optgroup,option,select,strong,textarea,th,var{font:inherit}del,ins{text-decoration:none}li{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:baseline}sub{vertical-align:baseline}legend{color:#000}

/* Colors and fonts */
html { background-color: #F5F5F5; }
body { font-family: Arial, Helvetica, "Nimbus Sans L", sans-serif; padding-top: 20px;}
a { color: #006fb3; text-decoration: none; }
a:hover { color: #006fb3; text-decoration: underline;}

/* Sidebar */
#sidebar { width: 312px; float: left; margin-left: 20px;}
#sidebar .widgets { border: 1px solid #ddd; background-color: #FFF; margin-bottom: 50px;
	-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
#sidebar .widgets h2 { color: #4d4e54; font-size: 14px; clear: both; margin-bottom: 13px;}
#sidebar .widgets ul li { font-size: 11.5px; }
#sidebar .widgets ul li a { color: #4d4e54; }
#sidebar .widgets .widget-bg { position: absolute; top: -13px; right: 15px; width: 35px; height: 40px; }

/* Follow us list */
#sidebar .follow-us-widget { overflow: hidden; padding-bottom: 35px; border-bottom: 1px solid #ccc; }
#sidebar .follow-us-widget .widget-wrapper { padding: 15px;}
#sidebar ul#follow-list li { float: left; position: relative; margin-right: 17px; zoom: 1; display: inline;}
#sidebar ul#follow-list li:last-child { margin-right: 0;}
#sidebar ul#follow-list li .follow-div { margin:0; padding:0; width: 33px; height: 38px; }
#sidebar ul#follow-list li a { display: block; width: 33px; height: 38px; text-indent: -9999px; background: url('http://blog.linkedin.com/wp-content/themes/linkedin/images/sprite3.png');}
#sidebar ul#follow-list li a#follow-lnkd { background-position: 0 0; }
#sidebar ul#follow-list li a#follow-twtr { background-position: -33px 0; }
#sidebar ul#follow-list li a#follow-fb { background-position: -66px 0; width: 32px; }
#sidebar ul#follow-list li a#follow-flickr { background-position: -130px 0; width: 32px;}
#sidebar ul#follow-list li a#follow-youtube { background-position: -98px 0; width: 32px;}
#sidebar ul#follow-list li a#follow-rss { background-position: -162px 0; width: 32px; }
#sidebar .widgets ul#follow-list li.last { margin-right: 0;}

/* Flickr */
#sidebar .flickr-widget { position: relative; border-bottom: 1px solid #ccc; }
#sidebar .flickr-widget .widget-wrapper { padding: 15px;}
#sidebar .flickr-widget h2 { margin-bottom: 20px; }
#sidebar .flickr-widget .widget-bg { background: url('images/sprite3.png') -267px 0 no-repeat;}
#sidebar #flickr-img-grp { margin-bottom: 10px; overflow:hidden; }
#sidebar #flickr-img-grp .flickr-img { float: left; margin: 0 15px 15px 0; }
	</style>
</head>
<body>
	<div id="sidebar">

		<div class="widgets">
			<div class="follow-us-widget">
				<div class="widget-wrapper">
					<h2>Follow Us Links</h2>

					<ul id="follow-list">
						<li><a id="follow-lnkd"
							href="https://www.linkedin.com/company/linkedin" target="_blank">LinkedIn</a>
						</li>
						<li><a id="follow-twtr" href="http://twitter.com/LinkedIn"
							target="_blank">Twitter</a></li>
						<li><a id="follow-fb"
							href="https://www.facebook.com/LinkedIn" target="_blank">Facebook</a>
						</li>
						<li><a id="follow-youtube"
							href="http://www.youtube.com/user/LinkedIn" target="_blank">YouTube</a>
						</li>
						<li><a id="follow-flickr"
							href="http://www.flickr.com/groups/linkedin/pool/"
							target="_blank">Flickr</a></li>
						<li class="last"><a id="follow-rss"
							href="http://feeds.feedburner.com/LinkedInBlog" target="_blank">RSS</a>
						</li>
					</ul>

				</div>
			</div>

		</div>
	</div>

</body>
</html>





原文出处：Netkiller 系列 手札
本文作者：陈景峯
转载请与作者联系，同时请务必标明文章原始出处和作者信息及本声明。

文章标签：
Web App开发
前端开发
玄学酱
目录
相关文章
叫个什么名字
|
10天前
|
前端开发 算法 JavaScript
如何优化前端性能：探索图片压缩与延迟加载技术
本文深入探讨了前端性能优化中的关键问题：图片压缩与延迟加载技术。通过介绍图片压缩的原理和方法，并结合实例说明了如何有效减少图片大小、提升加载速度；同时，详细解析了延迟加载技术的实现原理及其在提高页面加载性能中的作用，为前端开发者提供了实用的优化方案。
叫个什么名字
17 4
请看我回答~
|
1月前
|
缓存 前端开发 JavaScript
前端性能优化：提升网页加载速度的关键技巧
【2月更文挑战第11天】 在当今互联网高速发展的时代，网页加载速度成为影响用户体验和网站成功的重要因素。本文将深入探讨前端性能优化的关键技巧，包括资源压缩、图片优化、HTTP缓存、代码精简等方面，为前端开发者提供实用的指导和建议。
请看我回答~
30 6
游客moiomvrp3vyac2
|
3月前
|
缓存 前端开发 JavaScript
前端性能优化：提升页面加载速度
想要吸引用户并提高网站流量，页面加载速度是至关重要的。本文将介绍前端性能优化的基本原则和实践技巧，帮助您提高页面加载速度和用户体验。
游客moiomvrp3vyac2
63 0
codelang
|
算法 Android开发
聊聊图片压缩的优化
聊聊图片压缩的优化
codelang
208 0
聊聊图片压缩的优化
马克波罗
|
JavaScript 前端开发
前端性能优化实践之js 图片 字体优化（4）
前端性能优化实践之js 图片 字体优化（4）
马克波罗
405 0
Star时光
|
存储 前端开发 算法
前端性能优化-图片
前端性能优化-图片
Star时光
238 29
前端性能优化-图片
牧小农
|
存储 JavaScript
网页性能优化之图片懒加载
网页性能优化之图片懒加载
牧小农
156 0
网页性能优化之图片懒加载
vivec
|
JavaScript 前端开发
JS压缩图片，在线图片压缩，Cavas压缩图片
1. 选择一张图片 const img_original = document.getElementById('img_original'); const img_output = document.
vivec
2697 0
哈你真皮
|
前端开发
浅探前端图片优化
性能优化是前端开发必不可少的一环，而图片优化又是性能优化中必不可少的一环，但不知道有多少开发者在网页的开发过程中会注意图片的使用，图片使用不当可能会导致网页加载卡顿、网页加载速度慢等问题，这篇文章将会将我以往对图片的处理做个总结。
哈你真皮
1560 0
玄学酱
|
Web App开发 前端开发
15.5. 图片优化
玄学酱
1038 0

热门文章

最新文章

  • 1
    Mac安装并使用telnet命令操作
  • 2
    OSS回源的几种方式和应用场景
  • 3
    [剑指offer] 孩子们的游戏(圆圈中最后剩下的数)
  • 4
    网络安全系列之二十二 Windows用户账号加固
  • 5
    我理解的一个程序员如何学习前端开发
  • 6
    《社交网站界面设计（原书第2版）》——1.9　为设备之间的空间进行设计
  • 7
    《Microduino实战》——1.2　为什么要开源
  • 8
    .Net函数Math.Round你会用吗？
  • 9
    麻省理工大学新发明：暗黑WiFi透视技术
  • 10
    2014秋C++第19周 补充代码 哈希法的存储与查找
  • 1
    R语言关联规则模型(Apriori算法)挖掘杂货店的交易数据与交互可视化
    25
  • 2
    R语言近似贝叶斯计算MCMC（ABC-MCMC）轨迹图和边缘图可视化
    20
  • 3
    r语言中对LASSO回归，Ridge岭回归和弹性网络Elastic Net模型实现-4
    28
  • 4
    Sentieon | 每周文献-Multi-omics-第四十一期
    23
  • 5
    数据分享|R语言广义线性模型GLM：线性最小二乘、对数变换、泊松、二项式逻辑回归分析冰淇淋销售时间序列数据和模拟-2
    14
  • 6
    数据分享|R语言广义线性模型GLM：线性最小二乘、对数变换、泊松、二项式逻辑回归分析冰淇淋销售时间序列数据和模拟-1
    18
  • 7
    基于RT-Thread摄像头车牌图像采集系统
    19
  • 8
    R语言极值理论：希尔HILL统计量尾部指数参数估计可视化
    13
  • 9
    【视频】R语言中的分布滞后非线性模型（DLNM）与发病率，死亡率和空气污染示例
    14
  • 10
    sql语句创建数据库
    16

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）