为其提供不同的图片。接下来我们就看一看如何利用该技术实现图片自适应。
设置自适应图片
实现 Adaptive Images 解决方案需要 Apache 2、PHP 5.x 和 GD 库,也就是说需要 Web 服务器端编程。首先,在其网站上下载.zip 文件开始配置:
解 压文件,然后将其中的adaptive-images.php和.htaccess文件拷贝到网站的根目录。如果你网站的根目录下已经有一 个.htaccess文件了,不要覆盖它。参考下载包中的instructions.htm文件看看怎么做合适。接着在网站根目录下创建一个名为 ai-cache 的文件夹。
用你最喜欢的 FTP 客户端软件设置该文件夹的权限为777。
然后把如下 JavaScript 代码复制到每个需要自适应图片的网页的头部:
<script>document.cookie=’resolution=’+Math.max(screen.width,screen.height)+'; path=/';/script>
如果你没有使用 HTML5(在下一章会改用 HTML5),想让页面通过标准验证,则需要追加 type 属性。所以 script 标签应如下所示:
<script type=”text/javascript”>document.cookie=’resolution=’+Math.maxscreen.width, screen.height)+'; path=/';</script>
切记这段 JavaScript 代码要放在页面头部( 好作为第一个脚本),因为它需要在页面加载完成之前,而且要在发出图片请求之前运行。下面是我们的示例网站头部加入该脚本后的结果:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ /> <meta name=”viewport” content=”width=device-width,initial-scale=1.0″ /> <title>And the winner isn’t…</title> <script type=”text/javascript”>document.cookie=’resolution=’+Math. max(screen.width,screen.height)+'; path=/';</script> <link href=”css/main.css” rel=”stylesheet” type=”text/css” /> </head>
把背景图片放在其他地方
过去,我通常将所有图片都放在一个名如 images 或 img 的文件夹中,不论是用做 CSS 背景的图片,还是通过标签插入的图片。但是在使用自适应图片方案时,建议将那些用于 CSS 的背景图片(或者那些你不想被缩放的图片)放在另一个目录。自适应图片方案默认为此创建的目录是assets。如果你不想缩放某张图片,把它丢进这个文件 夹即可。如果你想将这类图片存在其他(或更多)文件夹中,则需要像下面这样修改.htaccess文件。
<IfModule mod_rewrite.c> Options +FollowSymlinks RewriteEngine On # Adaptive-Images ——————————————————– RewriteCond %{REQUEST_URI} !assets RewriteCond %{REQUEST_URI} !bkg # Send any GIF, JPG, or PNG request that IS NOT stored inside one of the above directories # to adaptive-images.php so we can select appropriately sized versions RewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php # END Adaptive-Images —————————————————– </IfModule>
上面的代码设定了存在assets或bkg文件夹中的图片不会被缩放。反之,如果你想显式声明只允许某个特定文件夹中的图片被缩放,那么将设置规则中的感 叹号去掉即可。例如,如果我只想让网站根目录下名为andthewinnerisnt的文件夹中的图片被缩放,则修改后的代码如下所示:
<IfModule mod_rewrite.c> Options +FollowSymlinks RewriteEngine On # Adaptive-Images —————————————————— 2 RewriteCond %{REQUEST_URI} andthewinnerisnt # Send any GIF, JPG, or PNG request that IS NOT stored inside one of the above directories # to adaptive-images.php so we can select appropriately sized versions RewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php # END Adaptive-Images ————————————————– </IfModule>
这就是要设置的全部内容。检查是否能正确生成自适应图片的 简单办法,就是在网页中插入一张大图片,然后用手机访问这个页面。之后用 FTP 软件检查ai-cache文件夹中的内容,你应该可以看到一堆文件,以及使用屏幕尺寸断点命名的文件夹,如480(如下图):
Adaptive Images 方案不仅限于静态网站,它也可以被用于内容管理系统,而且在 JavaScript 被禁用的情况下依然有效。自适应图片方案给我们提供了一种方法,可以根据屏幕尺寸提供完全不同的图片,为那些没有必要下载全尺寸大图的设备节省带宽。
相关推荐
自适应滤波算法与实现(第四版),英文版,Paulo S. R. Diniz,2013
自适应滤波的经典教材,讲解详细,2013第二版,增加了很多最新的内容
2.3 A FSF Architecture Using Adaptive Linear Combiner Filter and Radial Basis Function Network Feature Extractor 2.3.1 FSF Realization 2.3.2 ALC-RBF FSF System Learning 2.3.3 Image Contour ...
物以稀为贵,物价太高,但货真价实,让图片根据设备的尺寸自动生成响应尺寸的图片
这是一本讲解快速开发的设计模式和原则的著名教材, 本书以.net c#语言为例. 这是目前最新版(截至2019年4月). 网站上已经有azw版本, 这个是pdf版, 更方便阅读.
S. Sastry, M. Bodson, Adaptive control: stability, convergence and robustness
Robust and Adaptive Control With Aerospace Applications书的电子版,鲁棒自适应控制及其航空航天应用
Adaptive control: stability, convergence and robustness
Subband Adaptive Filtering Theory and Implementation
Engineering Adaptive Software Systems: Communications of NII Shonan Meetings ISBN-10 书号: 9811321841 ISBN-13 书号: 9789811321849 Edition 版本: 1st ed. 2019 Release Finelybook 出版日期: 2019-01-15 ...
敏捷开发设计模式和SOLID原则, 提高编码能力必备, 英文版
IEEE Transactions paper
Adaptive Control Algorithms, Analysis and Applications Second Edition Ioan Doré Landau, Rogelio Lozano, Mohammed M’Saad, Alireza Karimi
详细描述了自适应阵列天线的波束形成的算法,是阵列天线波束形成算法的鼻祖。
锦鸡儿属植物的适应性扩散:从中亚到东亚,姚广前,方向文,锦鸡儿属植物大多数生长于亚洲温带的中部和东部,分布在干旱,半干旱,半湿润,湿润地区。我们分别研究了干旱地区的柠条锦鸡儿 (C
Nonlinear and Adaptive Control Systems:(非线性和自适应控制系统)
Adaptive Filters. Theory and Applications 2 edition
Adaptive Server 参考手册 包含有关 Sybase® Adaptive Server ® Enterprise 和 Transact-SQL® 语言的四本指南: • 构件块 介绍了 Transact-SQL 的各个组成部分:数据类型、内置 函数、全局变量、表达式、标识符...
Adaptive mutation: implications for evolution Adaptive mutation: implications for evolution Patricia L. Foster Summary Adaptive mutation is defined as a process that, during nonlethal selections, ...