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

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

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

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

CSS使用JS加载webP图片

使用Modernizr加载webP图片

.webp .BackgroundImage {

}

.no-webp .BackgroundImage {

}

.no-js .BackgroundImage {

}

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

@supports (-webkit-appearance:none){

.BackgroundImage {

}

网页加载webp图片

使用picture

使用JS加载webp图片

预先为src设置两个属性

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

if(Modernizr.webp){

/* support webp */

$("img").each(function(i,v){

var src = $(v).attr('webppic-src');

$(v).attr('src',src);

})

}

else{

/* not support webp */

$("img").each(function(i,v){

var src = $(v).attr('pic-src');

$(v).attr('src',src);

})

}

推荐下面这个,官方DEMO

Modernizr.on('webp', function(result) {

if (result) {

/* support webp */

$("img").each(function(i,v){

var src = $(v).attr('webppic-src');

$(v).attr('src',src);

})

} else {

/* not support webp */

$("img").each(function(i,v){

var src = $(v).attr('pic-src');

$(v).attr('src',src);

})

}

});

其他方法见参考文章

nginx服务端支持webp图片

目前可以使用第三方模块ngx_webp

自动转换jpg到webp. 由于比较耗CPU,没有测试

https://github.com/vladbondarenko/ngx_webp

LUA脚本也可以自动转换,比较麻烦,不折腾了

参考文章

https://css-tricks.com/using-webp-images/

https://bingyishow.top/Technical-article/71.html

https://stackoverflow.com/questions/5573096/detecting-webp-support

https://modernizr.com/docs

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

webp的js插件_网页webp解决方案
背景说明某个国际化项目.前端用的技术栈是vue全家桶,使用nuxt-ssr渲染. 项目遇到的问题项目中用到了大量的产品图片和比较大的banner图片.因为服务器在国外,也没有对静态服务器有相应的配 ...
Glide加载webp动画及监听动画播放结束
Glide加载图片非常方便,使用也非常广泛,但是并不能直接支持webp动图. 可能很多人会使用Fresco来加载webp,但是对于已经使用Glide的项目,总感觉再使用Fresco有点冗余,如果能用G ...
利用Jquery Lazyload JS插件实现网页图片延迟加载
Jquery Lazyload是一款网页图片延迟加载JS插件,本文介绍该JS的使用方法. 最新的jquery lazyload可以单独使用(即不依赖jquery),本文介绍的是依赖jquery的使用及 ...
js插件---10个免费开源的JS音乐播放器插件
js插件---10个免费开源的JS音乐播放器插件一.总结一句话总结:各种插件都有很多,多去找. 二.js插件---10个免费开源的JS音乐播放器插件亲测可用音乐播放器在网页设计中有时候会用到, ...
超便捷好用的-圆形花瓣加载滚动图片插件spin.js
使用ajax异步请求时显示过渡的加载滚动图片是在常用不过的事情,接下来和大家分享这个插件. 样子示例:(只有这一个样子,可以动态设置显示大小.花半数.颜色等各项参数) 注:如果需要更绚丽样式的童鞋,请 ...
java 图片插件_[Java教程]10款功能强大的jQuery/CSS3图片特效插件
[Java教程]10款功能强大的jQuery/CSS3图片特效插件 0 2014-11-26 03:01:04 1.CSS3实现的底部带滚动云彩效果的网站登录页面 CSS3实现的底部带滚动云彩效果的网 ...
node.js css文件已经被加载但是无法渲染页面的问题和解决方法
问题:在使用node.js创建了一个服务器,加载html页面后css文件已经被加载但是页面没有被渲染如图此时已经证明了路径是没有问题的,那么问题出现在哪里? 代码如下 const fs = req ...
vue动态加载js和css以及部分页面加载特定的js和css
vue动态加载js和css以及部分页面加载特定的js和css vue项目第一次加载很慢的,发现在第一次加载要很大的js导致卡顿.可以使用cdn加速和其他gzip方式效果不是很明显.因此考虑每个页面动态 ...
图片预加载、图片延迟加载插件
网站上经常会有这种现象. 1.带有图片的列表页面图片没有加载过来时候,页面排版是乱的. 2.图片加载失败后显示一个裂痕玻璃图片并不友好为了解决这些现象我自己封装了了个插件: /*图片加载未完成显 ...
【js】【cornerstone】cornerstone使用url方式加载图像
[js][cornerstone]cornerstone使用url方式加载图像引入cornerstoneWebImageLoader loadImage 引入cornerstoneWebImageL ...

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

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

最新文章

热门文章