獲取阿里云圖片的過程
服務器返回圖片地址——請求服務器返回圖片真實地址——獲取圖片

目前遇到的問題
重復進行1的過程影響性能，實現圖片加速加載。

在實際開發中的表現

·滑動列表時滑出去的item再次顯示時會重復上述過程。
·反復查看某張圖片。

實現過程
4.1 已經完成的實現

let params = {pics: paths, process: 'image/resize,m_fixed,w_76,h_76'};// network是封裝的聯網請求 let result = await network({type: "POST",url: '/mobile/oss/signForAppPic',param: params}, token);let reSetResult = result.response ? result.response : result; let realPaths = reSetResult.result;

???????實現了在加載圖片之前，從服務器獲取真實的圖片地址realPaths，然后再交給Image組件展示。發現真實的圖片路徑：https://gysy-picture.oss-cn-beijing.aliyuncs.com/app/x61tnmfx/BGQZ/ba112d3b-d41c-438a-ae88-002069a71aac.jpg?Expires=1543212261&OSSAccessKeyId=**********&Signature=*********&x-oss-process=image%2Fresize%2Cm_fixed%2Cw_100%2Ch_100。
???????有一個參數Expires是該圖片在阿里云失效的時間秒數。因此，出現了一個解決思路就是：緩存真實的圖片地址，每次加載圖片時先看是否有緩存，緩存的圖片是否在有效期內，如果是就直接加載圖片；否的話，獲取圖片真實地址，再加載圖片并緩存。

4.2 實現步驟

• 圖片地址的緩存，實現包括：初始化緩存對象、獲取緩存中的值、設置緩存中的值。通過這幾個方式實現了緩存的管理。（見4.3使用）

• 有效期的判斷，通過Expires與當前時間的對比。在已實現代碼前添加判斷，添加后：

let realPaths；if (isValid(cacheRealPaths) && this.state ) {realPaths = cacheRealPaths;return; }let params = {pics: paths, process: 'image/resize,m_fixed,w_76,h_76'}; // network是封裝的聯網請求，可以根據實際的聯網請求進行更改 let result = await network({type: "POST",url: '/mobile/oss/signForAppPic',param: params}, token); let reSetResult = result.response ? result.response : result;realPaths = reSetResult.result;

4.3 使用
???????將使用的方法封裝到了ALiYunImageCache.js中。

/*** 初始化緩存對象* @param arr* @returns {*}*/ let initCache = (arr) => {if (arr) {return new Array(arr.length);} else {return null;}};/*** 獲取緩存中的值* @param arr* @param index* @returns {*}*/ let getCache = (arr, index) => {if (arr && arr.length > index) {return arr[index];} else {return arr;}};/*** 設置緩存中的值* @param arr* @param index* @param newItem* @returns {*}*/ let setCache = (arr, index, newItem) => {if (arr && arr.length > index) {return arr[index] = newItem;} else {return newItem;}};/*** 驗證緩存是否有效* @param cacheRealPaths* @returns {boolean}*/ let isValid = (cacheRealPaths) => {if (cacheRealPaths && cacheRealPaths.length > 0) {let start = cacheRealPaths[0].indexOf('=') + 1;let end = cacheRealPaths[0].indexOf('&');let validTime = parseInt(cacheRealPaths[0].substring(start, end));let curTime = (new Date().getTime()) / 1000;if (validTime > curTime) {return true;}}return false; };module.exports = {initCache, getCache, setCache, isValid};

• 初始化
  ???????構造方法里和緩存對象變化時，使用其中的initCache(arr)方法，返回保存的變量。arr：緩存的對象是列表時，傳入對應的數組；否則傳服務器返回的圖片地址。
• 獲取緩存對象
  ???????給展示圖片的組件使用，getCache(arr, index)。arr是第一步保存的變量，index：緩存的對象是數組時，傳入list中對應的索引；否則不傳。
• 更新緩存
  ???????使用setCach(arr, index, newItem)。arr是第一步保存的變量，index：緩存的對象是數組時，傳入list中對應的索引；否則傳null。newItem：傳新需要緩存的圖片地址。

例子（一個列表每個item包含多張圖片）

export default class demo extends Component {constructor(props) {super(props);// 初始化this.cacheRealPaths = initCache(props.connectListData);}componentWillReceiveProps(props) {if (props.dataList !== this.props.dataList) {// 所對應list數據變化時，重新初始化緩存this.cacheRealPaths = initCache(props.dataList);}};renderItem = ({item, index}) => (<DemoItemindex={index}data={item}cacheRealPaths={getCache(this.cacheRealPaths, index)} // 獲取該index對應的緩存 updateCacheRealPath={(index, arr) => setCache(this.cacheRealPaths, index, arr)} // 設置index對應的緩存 />);render() {return (<View><FlatListdata={this.props.dataList}keyExtractor={(item) => this.keyExtractor(item)}renderItem={this.renderItem}/></View>);} }class DemoItem extends Component {render() {return (<View><PhotoHorizontalScroll paths={this.props.data.pictures}cacheRealPaths={this.props.cacheRealPaths}updateCacheRealPath={(arr) => this.props.updateCacheRealPath(this.props.index, arr)}</View>)} }export default class PhotoHorizontalScroll extends Component {// 構造constructor(props) {super(props);this.state = {paths: []};...this.newPaths = null;}...showPictures = async (paths, cacheRealPaths) => {this.newPaths = paths;if (paths && paths.length > 0) {// 添加有效判斷if (isValid(cacheRealPaths) && this.state ) {this.setState({paths: cacheRealPaths});return;}let userInfo = await getUserInfo();let token = '';if (userInfo) {token = userInfo.access_token;}let params = {pics: paths, process: 'image/resize,m_fixed,w_76,h_76'};let result = await network({type: "POST",url: '/mobile/oss/signForAppPic',param: params}, token);let reSetResult = result.response ? result.response : result;// 通知父組件更新緩存this.props.updateCacheRealPath && this.props.updateCacheRealPath(reSetResult.result);if (this.newPaths === paths && this.state) {this.setState({paths: reSetResult.result})}}else {if (this.state) {this.setState({paths: []})}}};...render() {return (<ScrollView style={[this.props.style]}horizontal={true}showsHorizontalScrollIndicator={false}><View style={{flexDirection: 'row'}}>{this.renderImages(this.state.paths)}</View></ScrollView>);} }

總結

以上是生活随笔為你收集整理的js优化阿里云图片加载(一)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。