雄安专业网站建设,深圳网站建设公司怎么做,快速搭建网站教程,朝阳改版网站背景
为方便客户减少图片的处理#xff0c;h5端需要加载20m的大尺寸图片
思路
格式转换为webp 图片分割 懒加载
编码实战
import React, { useEffect, useState } from react;
import LazyLoad from react-lazyload;
import { View, Image } from tarojs/components;
imp…背景
为方便客户减少图片的处理h5端需要加载20m的大尺寸图片
思路
格式转换为webp 图片分割 懒加载
编码实战
import React, { useEffect, useState } from react;
import LazyLoad from react-lazyload;
import { View, Image } from tarojs/components;
import ss from ./index.module.scss;function ImageComp({imageSrc,
}) {const [imgList, setImgList] useStatestring[] | []([])useEffect(() {const xhr new XMLHttpRequest()xhr.open(get, ${imageSrc}?x-oss-processimage/info)// 使⽤ xhr 对象中的 send ⽅法来发送请求 xhr.send()xhr.onreadystatechange function () {// 监听xhr对象的请求状态 与服务器的响应状态if (this.readyState 4 this.status 200) {// 如果响应就绪的话就创建表格(拿到了服务器响应回来的数据xhr.responseText)console.log(xhr.responseText, JSON.parse(xhr.responseText))const imgInfo JSON.parse(xhr.responseText)const heightUnit Math.ceil(imgInfo.ImageWidth.value / 750); // 根据宽度确认是几倍图const heightSize 600; // 用于分割的尺寸const imgNum Math.ceil(imgInfo.ImageHeight.value / heightSize / heightUnit)const imgListTemp Array.from(new Array(imgNum), (_, index) ${imageSrc}?x-oss-processimage/format,webp/resize,w_750/indexcrop,y_${heightSize * heightUnit},i_${index})setImgList(imgListTemp)console.log(imgList, imgListTemp)}}}, [])return (View className{ss.root}{imgList.map(i {return (LazyLoad key{i} height{400} offset{200} onceImagekey{i}style{{ width: 100%, height: 100% }}src{i}//LazyLoad)})}/View);
}export default ImageComp;
参考资料
阿里云对象存储oss操作指南数据处理图片处理
