IMG 로드 알아보기
2884 단어 문제JavaScriptJavaScript
IMG 로드 알아보기 - 선 width height 입력.
Attention: the pitfall!
The code won’t work reliably while <img>
has no width/height:
<img src="ball.png" id="ball">
When the browser does not know the width/height of an image (from tag attributes or CSS), then it assumes them to equal 0
until the image finishes loading.
So the value of ball.offsetWidth
will be 0
until the image loads. That leads to wrong coordinates in the code above.
After the first load, the browser usually caches the image, and on reloads it will have the size immediately. But on the first load the value of ball.offsetWidth
is 0
.
We should fix that by adding width/height
to <img>
:
<img src="ball.png" width="40" height="40" id="ball">
…Or provide the size in CSS:
#ball {
width: 40px;
height: 40px;
}
Author And Source
이 문제에 관하여(IMG 로드 알아보기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hqillz/IMG-로드-알아보기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)