中午看《众妙之门》看到一个响应式图片处理工具（点此查看）的介绍，然后就心血来潮想着不妨自己写一个基于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. softmax分类器+cross entropy损失函数的求导

    softmax是logisitic regression在多酚类问题上的推广,\(W=[w_1,w_2,...,w_c]\)为各个类的权重因子,\(b\)为各类的门槛值.不要想象成超平面,否则很难理解 ...

  2. H5学习系列之Audio和Video

    1.视频文件:音频轨道.视频轨道和一些元数据(视频封面.标题.子标题.字幕等相关信息). 2.目前H5还不支持的:流式音频和视频(H5对视频的支持只限于加载的全部媒体文件).H5的媒体收到跨域资源共享 ...

  3. 第四章 使用Docker镜像和仓库(二)

    第四章 使用Docker镜像和仓库(二) 回顾: 开始学习之前,我先pull下来ubuntu和fedora镜像 [#9#cloudsoar@cloudsoar-virtual-machine ~]$s ...

  4. linux下svn常用命令

    (如果是第一次提交文件,很可能会出现“svn:'.'不是工作副本”,即当前目录不是工作副本,这个时候需要用到import: eg:svn import . url) 1.将文件checkout到本地目 ...

  5. ADO.net操作数据库

    今天整理硬盘,发现2年前开始着手开始学习C#的学习日记.陆续整理,一是自己的知识梳理梳理,二是希望与大家多多交流,能给初学者带来一定帮助,当然是更高兴的啦. 断线对象 另一类是与数据源无关的断线对象, ...

  6. error while performing database login with the xxx driver

    在MyEclipse的安装路径下D:\Program Files\MyEclipse 6.0\eclipse下面找到eclipse.ini文件,用记事本打开 eclipse.ini文件 -showsp ...

  7. leetcode problem sum

    2. Add Two Numbers You are given two linked lists representing two non-negative numbers. The digits ...

  8. stm32软件模拟IIC读取PX4FLOW光流传感器数据

    这段时间在做全国光电设计大赛,用到了px4的px4flow光流传感器,用软件模拟iic读取数据不定期会导致px4flow死机,查了资料和光流的源码,发现这个光流用了stm32的硬件iic,所以对软件模 ...

  9. Head First 设计模式读书笔记

    在网上学习了一段时间设计模式,总感觉不系统,很容易忘,最近买书,学习了<Head First设计模式>,受益匪浅,特做此记录,以便激励自己不断的向后学习. 原书JAVA版本,本次学习记录及 ...

  10. Spring 学习笔记 4. 尚硅谷_佟刚_Spring_属性配置细节

    1,字面值 •字面值:可用字符串表示的值,可以通过 <value> 元素标签或 value 属性进行注入. •基本数据类型及其封装类.String 等类型都可以采取字面值注入的方式 •若字 ...