根据第一张图片设置定义swiper其余图片的高度，解决lazy异步

最新推荐文章于 2023-12-16 14:57:24 发布

单箭头→

最新推荐文章于 2023-12-16 14:57:24 发布

阅读量175

点赞数 1

文章标签：前端 javascript

本文链接：https://blog.csdn.net/weixin_42498482/article/details/130259558

版权

文章描述了在移动端swiper组件中，如何处理图片展示的逻辑，特别是第一张图片需全屏显示，其余图片按比例填充。当图片宽高信息未知且使用懒加载时，可能出现异步加载严重的问题。通过JavaScript的Image对象预加载图片并计算高度，解决了这个问题。同时，采用CSS的object-fit:container实现图片居中和不足部分补白。

摘要由CSDN通过智能技术生成

背景：需要要求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;