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

标签: responsive images 响应式 | 发表时间:2014-01-23 21:44 | 作者:ForeverCjl
出处:http://blog.csdn.net

一、什么是响应式图片

  随着不同分辨率的移动设备出现,网页需要在不同分辨率的设备下给用户提供更加舒适的体验,随之就出现了响应式布局的概念。

  响应式布局是Ethan Marcotte提出来的,说白了就是一个网站能兼容不同分辨率的设备,而无需为每一个分辨率的终端各写一个网页。

  其主要用到的技术是CSS3中的Media Query以及为了兼容古董浏览器而生的各种插件。而响应式图片不同,它使用的是javascript和服务器的方式去实现。响应式图标不单单是简单的把IMG元素根据屏幕大小去缩放,而是在一定尺寸的设备中,使用不同分辨率(也就是图片大小)不同的图片。


二、响应式图片的好处

  低分辨率的设备大部分都是移动设备,如果在分辨率较低时,让网页去加载对应分辨率较低的图片,不仅会加快网页的呈现速度,而且能节省流量。


三、Responsive-Images

  Responsive-Images是一个响应式图片的解决方案,它将在屏幕分辨率小于480px的时候加载小尺寸的图片。源码可以在 Github上下载,也可以在这里看到 DEMO

  它主要是根据服务器重定向或IMG标签路径替换的方式来实现响应式图片,下面解释一下它的工作原理。


四、使用方法

  1.网站所使用的服务器必须是apache

  2.将“.htaccess”文件拷贝到apache web 服务器的根文件头中

  3.在页面的<head>中导入“responsiveimgs.min.js”

  4.<img src="small.jpg?full=large.jpg" >

     small.jpg表示的是将要加载的小尺寸图片,large.jpg表示将要加载的大尺寸图片。


五、工作原理

  下面我们来看看它的源码是怎么工作的。

wideload  = win.screen.availWidth > widthBreakPoint;

if( !wideload ){
    return;
}
  widthBreakPoint的默认值为480,当屏幕的宽度小于480px时,程序返回,不执行后面的代码,默认使用small.jpg。“?full=large.jpg”会被浏览器当作参数扔掉。

  当屏幕的宽度大于480px时,继续下面的代码

 var base   = (function(){
           var backup,
                baseAdded = false,
                a = doc.createElement("a"),
                supported = false,
                base = head.getElementsByTagName( "base" )[0] || (function(){
                baseAdded = true;
                return head.insertBefore( doc.createElement("base"), head.firstChild );
             })();
                 
                backup = !baseAdded && base.href;   
                
                //test base support before using
            base.href = location.protocol + "//" + "x/";
            a.href = "y";
            
            //if dynamic base tag is unsupported (Firefox)
            if( a.href.indexOf( "x/y" ) < 0 ){
                    if( backup ){
                            base.href = backup;
                    }
                    else{
                            head.removeChild(base);
                    }
                    base = null;
            }
            else{
                    base.href = dirPath +  "rwd-router/";
            }
            //return 
                        return base;
            })()
  这段代码看似很长的样子,但是其实很简单,它的功能主要是生成base标签,并加入到<head>标签中,不知道base标签的 点这里

  代码中的dirPath是这样来的

filePath  = location.href;
dirPath   = filePath.substring( 0, filePath.lastIndexOf( "/" ) ) + "/";
  如果filePath是"http://filamentgroup.com/examples/responsive-images/xxxx.jpg",则dirPath为"http://filamentgroup.com/examples/responsive-images/"

这段代码执行过后,在<head>标签中生成了这样一个标签:

<base href="http://filamentgroup.com/examples/responsive-images/rwd-router/"></base>
这是一个虚拟全局路径,点击img后,跳向的是下面这个地址:

"http://filamentgroup.com/examples/responsive-images/rwd-router/small.jpg?full=large.jpg"

紧接着我们要处理这个虚拟的URL了,这时候我们就用到了开头说的 .htaccess 文件。

这个文件是apache服务器的一个分布式配置文件,用于针对自定义规则改变目录的配置方法,简单的来说就是用来重定向的。

现在我们看看这个文件的内容:

RewriteEngine On
# direct image requests to temp
RewriteCond %{QUERY_STRING} full=(.*)&?
RewriteRule (.*)rwd-router/.*\.(jpe?g|png|gif|webp) $1%1 [L]
# ignore trap for non-image requests, rewrite URL without trap segment
RewriteRule (.*)rwd-router/(.*)$ $1$2
这里我们需要注意到的是 RewriteCond RewriteRule,RewriteCond指令定义一条规则条件,只有当URL与自身的正则表达式匹配且符合RewriteRule规则时,才能被处理。

拿刚才的URL = "http://filamentgroup.com/examples/responsive-images/rwd-router/small.jpg?full=large.jpg"来说,只有当URL匹配 full=(.*)&?,且符合 (.*)rwd-router/.*\.(jpe?g|png|gif|webp) 时,才能应用于规则 $1%1。

1)$N:RewriteRule后向引用,其中(0 <= N <= 9) 。$N引用紧跟在RewriteCond后面的RewriteRule中模板中的括号中的模板在当前URL中匹配的数据。

2)%N:RewriteCond后向引用,其中(0 <= N <= 9) 。%N引用最后一个RewriteCond的模板中的括号中的模板在当前URL中匹配的数据。

$1%1 简单来说,就是将URL匹配RewriteRule后的结果集的第二项,替换成URL匹配RewriteCond结果集的第二项。

URL匹配RewriteRule后的结果集的第二项为rwd-router/small.jpg?full=large.jpg

URL匹配RewriteCond后的结果集的第二项为large.jpg

替换之后的结果为http://filamentgroup.com/examples/responsive-images/large.jpg

到此,在页面图片显示出来之前,就将URL重定向到了large图片。所以当图片显示出来的时候,直接就是显示对应的大图或者小图。

如果浏览器不支持动态base标签(例如Firefox),则它的代码提供了另外一种方式,就是直接替换img标签中的src,代码如下。

     for( var i = 0, imgs = doc.getElementsByTagName( "img" ), il = imgs.length; i < il; i++){
         var img   = imgs[i],
            src    = img.getAttribute( "src" ),
            full   = src.match( /(\?|&)full=(.*)&?/ ) && RegExp.$2;                        
            if( full ){
                   img.src = full;
             }
      }
浏览器在src属性的内容改变时,会重新获取一次图片。

当dom渲染完毕之后,程序会删除掉之前添加的base标签(在支持base标签的情况下),让全局路径恢复原始的。

整个过程都在图片加载之前完成!





 


作者:ForeverCjl 发表于2014-1-23 21:44:34 原文链接
阅读:55 评论:0 查看评论

相关 [responsive images 响应式] 推荐:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Responsive Web Design 的一些技巧和想法

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

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

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

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 以下不支援.