中午看《众妙之门》看到一个响应式图片处理工具（点此查看）的介绍，然后就心血来潮想着不妨自己写一个基于JQ的吧，于是就又有了这么一个干货给大家。

smartImg 的全部文件可以从我的Github上下载，其实它非常小巧，去掉注释一共也就40行，之所以这么轻便，JQ也是帮了大忙。

应用场景

我们在搭建响应式页面时，对于图片的处理或多或少都有些烦躁，例如我们希望在某个屏宽的环境下显示某一张图片，在另一个屏宽的环境下则显示为另一张图片。

这种做法对于用户体验是比较重要的，常规建议是用户用大屏幕设备访问我们页面时，图片显示为大分辨率的；若用户使用小屏幕的移动设备访问我们页面时，依旧加载大尺寸的图片显然是很不妥当的做法，这样太吃用户流量，也影响加载速度。

我们的确可以用一个设置有background的容器来替代图片，然后在css media query中定义不同屏宽范围下该容器背景所对应的地址，但这种写法较为繁琐、不利维护和seo（当然它的效率会高一些）。

smartImg为解决这个问题提供了方案。

使用方式

在页面引入了jQuery和smartImg文件之后，在需要响应的<img>标签里添加 s-src="图片地址1 屏宽1,图片地址2 屏宽2, ..., 图片地址n 屏宽n" ，若屏宽参数没写则默认为0。

如下示例：

<img s-src="img/large.jpg 900,img/huge.jpg 1100,img/small.jpg" />

它表示当屏幕宽度大于1100px时显示img/huge.jpg，当屏幕宽度小于1100px但大于900px时显示img/large.jpg，其它更小屏幕宽度时则显示img/small.jpg。

当然，如果图片地址前缀是一样的，我们还可以加上s-prefix属性：

<img s-prefix="img/" s-src="large.jpg 900,huge.jpg 1200,middle.jpg 650,small.jpg 0" />

smartImg也为页面动态图片提供方案，在图片动态地新增后执行 $.smartImg() 方法即可。

虽然初衷是将其用于移动页面，但smartImg也可用于PC页面，支持屏幕大小缩放事件。

Demo

<!DOCTYPE html>

<html>

  <head>

    <meta http-equiv="Content-type" content="text/html; charset=utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

    <title>Demo</title>

    <style type="text/css">

      html,body{margin:0;padding:0;}

      div{position:relative;margin:20px auto;width: 90%; }

      .img1{width: 100%;}

      .img2{width: 100%;}

    </style>

  </head>

  <body>

        <div>

            <img class="img1" s-prefix="img/" s-src="large.jpg 900,huge.jpg 1200,middle.jpg 650,small.jpg 0" />

            <img class="img2" s-src="img/large2.jpg 900,img/huge2.jpg 1100,img/small2.jpg" />

        </div>

        <script src="jq.js"></script>

        <script src="smartImg.js"></script>

  </body>

</html>

效果：

更具体的体验请下载 smartImg 后自行运行demo.html来查看。

共勉~

继续送假期干货——响应式图片工具smartImg的更多相关文章

  1. 【读书笔记《Bootstrap 实战》】3.优化站点资源、完成响应式图片、让传送带支持手势

    A.优化站点资源 速度很重要.用户很关心.我们的站点必须加载够快,否则用户就会走人.SEO 也很重要.我们的站点必须加载够快,否者搜索排名就会下降. 明白了这样,我们就来清点一下 [Bootstrap ...

  2. web响应式图片设计实现

    .header { cursor: pointer } p { margin: 3px 6px } th { background: lightblue; width: 20% } table { t ...

  3. Bootstrap<基础十> 响应式实用工具

    Bootstrap 提供了一些辅助类,以便更快地实现对移动设备友好的开发.这些可以通过媒体查询结合大型.小型和中型设备,实现内容对设备的显示和隐藏. 需要谨慎使用这些工具,避免在同一个站点创建完全不同 ...

  4. 【Bootstrap】3.优化站点资源、完成响应式图片、让传送带支持手势

    A.优化站点资源 速度很重要.用户很关心.我们的站点必须加载够快,否则用户就会走人.SEO 也很重要.我们的站点必须加载够快,否者搜索排名就会下降. 明白了这样,我们就来清点一下 [Bootstrap ...

  5. bootstrap-内联表单 水平（横向）表单 响应式图片 辅助类 [转]

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  6. bootstrap中如何让响应式图片（img-responsive）水平居中

    我们在用bootstrap排版内容的时候,有的时候在内容中需要图片水平居中对齐. 一般情况下,我们的图片都使用了 .img-responsive 类来实现响应式图片.如果需要实现响应式图片水平居中,那 ...

  7. 响应式图片srcset学习

    响应式图片srcset全新释义sizes属性w描述符 先转再看

  8. CSS 与 HTML5 响应式图片

    什么是响应式图片? 响应式图片是指:用户代理根据输出设备的分辨率不同加载不同类型的图片,不会造成带宽的浪费.同时,在改变输出设备类型或分辨率时,能及时加载对应类型的图片. CSS3 响应式图片 对于很 ...

  9. picturefill + picture 标签 实现兼容性很棒的 响应式图片 自适应 屏幕大小

    polyfill 它是一个能够补齐浏览器兼容性问题的一个东西,使用到的<picture></picture>标签 ,并不是所有浏览器都支持,为了实现更好的兼容效果,这里就使用到 ...

随机推荐

  1. 记一次PHP7+opcache+zmq出现SIGSEGV 问题的查找(一次不成功的bug查找)

    Title:  记一次PHP7+opcache+zmq出现SEGSEGV问题的查找(一次不成功的bug查找) bug来历自述:线上代码PHP环境是5.2,为了提升性能(逼格),于是升级为PHP7并使用 ...

  2. --with-http_realip_module选项（后台Nginx服务器记录原始客户端的IP地址 ）

    转自:http://blog.itpub.net/27043155/viewspace-734234/ 通过这个模块允许我们改变客户端请求头中客户端IP地址值(例如,X-Real-IP 或 X-For ...

  3. webform的页面缓存

    给页面添加<%@ OutputCache Duration="10" VaryByParam="*"%>标签就可以启用页面缓存. Duration表 ...

  4. DB2死锁的解决办法

    db2 get snapshot for locks on sampledb2 get db cfg for sampledb2 update db cfg using dlchktime 10000 ...

  5. VS2012常用快捷键

    Ctrl+K,D ----格式化全部代码 Ctrl+K,F ----格式化选中的代码 Ctrl+K,C ----注释选定内容 Ctrl+K,U ----取消注释选定内容 Ctrl+J或者 Ctrl+S ...

  6. block的解析

    1. 操作系统中的栈和堆 我们先来看看一个由C/C++/OBJC编译的程序占用内存分布的结构: 栈区(stack):由系统自动分配,一般存放函数参数值.局部变量的值等.由编译器自动创建与释放.其操作方 ...

  7. 在rails中 Rendering Partials through Ajax

    之前做.net的时候,自己做了一个showcontent的插件,用来加载页面的局部partial 之前采用的是ashx的方式 但rails里面不太方面,今天找到一个比较好的方法,试验成功 起初网上找到 ...

  8. BulkyCopy .Net

    It has being ages to get back to cnblogs, Career path had been changed back to .Net development in 4 ...

  9. CSS无序列实现表宽度自适应的表格

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. checkbox、全选反选，获取值

    <input id="Chk_All" onclick="CheckAll()" type="checkbox" /> < ...