阵营与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，解决了最后一个值呈现

回答

相关问题