webp 编写文档

1.html同步图片编写

<img class="pic" src="$!{newProduct.image}.300x300.png$!{isWebp}" srcset="$!{newProduct.image}.150x150.png$!{isWebp} 1x, $!{newProduct.image}.300x300.png$!{isWebp} 2x">  

ps: number x number不是模糊编写的,而是按照设计稿量的图片尺寸进行编写,若750规格的设计稿量的图片为300x300,则此处也写为300x300

2.懒加载图片编写

<img class="goods-pic j_Lazyload" data-original="{{$value.image}}.300x300.png" src="http://cdn1.showjoy.com/images/a5/a560e106324d4670acd11b69aee0f11f.png">  

ps: data-original为实际图片地址,只需要带上number x number就可以,剩下的兼容在lazyload.js插件中已经集成。

src中的是占位图片。

3.less

.retinabg(http://cdn1.showjoy.com/images/bb/bb1c8b0d275e4ba2903dc822a03add50.png; 300x300; 150x150; png)

webpbg(http://cdn1.showjoy.com/images/bb/bb1c8b0d275e4ba2903dc822a03add50.png);  

ps: .retinabg() 使用在需要适配retina屏和非retina的情况,没有特殊情况需要默认选择此项。

.retinabg(@file-2x; @reg-2x; @reg-1x; @type)

@file-2x: 两倍图片的url

@reg-2x: 例300x300

@reg-1x: 例150x150

@type: 原始图片类型 eg png

.webpbg(@url)

@url: http://cdn1.showjoy.com/images/bb/bb1c8b0d275e4ba2903dc822a03add50.png

南洋

继续阅读此作者的更多文章

尚妆大厦 http://www.lvdada.org