版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/whh181/article/details/67633731
- 如何挑选第三方组件,轮播carousel插件,owl-carousel2
- 响应式图片
- 图片压缩,与webp
如何挑选第三方组件
不重复造轮子,就要选择一个好轮子:
1.使用人数
2.是否开源
3.文档是否齐全
4.活跃性
5.轻量级
随便选一个,轮播的插件还是很多的owl-carousel2,符合上述条件,使用看官方文档还是比较简单上手的。
响应式图片
加载与用户设备相匹配的图片,既快速又不会影响用户体验!
1.js或者服务器
$(document).ready(function () {
function makeImageResponsive() {
var width = $(window).width();
if(width < 400){使用A图片}else {使用B图片}
}
$(window).on('resize load',makeImageResponsive);
})
直接看代码,就是读取浏览器width选择相对应的图片,此外还可以设置cookie配置不同图片。
2.srcset和sizes
看大神的解释
响应式图片srcset全新释义sizes属性w描述符,列子如下
图片压缩和webp
图片压缩可以给用户带来极大体验度提升,UI给出的png图通过压缩后一般可以缩小1/3,且像素效果差不多。
推荐网站
webp是谷歌开发的图片格式,同质量下比jpg小1/3。