0

I have a class called PhotoTags that has a function called getScalePercent(). In getScalePercent I do a simple calculation involving the width and height of a displayed image, and return a value. In the render function of PhotoTags I use coordinate data to apply elements over a photo. This logic works fine only if the image has been loaded 100%. If I refresh the page enough times I can see that my logic is in fact setting the coordinates properly but only once the image has either been cached, or loaded quickly. Therefore I want to use imagesLoaded to check if the image has loaded, inorder to use the coordinates effectively.

My function looks like this:

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

And in my render function I am trying to use imagesLoaded to check if the image has been loaded before using 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

My variable p is not being manipulated within the .done event of imagesLoaded. I know it has something to do with asynchronous calls and what not, and I have tried putting imagesLoaded in getScalePercent() but to no avail. I have also tried doing a callback to getScalePercent() and many other variations but still to no avail. Basically what I want to do is fire getScalePercent() inside the .done() event of imagesLoaded. I then want to be able to use the value that getScalePercent() returns (when the image is fully loaded) inside the render function of PhotoTags. Any help is much appreciated.

4

2 回答 2

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>
    }
}
于 2016-08-30T15:45:48.103 回答
0

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

于 2016-08-30T15:39:23.020 回答