는 imagesLoaded과 반응하여, 최종 값 렌더링 해결

Question

내가 가지고있는()getScalePercent라는 기능이 있습니다 PhotoTags라는 클래스. In getScalePercent 표시된 이미지의 너비와 높이를 포함하는 간단한 계산을 수행하고 값을 반환합니다. PhotoTags의 렌더링 기능에서 좌표 데이터를 사용하여 사진 위에 요소를 적용합니다. 이 논리는 이미지가 100 %로드 된 경우에만 올바르게 작동합니다. 페이지를 충분히 새로 고침하면 논리가 실제로 좌표를 올바르게 설정하고 있지만 이미지가 캐시되거나 빠르게로드 된 경우에만 볼 수 있습니다. 따라서 이미지를로드했는지 확인하기 위해 imagesLoaded를 사용하여 좌표를 효과적으로 사용하려고합니다.

내 기능은 다음과 같습니다

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 

:

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

그리고 내에서 나는 이미지가 getScalePercent를 (사용하기 전에로드되어 있는지 확인하는 imagesLoaded를 사용하는 것을 시도하고 기능) 렌더링

내 변수 이 imagesLoaded의 .done 이벤트 내에서 조작되지 않습니다. 비동기 호출과 관련이 있고 무엇을하지 않는지 알고 있으며 imagesLoaded를 getScalePercent()에 넣어 봤지만 아무 소용이 없습니다. 나는 또한 getScalePercent() 및 다른 많은 유사 콘텐츠에 대한 콜백을 시도했지만 아직 유용하지는 않습니다. 기본적으로 내가하고 싶은 건 화재 getScalePercent() imagesLoaded의 .done() 이벤트 안에 있습니다. 그런 다음 PhotoTags의 렌더링 함수 내에서 getScalePercent()이 반환하는 값 (이미지가 완전히로드 된 경우)을 사용할 수 있기를 원합니다. 어떤 도움이라도 대단히 감사합니다.

Answer 1

당신은 당신의 이미지에이 같은 일을 onLoad 이벤트를 추가하는 더 나은하지 않을까요 `p`를 매개 변수로 전달합니다.

Answer 2

DOM 요소 .expanded-image이 실제로 첫 번째 렌더링시 DOM에로드되지 않는다는 것이 확실합니다. 이 논리를 componentDidMount으로 옮기면 잘 작동합니다. 또한 p을 상태로 저장하여 componentDidMount 외부에서 참조 할 수 있도록하고 초기 값을 지정하고 변경된 경우 즉시 구성 요소를 다시 렌더링합니다.

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