背景: 需要要求M端swiper图片的展示逻辑根据第一张图定义其余图片的展示,第一张图宽高各100%展示,其余图片根据第一张来,高度或宽度不足的补白,当借口未返回图片宽高时,并且存在lazy加载的时候,图片太大lazy异步比较严重,以下解决lazy异步的问题:
getImgHeightByJs(){
if(!firstImgPath) return firstImg.height(firstImg.eq(0).height()); // 图片路径不存在,取swiper中lazyload加载完成的
let newImg = new Image;
newImg.src = firstImgPath; // 赋值图片路径
newImg.onload = function(){
if(newImg.complete && newImg.width) { // width不存在说明图片加载失败是错误的图片
let imgHeight = ($('body').width()/newImg.width)*newImg.height;
firstImg.height(imgHeight)
}
};
}
图片居中补白逻辑:
1.定义图片宽高
2.图片设置css object-fit: container;