与 imagesLoaded 反应，并为最终渲染解析一个值

Question

我有一个名为 PhotoTags 的 class，它有一个名为 getScalePercent() 的函数。在 getScalePercent 中，我做了一个简单的计算，涉及显示图像的宽度和高度，以及 return 一个值。在 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()。然后我希望能够在 PhotoTags[ 的渲染函数中使用 getScalePercent() returns （当图像完全加载时）的值=29=]。非常感谢任何帮助。

Answer 1

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

Answer 2

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

与 imagesLoaded 反应，并为最终渲染解析一个值

React with imagesLoaded, and resolving a value for the final render

javascript

jquery

jquery-deferred

reactjs

imagesloaded