热门:响应图片(Responsive Images)技术简介

标签: web综合 cookie javascript media queries noscript | 发表时间:2012-02-15 14:41 | 作者:张 鑫旭
出处:http://www.zhangxinxu.com/wordpress

by zhangxinxu from http://www.zhangxinxu.com
本文地址: http://www.zhangxinxu.com/wordpress/?p=2204

一、开门见山

响应图片技术可以说是 响应布局衍生出来的一个小分支。说白了,就是不同显示器宽度下调用不同的图片。

这玩意,最近在国外讨论很火,有几种不同的实现方法,但都并不复杂。

二、Cookie + Server实现

github上有该技术 介绍。该技术需要Javascript以及后台程序的配合。

加载需要的JS文件 responsive-images.js, 该JS文件为获取当前用户显示器宽度,然后根据宽度值大小决定图片是小(small)呢,中等(medium)呢还是大(large),然后写入对应的Cookie.

下面就是服务器端事了,服务器(可以通过配置项)检测Cookie是被设成了small呢, medium呢还是large决定图片的src地址到底是哪个。

github上项目有个demo, 点击 这里访问。

首次进入的时候是个小图(Cookie首次写入,后台无法获取),再次刷新就是个大家伙了:

与响应布局差异
虽说该技术有响应布局的影子,但是,实际上实现的原理以及效果等是大相径庭的。差异在于:

  1. 非CSS技术,为Cookie + server实现
  2. 与浏览器宽度无关,即改变浏览器宽度图片不会有变化
  3. 兼容具有考古价值的浏览器

这种响应方式跟京东商城首页几乎如出一辙。页面宽度由用户显示器分辨率决定(非浏览器)。

下图为1024像素显示器宽度和1680像素下(1280像素宽度就足够了)的京东商城页面布局截图。
京东商城1024宽度下首页布局 张鑫旭-鑫空间-鑫生活 京东商城1680像素宽度下首页布局 张鑫旭-鑫空间-鑫生活

兼容性
因为使用Cookie,并非CSS3 media queries,因此低版本IE浏览器下也是OK的。

如果设备不支持Javascript以及Cookie
如果访问设备不支持Javascript以及Cookie, 则图片会显示mobile手机上尺寸,即小尺寸。

可选项
responsive-images.js是一个非常小的脚本,不会其也会有可选项的。可选参数为一个全局的对象字面量。

   <script>
    //这里为配置项:
    var responsive_images = {
        "key": "value"
    };
</script>

对象字面量的名称是固定的,为responsive_images,支持的关键字、默认值和含义见下表:

关键字 默认值 释义
cookieName rwd-screensize Cookie名
cookieValue sw > 500 ? ( sw > 1000 ? "large" : "medium" ) : "small" Cookie值
cookieAge 30000 过期时间,单位毫秒
cookieDomain 当前访问 Cookie域
cookiePath / Cookie路径

三、其他同行的Cookie实现

keithclark在去年夏天的时候就说过响应图片,不过其文章更多的是展示服务器端的处理(PHP),原理与上面类似。

先是写Cookie, 很简短的:

document.cookie = "device_dimensions=" + screen.width + "x" + screen.height; 

然后就是PHP语言的绽放了:

<?php
  $device_width = 0;
  $device_height = 0;
  $file = $_SERVER['QUERY_STRING'];

  if (file_exists($file)) {

    // Read the device viewport dimensions
    if (isset($_COOKIE['device_dimensions'])) {
      $dimensions = explode('x', $_COOKIE['device_dimensions']);
      if (count($dimensions)==2) {
        $device_width = intval($dimensions[0]);
        $device_height = intval($dimensions[1]);
      }
    }

    if ($device_width > 0) {

      $fileext = pathinfo($file, PATHINFO_EXTENSION);

      // Low resolution image
      if ($device_width <= 800) {
        $output_file = substr_replace($file, '-low', -strlen($fileext)-1, 0);
      } 

      // Medium resolution image
      else if ($device_width <= 1024) {
        $output_file = substr_replace($file, '-med', -strlen($fileext)-1, 0);
      }

      // check the file exists
      if (isset($output_file) && file_exists($output_file)) {
        $file = $output_file;
      }
    }

    // return the file;
    readfile($file);
  }

?>

然后HTML端的庐山面目:

<!doctype html>
<html>
<head>
  <title>Responsive Images Test</title>
  <meta charset="utf-8">
  <script>
    document.cookie = "device_dimensions=" + screen.width + "x" + screen.height;
  </script>
</head>
<body>
  <img src="images/?test.png">
  <!-- 上面等同于: <img src="images/index.php?test.png"> -->
</body>
</html>

这个嘛希望对喜欢copy代码的同行有所帮助。

四、使用noscript标签创建响应图片

上面例子中的响应图片在两种情况下会直接mobile尺寸图片显示:一是站点首次载入的时候;二是Cookie禁用或是Javascript出去撞劳斯莱斯的时候。

这里的 noscript标签创建法则基本没有这些问题,因为该方法完全借助客户端实现。

同样,github上有该方法的项目页面 – futurechimp / responsive_image_tag.

这里的响应图片技术貌似不需要Cookie的前后端通讯,而是借助 noscript标签以及JS实现。

下面就是实现的 步步展示

首先是HTML部分:

<span class="img-placeholder"></span>   
<noscript data-mobilesrc="small.jpg" data-fullsrc="big.jpg" data-alttext="your alt text" class="responsivize">   
   <img src="big.jpg">   
</noscript>

上面代码中,类名为 img-placeholderspan标签是用来占位子和插入图片的。 <noscript>中的图片默认调用的是大图地址,在JavaScript被禁用的时候会显示。

下面要做的就是使用JavaScript判别当前显示设备是mobile类别还是desktop类别:

var responsiveImageTag = {   
    replaceInitialImages:function() {   
        var platform = "desktop";   
        var responsiveImages = $$(".responsivize");   
        var i,   
            noOfresponsiveImages = responsiveImages.length;   
        //当前显示器设备宽度测试   
        if(screen.width <= 767){
                //767px, 比 ipad 小的都认为是 mobile   
          platform = "mobile";   
        }   
           
       //set initial source element on image   
       for(i = 0; i < noOfresponsiveImages; i = i + 1 ){   
       var noScriptElem = $(responsiveImages[i]);   
   

既然知道了设备类别,我们就可以根据这个类别分别载入对应尺寸的图片了。对应设备尺寸图片地址以通过HTML5自定义属性 data-定义在了 <noscript>上,因此,我们就有代码(紧接上面):

    var img = window.document.createElement("img");   
       img.alt = noScriptElem.attr("data-alttext");   
       if(platform === "mobile"){   
          img.src = noScriptElem.attr("data-mobilesrc");   
       }else{   
          img.src = noScriptElem.attr("data-fullsrc");   
       }   
       img.className = "responsive";   

然后,把图片以DOM的形式插入到上面用来占位的 span标签元素内,于是就大功告成!

       noScriptElem.prev().append(img);      
       noScriptElem.hide();   
     }   
   }   
};

五、另类图片响应

Jeremy Keith提出了另外一种响应图片技术,可以算是一种图片加载优化技术。

如下:
无论是小屏幕的手机,还是大屏幕的桌面设备,默认 img链接的图片都是小图(如下)。

然后页面载入完毕后,如果显示器宽度超过一个限制,则 src地址切换成大图地址。

其中,有个比较关键的就是,如果显示器宽度大于某个值,小图的高宽尺寸是要被放大的,也就是说小图会被拉伸显示。这种尺寸的控制借助于CSS3:

@media screen and (min-width: 50em) {
    .photo {
        width: 500px;
        height: 375px;
    }
}

于是乎,我们会看到,页面载入后的模糊图片:

但是,这种模糊效果是暂时的,因为页面loaded完毕后,我们会根据宽度范围再次修改 imgsrc地址,而载入清晰图片。

我记得以前百度图片浏览就是这种效果滴。

这种图片响应实现的好处在于提高了页面的性能,虽然看上去好像比值加载大尺寸图片多了差不多20K。

根据作者的示例,大图的地址使用HTML5 data-自定义属性藏匿:

<img src="seed.jpg" alt="刺刺的种子" data-fullsrc="seed-large.jpg"> 

六、参考文章

觉得这里的文章不错,希望他一直走下去?您可以: 支付鼓励

原创文章,转载请注明来自 张鑫旭-鑫空间-鑫生活[ http://www.zhangxinxu.com]
本文地址: http://www.zhangxinxu.com/wordpress/?p=2204

(本篇完)

有话要说,点击 这里发表评论。

相关 [图片 responsive images] 推荐:

热门:响应图片(Responsive Images)技术简介

- - 张鑫旭-鑫空间-鑫生活
本文地址: http://www.zhangxinxu.com/wordpress/?p=2204. 响应图片技术可以说是 响应布局衍生出来的一个小分支. 说白了,就是不同显示器宽度下调用不同的图片. 这玩意,最近在国外讨论很火,有几种不同的实现方法,但都并不复杂. 二、Cookie + Server实现.

Responsive-Images响应式图片插件的工作原理

- - CSDN博客Web前端推荐文章
  随着不同分辨率的移动设备出现,网页需要在不同分辨率的设备下给用户提供更加舒适的体验,随之就出现了响应式布局的概念.   响应式布局是Ethan Marcotte提出来的,说白了就是一个网站能兼容不同分辨率的设备,而无需为每一个分辨率的终端各写一个网页.   其主要用到的技术是CSS3中的Media Query以及为了兼容古董浏览器而生的各种插件.

Google Images 开始显示更多图片信息

- amadeuz - 谷奥——探寻谷歌的奥秘
Google Images现在会在你点击搜索结果后显示出更详细的图片信息,包括:. 当然这些信息都来自图片本身的EXIF信息. 另外一个变化是,你可以点击more sizes查看该图像的其它版本,或者是相似的图像. 左侧的搜索百宝箱还包含了一些相关搜索关键字:. © musiXboy 发表于 谷奥——探寻谷歌的奥秘 ( http://www.guao.hk ), 2011.

自适应网页设计(Responsive Web Design)

- - 阮一峰的网络日志
随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端. 于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页. 手机的屏幕比较小,宽度通常在600像素以下;PC的屏幕宽度,一般都在1000像素以上(目前主流宽度是1366×768),有的还达到了2000像素.

Google Images才是Google最有价值的技术

- - 比特客栈的文艺复兴
社交网络这种低效率的内容整合见鬼去吧. Google Images是怎样把一张图转化为搜索关键词与搜索结果的. 用户只要输入一张图,而且根本不需要是完整的图片(例如QQ群里右键的截图). 图像处理算法找到对应完整的图片记录(图片结果). 找到引用图片的网站,抽取常见关键字(网页结果). 关键字联想,寻找最匹配的网页(维基,提供关键词解释,等于图片注释).

Responsive Web Design 的一些技巧和想法

- - Blog.XDite.net
昨天在 Happy Designer 5 上,有聊起了做 Responsive Web Design (特別是 mobile 版)的一些狀況. 在這裡我提供一些自己的經驗和技巧:. Mobile First:如果你要做 Desktop / Mobile 雙版本的網站. 先設計 Mobile 版的,而且要從最小的尺寸開始做.

Responsive Nav:用于小屏幕设备的响应式导航

- - 博客园_梦想天空
  Responsive Nav 是一个很小的. JavaScript 插件,压缩后只有 1.7 KB,可以帮助您实现小屏幕导航切换功能. CSS3 过渡提供最佳性能,它还包含一个“聪明”的解决方法,借助 CSS3 transitions 特性使高度从height: 0 过渡到 height: auto.

画一副画儿,然后利用 Google Images 的以图搜图来搜索

- 瑠音北樟 - 谷奥——探寻谷歌的奥秘
Franz Enzenhofer制作了一个超酷的Search by drawing网页应用,就是让你在线画出一副画,然后利用Google Images的Search by image功能,根据你所画的画儿,搜索出类似的图片. 先进入Search by drawing网页应用. 直接画画儿(利用了HTML 5的canvas功能).

推荐20个精美的响应式设计(Responsive Design)网站作品

- - 博客园_梦想天空
响应式网页设计是时下网页设计领域最热门的话题之一,该概念由著名网页设计师 Ethan Marcotte 在2010年5月份提出,其目标是要让设计的网站能够响应用户的行为,根据不同终端设备自动调整尺寸. 今天这篇文章向大家推荐20个优秀的响应式布局网页设计案例,相信这些优秀的网站作品能够帮助你学习响应式网站设计.

CSS3 Media Queries 详细介绍与使用方法,Responsive Web Design 必备技术

- - Web前端 - ITeye博客
上一篇我们介绍了 Responsive Web Design之后,这次要来详细介绍CSS3 Media Queries了. 在上一篇中,我们提到 Responsive Web Desig n的实作方式有大半都是利用CSS3 Media Queries来达成. 而顾名思义Media Queries 就是要在支援CSS3 的浏览器中才能正常工作,IE8 以下不支援.