使用imagesLoaded进行反应，并为最终渲染解析一个值

Question

我有一个名为PhotoTags的类，它有一个名为getScalePercent()的函数。在getScalePercent中，我做了一个涉及显示图像的宽度和高度的简单计算，并返回一个值。在PhotoTags的渲染函数中，我使用坐标数据在照片上应用元素。只有当图像被100%加载时，这个逻辑才能正常工作。如果我刷新页面足够多的次数，我可以看到我的逻辑实际上是正确设置坐标，但只有当图像被缓存或快速加载时。因此，我想使用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事件中被操纵。我知道它与异步调用和什么没有，我试过把imagesLoaded在getScalePercent()，但无济于事。我也试过回调getScalePercent()和许多其他变化，但仍然无济于事。基本上我想做的是在imagesLoaded的。done()事件中触发getScalePercent()。然后，我希望能够使用getScalePercent()返回的值(当图像完全加载时)在PhotoTags的渲染函数内。

Answer 1

在你的图片上添加一个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>
    }
}

Answer 2

可以肯定的是，这里的问题是DOM元素.expanded-image实际上并没有在第一次渲染时加载到DOM中。尝试将此逻辑移动到componentDidMount，它应该工作得很好。您还需要将p保存在状态中，以便您可以在componentDidMount之外引用它，给它一个初始值，并在它发生变化时立即渲染您的组件。