javascript - 与 imagesLoaded 进行 react ，并解析最终渲染的值

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没有在imageLoaded的.done事件中被操作。我知道它与异步调用有关，但我尝试将 imagesLoaded 放入 getScalePercent() 但无济于事。我还尝试对 getScalePercent() 和许多其他变体进行回调，但仍然无济于事。基本上我想做的是在 imagesLoaded 的 .done() 事件中触发 getScalePercent() 。然后，我希望能够在 PhotoTags 的渲染函数中使用 getScalePercent() 返回的值(当图像完全加载时)。非常感谢任何帮助。

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>
    }
}