继续送假期干货——响应式图片工具smartImg
中午看《众妙之门》看到一个响应式图片处理工具（点此查看）的介绍，然后就心血来潮想着不妨自己写一个基于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的更多相关文章
- 【读书笔记《Bootstrap 实战》】3.优化站点资源、完成响应式图片、让传送带支持手势
A.优化站点资源 速度很重要.用户很关心.我们的站点必须加载够快,否则用户就会走人.SEO 也很重要.我们的站点必须加载够快,否者搜索排名就会下降. 明白了这样,我们就来清点一下 [Bootstrap ...
- web响应式图片设计实现
.header { cursor: pointer } p { margin: 3px 6px } th { background: lightblue; width: 20% } table { t ...
- Bootstrap<基础十> 响应式实用工具
Bootstrap 提供了一些辅助类,以便更快地实现对移动设备友好的开发.这些可以通过媒体查询结合大型.小型和中型设备,实现内容对设备的显示和隐藏. 需要谨慎使用这些工具,避免在同一个站点创建完全不同 ...
- 【Bootstrap】3.优化站点资源、完成响应式图片、让传送带支持手势
A.优化站点资源 速度很重要.用户很关心.我们的站点必须加载够快,否则用户就会走人.SEO 也很重要.我们的站点必须加载够快,否者搜索排名就会下降. 明白了这样,我们就来清点一下 [Bootstrap ...
- bootstrap-内联表单 水平（横向）表单 响应式图片 辅助类 [转]
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- bootstrap中如何让响应式图片（img-responsive）水平居中
我们在用bootstrap排版内容的时候,有的时候在内容中需要图片水平居中对齐. 一般情况下,我们的图片都使用了 .img-responsive 类来实现响应式图片.如果需要实现响应式图片水平居中,那 ...
- 响应式图片srcset学习
响应式图片srcset全新释义sizes属性w描述符 先转再看
- CSS 与 HTML5 响应式图片
什么是响应式图片? 响应式图片是指:用户代理根据输出设备的分辨率不同加载不同类型的图片,不会造成带宽的浪费.同时,在改变输出设备类型或分辨率时,能及时加载对应类型的图片. CSS3 响应式图片 对于很 ...
- picturefill + picture 标签 实现兼容性很棒的 响应式图片 自适应 屏幕大小
polyfill 它是一个能够补齐浏览器兼容性问题的一个东西,使用到的<picture></picture>标签 ,并不是所有浏览器都支持,为了实现更好的兼容效果,这里就使用到 ...
随机推荐
- QT5.2.1大BUG
本来以为5.2.1是release版本 谁知道编译某个程序,执行老是crash 换5.3.2就ok了. 坑啊
- XE3随笔19：实例 - 借用 Google 实现全文翻译
调用 Google 翻译的地址格式: http://ajax.googleapis.com/ajax/services/language/translate?v=1.0&q=" + ...
- 解决JQuery.ajax.post乱码问题
问题:昨天在进行项目功能实现时,利用了$.ajax吧数据post给服务,接着保存到cookie中,而数据中是带有中文的 我的post代码: comCarId=encodeURIComponent(co ...
- ADV-时间分配
#include<stdio.h> int map[20][4]; typedef struct node{ int star; int end; }node; node dui[100] ...
- Beyond Compare 2
Beyond Compare 2 确实很好用,差异行不交叉,自动留出空白,比windiff要清楚.
- jsp jsp指令
JSP 由HTML和java语句拼接而成的文本,后缀名为.jsp 1.Jsp翻译成servlet:先翻译,Tomcat将翻译后的文件放置在安装目录下(所有JSP页面本质上就是Servlet程序) 2. ...
- c# 调用 matlab
如果本机没有安装Matlab 需要安装一个叫 MCRInstaller 的东西 运行环境 如果安装后 需要把D:\MATLAB\R2013a\bin\win64; 写入环境变量 (路径根据实际情况改 ...
- IIS7.5 由于 Web 服务器上的“ISAPI 和 CGI 限制”列表设置，无法提供您请求的页面
IIS7.5中将一网站应用程序池托管管道模式改为经典后,网站页面打不开,错误信息: 引用内容 HTTP 错误 404.2 - Not Found由于 Web 服务器上的“ISAPI 和 CGI 限制” ...
- flex中通过代码获取supermap的token
最近工作中需要使用代码来获取supermap服务启动安全访问限制以后的token值,经过一番尝试,最终成功获取到,记录下里,以供翻阅 //get token public function getTo ...
- HTTP协议-----小白
HTTP是一个属于应用层的面向对象的协议. ***OSI的7层从上到下分别是 7 应用层 6 表示层 5 会话层 4 传输层 3 网络层 2 数据链路层 1 物理层 HTTP协议的主要特点可概括如下: ...