IMGロードについて
2888 ワード
IMGロードについて-入力線幅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;
}
Reference
この問題について(IMGロードについて), 我々は、より多くの情報をここで見つけました
https://velog.io/@hqillz/IMG-로드-알아보기
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
<img src="ball.png" id="ball">
<img src="ball.png" width="40" height="40" id="ball">
#ball {
width: 40px;
height: 40px;
}
Reference
この問題について(IMGロードについて), 我々は、より多くの情報をここで見つけました https://velog.io/@hqillz/IMG-로드-알아보기テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol