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

来源：互联网发布：随机森林算法优化研究编辑：程序博客网时间：2024/05/22 15:01

一、什么是响应式图片

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

响应式布局是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 tempRewriteCond %{QUERY_STRING} full=(.*)&?RewriteRule (.*)rwd-router/.*\.(jpe?g|png|gif|webp) $1%1 [L]# ignore trap for non-image requests, rewrite URL without trap segmentRewriteRule (.*)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标签的情况下），让全局路径恢复原始的。

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

0 0