继续送假期干货——响应式图片工具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响应式图片设计实现
随着移动开发热潮的兴起,已经有越来越多的公司将移动端的开发列为核心,其中不论是webapp还是手机页面都是如此,在开发的过程中就涉及到了一个web响应式图片的问题,这里我们就来探讨一下响应式图片的实现 ...
- 响应式图片-压缩处理工作流
图片压缩会让加载图片占用更少的带宽,同时不影响视觉效果.你可能会考虑到图片质量和大小,对于网上的图片而言,其实只需要考虑大小. 使用开发者工具查看网页中图片 查看网页中显示的3张图片一样,当我们通过开 ...
- html5手机端响应式图片相册幻灯片插件特效
html5手机端响应式图片相册幻灯片插件特效 作品介绍 1.网页作品简介方面 :html5手机端响应式图片相册幻灯片插件特效 2.网页作品编辑方面:作品下载后可使用任意HTML编辑软件(例如:DW.H ...
- 【转】CSS 与 HTML5 响应式图片
关于响应式的,近来国内外也不断提到,还是目前比较流行的技术话题,这篇文章来至淘宝UED的,讲得是响应式图片,写得很不错. 随着 Retina 屏幕的逐渐普及,网页中对图片的适配要求也越来越高.如何让图 ...
- 通过padding-bottom或者padding-top实现等比缩放响应式图片
之前同事说padding-bottom 可以实现等比缩放响应式图片,当时忙,没有好好看-- 今天特意思考了下,实现的css代码如下: .img-container {position: relativ ...
- HTML5 响应式图片
现在上网设备越来越多,各种设备的屏幕千差万别,如果只用一张图片去涵盖所有的设备,一是可能会造成某些设备上显示效果不佳,比如使用了一张低清晰度的图,而网页运行在一个高清大屏里:二是可能会浪费带宽,比如使 ...
- html中图片响应式怎么写,如何使用 HTML5 的picture元素处理响应式图片
图片在响应式网页设计中是出了名的最具挑战性的方面之一.今天我们就来看看如何使用元素来处理响应式图片. 让我们先了解一下问题 固定宽度,像素完美的网站设计已经离我们远去了.在宽屏显示器,互联网电视,多尺 ...
- CSS 与 HTML5 响应式图片
随着 Retina 屏幕的逐渐普及,网页中对图片的适配要求也越来越高.如何让图片在放大了两倍的 Retina 屏幕显示依然清晰,曾经一度困扰着网页开发者,好在 CSS3 与 HTML5 已经着力在改变 ...
最新文章
- IOS 百度地图获取当前屏幕的经纬度
- linux shell 脚本 获取当前函数名
- js课程 5-14 js如何实现控制动画角色走动
- MarshalByRefObject浅析
- 机器学习第三篇:详解朴素贝叶斯算法
- linux read nchars,Linux常用命令--read
- pyqt控件显示重叠_Python编程:一个不错的基于PyQt的Led控件显示库,建议收藏学习...
- el-table表格fixed=“right“后表格错乱;Safari浏览器el-table表格错乱;Safari浏览器样式需改无效;
- 求以下double数组的平均值(四舍五入保留两位小数):
- 用jsonserve和axios做交互_详解解决使用axios发送json后台接收不到的问题
- oracle 添加监听地址,oracle批改监听地址为localhost
- 遇到一个Linux系统文件被删除后仍占用磁盘的问题
- C++ string 用法详解(转)
- 【Python笔记】网络爬虫——介绍
- python和java选择哪个-Java、Python你会选择哪个?老男孩python
- Spring的数据库编程浅入浅出——不吹牛逼不装逼
- mysql 事务、隔离级别
- require和include的区别(PHP)
- 使用Diskgenius将U盘分区,分为启动盘和文件存储两大功能详解
- OSChina 周六乱弹 —— 女菩萨,你可愿做贫僧的……