javascript - JavascriptImageOnLoadイベント

Question

読み込み中の画像にイベントリスナーをアタッチして、画像の読み込みが完了すると次のようにトリガーされるようにすることができます。

<img id="mine" src="image.jpg" />

<script>
$('#mine').load(function() {
  console.log($(this).height()); //The image's height
  console.log($(this).width()); //The image's width
})
</script>

しかし、私のブラウザは、ヘッダーが読み込まれるとすぐに画像のサイズを認識します。そのイベントを利用して、ブラウザが画像のサイズを認識したらすぐに、ページ上の要素のサイズを変更できますか？

ありがとう！

Answer 1

いいえ、できません。ただし、タグとともに画像のサイズを渡す必要があります。

<img id="mine" src="image.jpg" width="100" height="100">

たとえば、PHP ではgetimagesize()関数を使用できます。

ブラウザーのレンダリングを改善することは、推奨される方法でもあります。