実現したいこと
1.console.logにimgタグサイズと画像のサイズを表示したい。
2.thisの箇所を説明してほしい。
前提
ウェブサイトCODEPREPで勉強しいます。画像が読み込まれたことを検知する:6-1
VSCodeでコードを実行すると「OK」サインは出るのですが、
内容的にコンソールにimgタグサイズと画像のサイズが出るようになっていると思うのですが、
コンソールには何も表示されません。
いろいろやっているときに１回だけサイズが表示されていましたが、再現できませんでした。
発生している問題・エラーメッセージ
Google Chrome consoleに エラーメッセージは１件と出ていますが、見方がわかりません main.jsの「event」が宣言されていますが、その値が読み取られることはありません。と出ています。
該当のソースコード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ブラウザイベント</title> <link rel="stylesheet" href="./css/style.css"> <!-- <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <script src="./js/main.js"></script> </head> <body> <!--画像が読み込まれたことを検知する:6-1 loadイベントを利用すると、imgタグで指定した画像が読み込まれたときの イベントハンドラを設定できます。 例えば画像のサイズを取得して処理を行う場合、 画像が読み込まれてからサイズを取得すると、 正しいサイズを取得できるようになります。 画像が読み込まれたときのイベントハンドラを設定してみましょう！ -->index.html <div class="logo"> <!-- <img src="./img/codeprep.png" > サイトの画像を切り取って使っています。--> <img src="logo.svg" > </div> <ul id="log"></ul> <div class="spacer"></div> <!--実行結果：Google-Chrome console // window,最初の実行で表示される,図:load.png --> </body> </html>
main.js
1(function ($) { 2 $(function () { 3 4 function log(text) { 5 $('#log').append($('<li />').text(text)); 6 } 7 8 $img = $('img'); //ここから追加 9 $img.originSrc = $img.src; 10 $img.src = ""; // これで一旦クリアできます！ 11 12 // コールバックを設定 13 $img.bind('load', function () { 14 console.log("load complete"); 15 }); 16 17 // 画像読み込み開始 18 $img.src = $img.originSrc; // ここまで追加 19 20//$('img').on('load', function (event) { // コメントアウト 21 22 console.log(this, $(this), $(this).eq(0)); 23 24 log('imgタグサイズ:' + $(this).width() + 'x' + $(this).height()); 25 26 log('画像のサイズ:' + this.naturalwidth + 'x' + this.naturalheight); 27 28 //});// コメントアウト 29 30 }); 31 32})(jQuery); 33
試したこと
いつも恥ずかしい間違いをしてるので、コードについてはチェックしました。
よろしくお願いいたします。
index.html
<img src="logo.svg" >は サイトの画像を切り取って使っています。
<img src="./img/codeprep.png" >で実行しています。
前回と同じような質問で申し訳ないのですが、「event」の箇所が分かっていないと思います。
補足情報（FW/ツールのバージョンなど）
windows10,VSCodeのGo Liveで実行、Google Chrome で表示しています。
リンク内容
0 コメント