Adaptive Images ：为不同的屏幕尺寸提供不同的图片

天梯梦

浏览: 13764794 次
性别:
来自: 洛杉矶

最近访客更多访客>>

xierui54

简_单

bcrun

hur5457

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Php / Pear / Mysql / Node.js

为其提供不同的图片。接下来我们就看一看如何利用该技术实现图片自适应。

设置自适应图片

实现 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 被禁用的情况下依然有效。自适应图片方案给我们提供了一种方法，可以根据屏幕尺寸提供完全不同的图片，为那些没有必要下载全尺寸大图的设备节省带宽。

原文：http://www.aaini.com/html/1093.html

Adaptive Images检测访问者屏幕的尺寸，自动创建、缓存并重新缩放内嵌在HTML页面中的图片，以适应显示设备屏幕的大小。无需把变化标记出来。Adaptive Image和流媒体图片技术联合使用，适用于响应式设计。

Adaptive Images为什么要那样做？现在越来愈多的用户使用屏幕更小、速度更慢和带宽更低的设备访问网站。在那样的设备上访问以桌面为中心的网站，图片加载会越来越慢，引起UI延迟，花费用户更多的带宽和金钱。Adaptive Images就是为了解决上述问题。

项目地址：http://adaptive-images.com/

分享到：

Picturefill.WP – 根据屏幕尺寸加载合适 ... | 真正的响应式图片

2014-11-25 02:15
浏览 2666
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论