响应式图片切换加载方式

作为一个PS保存图片时,在图片质量和大小之间周旋良久的前端小妹,实在不能忍受响应式页面需要同时加载桌面版和手机版所需的图片或资源。那么多图片,得要拖慢多少时间?得要耗费多少流量?!好吧,我承认我总是要么很迷糊要么很爱钻牛角尖。。。

加载图片要么img标签,要么写在css背景图片里。

如果桌面版需要加载这三张大图(实际宽940px,高400px,下图已缩小做展示用):

img01 img02 img03

而手机上需要换成另外三张(宽300px,高200px):

img02_mobile img03_mobile img01_mobile

 

一,html加载图片

Demo:   http://kittywei.com/apps/img_loading/index_mediaquery_02.html

用media query将图片显示和隐藏(display)。

电脑浏览器打开页面,桌面版图片显示,手机版图片隐藏。手机浏览器打开,桌面版图片隐藏,手机版图片显示。于是,无论电脑、手机,把所有图片都下载下来勒>.<

1

 

二,css加载图片

将三张大图当作背景加到css文件,在用media query将小图同样以背景图的方式在手机上显示出来(background)。

Demo:   http://kittywei.com/apps/img_loading/index_mediaquery.html

电脑:

2

手机:

3

妈妈再也不用担心我手机上把电脑用的图也加载出来啦!

 

三,如果这些图片真的不能做背景用呢?一定要做成img呢?JS条件判断一下!

如果你用modernizr.js就太好了!耶!鼓掌欢迎!这家伙真让人省心省力。。

Demo:http://apps5.asiaappdeveloper.com/test/media_query/index_js.html

它给html加上的浏览器所支持属性的class名,任你潇洒地修改样式。

Chome:

4

IE8:

5

电脑图片加载:

6

手机图片加载:7

于是,即使是img,也不用display none block 啦!

 

之所以写这篇小文,是因为曾以为只要是写在css中的背景图片,无论是media query之外还是以内,全部都会被同时加载>.<  业界大牛请勿鄙视之。