webp的js插件_网页及CSS使用JS脚本加载webP图片

webP是Google开发的最新图片格式.

webP图片具有很多优点,最重要的是压缩率极高.

webP图片的使用有利于减少网站流量,提升网页加载速度

CSS使用JS加载webP图片

使用Modernizr加载webP图片

.webp .BackgroundImage {

background-image: url("image.webp");

}

.no-webp .BackgroundImage {

background-image: url("image.jpg");

}

.no-js .BackgroundImage {

background-image: url("image.jpg");

}

使用webkit特性加载webP图片(未测试)

@supports (-webkit-appearance:none){

.BackgroundImage {

background-image: url(/img/bannerbg.webp);

}

}

网页加载webp图片

使用picture

使用JS加载webp图片

预先为src设置两个属性

使用JS替换src地址(依赖jquery和Modernizr)

if(Modernizr.webp){

/* support webp */