외부 이미지 보여줄때 로딩 후에 이미지 처리하기 자스 질문입니다.

외부 이미지 보여줄때 로딩 후에 이미지 처리하기 자스 질문입니다.

QA

외부 이미지 보여줄때 로딩 후에 이미지 처리하기 자스 질문입니다.

본문

외부이미지를 화면 가운데 보여주려는데.....

로딩전에 자바스크립트가 처리되서 위치가 자꾸 틀리게 나오네요.

그림을 봐주세요.

아래 그림에서 이미지를 처음에 클릭하면 그림 꼭지점이 화면 중심에 위치하고

다시 두번째로 클릭하면 그림 중심이 화면중심과 일치합니다.

그림이 외부것이라 자바스크립트 실행보다 그림 로딩이 느려서 그림의 가로폭과 세로폭이 특정되지 않아.

중심이 저렇게 왔다갔다 하는데요.....

함수 만들어서 슬립 시켜도 계속 그러네요.... 어떻게 해야될까요? 힌트는 봤는데 안되니.. 로딩때까지 자바스크립트를 지연시키는 스킬좀 알려주세요 ^^;

982268670_1578238599.6445.png

 

이렇게 해봤는데 익스는 먹는데 크롬이나 불여우는 안먹네요.


var start = date.getTime();
for( i=1;  i<10;  i++ ) {
    if ( typeof(img[imgUrl])=="undefined" || !img[imgUrl].complete ) {
        // sleep(100); // 0.1초 쉼
        var sleepCount = 100; // 0.1초 쉼 // 윗줄의 함수를 풀어놨다
        while (new Date().getTime() < start + sleepCount);
    }
    else break;
}

이 질문에 댓글 쓰기 :

답변 3

transform: translate(-50%, -50%);하면 될텐데요

 

https://www.tabmode.com/homepage/transform-translate.html

참고하셔서 이미지영역에 position:absolute;top:50%;left:50과 같이 transform주세요

개념상 자바스크립트보다 위치 잡기는 훨 쉽겠네요.
그런데 해봤는데 로딩이 안되면 어차피 자리를 못잡네요.
이미지 폭과 높이를 모르니 우하꼭지점이 중심으로 이동하네요 ㅡ.ㅡ;;;;
조언 감사합니다.

이미지 로딩되면 그때 이벤트로 위치를 잡아야 겠네요

답변을 작성하시기 전에 로그인 해주세요.
전체 25
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT