陣營與imagesLoaded，解決了最後一個值呈現

我有一個名爲PhotoTags，有一個叫getScalePercent（）函數類。在getScalePercent我做了一個簡單的計算，涉及顯示圖像的寬度和高度，並返回一個值。在PhotoTags的渲染功能中，我使用座標數據在圖片上應用元素。只有在圖像已經加載100％的情況下，該邏輯才能正常工作。如果我刷新頁面的次數足夠多，我可以看到我的邏輯實際上正確地設置了座標，但只有在圖像已被緩存或快速加載後才能進行。因此，我想使用imagesLoaded檢查圖像是否已加載，以便有效地使用座標。陣營與imagesLoaded，解決了最後一個值呈現

我的功能看起來是這樣的：

getScalePercent(){ 
     var p =0; 
     var targetWidth = $('.expanded-image').width(); 
     var targetHeight = $('.expanded-image').height(); 
     p = (targetWidth/1920); 
     return p; 
}

在我的渲染）功能，我想使用imagesLoaded檢查圖像是否使用getScalePercent（之前被加載：

render(){ 
    var p = 0; 

    $('.expanded-image').imagesLoaded().done(function() { 
     p = this.getScalePercent(); 
    }); 

    console.log(p); //But value is still 0 

    //I then want to use p later in the render function

我的變量p沒有在imagesLoaded的.done事件中被操縱。我知道這與異步調用有關，什麼不是，我已經嘗試了將圖片加載到getScalePercent（）但無濟於事。我也嘗試做一個回調getScalePercent（）和許多其他變化，但仍然無濟於事。基本上我想要做的是在imageLoaded的.done（）事件中激發getScalePercent（）。然後，我希望能夠在PhotoTags的渲染函數內使用返回值（當圖像完全加載時）返回getScalePercent（）的值。任何幫助深表感謝。

來源

2016-08-30 connected_user

所以，你必須使用''裏面回調done'到p'設置你的邏輯或它的函數調用傳遞'p'作爲參數 –

http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call –

你會不會更好只圖像上添加onload事件，這樣的事情：

class Test extends Component { 
    constructor (props){ 
     super(props); 
     this.state = { 
      imgLoaded:false 
     } 
    } 
    handleImgLoaded (event){ 
     // Do stuff 
     console.log(event.target); 
     this.setState({ 
      imgLoaded:true 
     }); 
    } 
    render(){   
     <div className={'img-wrapper-class ' + (this.state.imgLoaded ? 'img-loaded' : 'img-loading')}> 
      <img src={"somesrc.jpg"} onLoad={this.handleImgLoaded.bind(this)} /> 
     </div> 
    } 
}

來源

2016-08-30 15:45:48 Giuseppe

是否在圖像開始加載或圖像完全加載時執行onLoad命令？ –

一旦它被加載就會觸發，所以你可以使用它來顯示/隱藏加載動畫等。此外，你可以顯然訪問事件和回調中的事件目標，所以你應該能夠獲得所有的你需要的寬度等信息..編輯示例來顯示此... – Giuseppe

謝謝！我相信這是迄今爲止最正確的答案。我需要更多地思考React。我所做的只是將imageLoaded狀態添加到包含圖像的組件，並且只在imageLoaded狀態爲true時才渲染PhotoTag。 imageLoaded狀態通過在有問題的圖像的onLoad中觸發的函數設置爲true。謝謝！ –

很好地確定這裏的問題是DOM元素.expanded-image實際上並未在第一個渲染器的DOM中加載。嘗試將此邏輯移至componentDidMount，它應該可以正常工作。您還需要將狀態保存爲p，以便您可以在componentDidMount之外引用它，爲其指定一個初始值，並在組件發生更改時立即重新渲染組件。

來源

2016-08-30 15:39:23 taylorc93

我認爲你是對的。我會嘗試它並評論我的結果。看起來我很可能在接近這個功能時並沒有考慮「反應」。 –

感謝您的反饋，但我認爲Giuseppe的答案與imageLoaded狀態測試相結合，可以更好地符合React的敘述。 –

陣營與imagesLoaded，解決了最後一個值呈現

回答

相關問題