程序开发步骤不包括,网站建设优化项目,wordpress 外观自定义,个人网站企业备案区别中午看《众妙之门》看到一个响应式图片处理工具#xff08;点此查看#xff09;的介绍#xff0c;然后就心血来潮想着不妨自己写一个基于JQ的吧#xff0c;于是就又有了这么一个干货给大家。 smartImg 的全部文件可以从我的Github上下载#xff0c;其实它非常小巧#xf…中午看《众妙之门》看到一个响应式图片处理工具点此查看的介绍然后就心血来潮想着不妨自己写一个基于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-srcimg/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-prefiximg/ s-srclarge.jpg 900,huge.jpg 1200,middle.jpg 650,small.jpg 0 / smartImg也为页面动态图片提供方案在图片动态地新增后执行 $.smartImg() 方法即可。 虽然初衷是将其用于移动页面但smartImg也可用于PC页面支持屏幕大小缩放事件。 Demo !DOCTYPE html
htmlheadmeta http-equivContent-type contenttext/html; charsetutf-8meta nameviewport contentwidthdevice-width, initial-scale1.0, maximum-scale1.0, minimum-scale1.0, user-scalableno /titleDemo/titlestyle typetext/csshtml,body{margin:0;padding:0;}div{position:relative;margin:20px auto;width: 90%; }.img1{width: 100%;}.img2{width: 100%;}/style/headbodydivimg classimg1 s-prefiximg/ s-srclarge.jpg 900,huge.jpg 1200,middle.jpg 650,small.jpg 0 /img classimg2 s-srcimg/large2.jpg 900,img/huge2.jpg 1100,img/small2.jpg //divscript srcjq.js/scriptscript srcsmartImg.js/script/body
/html 效果 更具体的体验请下载 smartImg 后自行运行demo.html来查看。 共勉~
