响应式图片一 js实现

响应式设计是为了兼容手机,pc,ipad等设备,但是要在手机上去加载为pc设计的几百k的图片,这是比较耗流量的,并且还需要更长的加载时间。这个时候我们考虑加载与设备大小相匹配的图片。
响应式图片不仅仅是指图片的大小,更多的是指根据设备大小加载不同的图片。今天我们先说一下第一种方法,通过java script或服务端实现。其原理就是window的resize事件,resize事件会在元素的尺寸大小被调整时触发。具体的代码如下。

响应式图片一 js实现

类似的这种方法还有:通过把屏幕或是设备信息写入cookies,在获取图片的时候在服务器端决定返回哪种图片,这样的话就不需要写脚本了。

但是,通过js的方法,需要我们编码实现响应式的逻辑,修改的时候不是很方便,是一种命令式的实现,下一次来说一下声明式的方法,声明的方法就是把这些图片声明在html中,由浏览器根据屏幕的大小,来觉得加载哪种图片。