继续送假期干货——响应式图片工具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来查看。

共勉~

posted @ 2014-10-02 20:15  vajoy  阅读(1818)  评论(4编辑  收藏  举报
Copyright © 2014 - 2020 VaJoy Studio