質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

1504閲覧

jQuery、ブラウザで開くたび挙動が安定しない

namnium1125

総合スコア2043

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2017/10/20 16:07

編集2017/10/20 17:17

お世話になってます。m(_ _)m

発動条件がよくわからなかったので少し曖昧な質問です。すみません。。

html

1<div id="hoge"></div>

css

1#hoge { 2 width: 150px; 3 height: 150px; 4}

javascript

1$(function(){ 2 var hoge = $("#hoge"); 3 4 console.log(hoge.width()); 5 console.log($(hoge).width()); 6});

という感じのコードなのですが(実際のコードは長すぎますので載せません。必要があれば部分的に追記します)、コードをいじっているとconsole.log($(hoge).width());の方は正常に150が表示されたのですが、console.log(hoge.width());の方がいきなり0と表示されるようになってしまいました。

コメントアウトして直るかを試すことで原因箇所を特定しようとしたのですが、全く同一のコードにも関わらず直ったり直らなかったりと不定で(ちなみにキャッシュ等は残っておらず変更はすぐに反映されてます。)、頭がこんがらがってきてしまいました。。

結局再現できないのでこうして質問した次第です。

何が原因なのでしょうか?

それともそもそもhoge.width()みたいな書き方はダメで、全て$(hoge).width()にしなければならないのでしょうか?

詳しい方、どうか回答よろしくお願いいたします。m(_ _)m

##追記

原因となる動作の一部が判明しましたので追記させてください。

ブラウザでリロードを行うとhoge.width()の方で0になってしまうみたいでした。ただし上記コードではなく元コードでの確認ですので、やはり他にも原因があるみたいです。

こういう挙動になってしまうということはやはりそもそもhoge.width()って書くのはよくないってことなのでしょうか?

引き続き回答よろしくお願いいたします。m(_ _)m

##追記2

この質問の方向性が大きく変わってしまうのですが、$(hoge).width()の方でもブラウザをリロードした時に0になってしまうことに気づきました。。

またコードを全く編集しなくても、ブラウザを立ち上げ直したり等を繰り返すうちに直ったり直らなかったりと、やはり挙動が一定にならないです、、(firefoxは一定で、常に望む挙動でした)

html文書の読み込み順序等が影響しているのでしょうか?

部分的な再現は困難とみなし、本当は避けたかったのですが全コードを開示することにしました。コードの記述上まずい点があればご指摘ください。。。改めてよろしくお願いします。m(_ _)m

変数名(enemyPythonとか)には特に深い理由はないです。。お気になさらず。。(^ ^;

html

1<!doctype html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title>submarine</title> 6<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 7<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script> 8<script src="./script.js"></script> 9<link rel="stylesheet" href="./style.css" type="text/css" /> 10</head> 11<body> 12 <div id="screen"> 13 <img id="YSB" src="./images/yellowSubmarine.png" /> 14 </div> 15</body> 16</html>

javascript

1var YSB; 2var YSBDir = 1; 3var YSBh; 4var YSBw; 5 6var scrn; 7var barrett; 8 9var enemyPython; 10var intId; 11var spawn; 12 13$(function(){ 14 YSB = $("#YSB"); 15 YSBh = YSB.height()/2; 16 YSBw = YSB.width()/2; 17 18 // ↓該当箇所 19 20 console.log(YSB.height()); 21 console.log(YSB.width()); 22 console.log($(YSB).height()); 23 console.log($(YSB).width()); 24 25 // ↑該当箇所 26 27 scrn = $("#screen"); 28 barrett = $("<img>"); 29 barrett.attr({ 30 "src": "./images/barrett.png", 31 "class": "barrett" 32 }); 33 34 enemyPython = $("<div>"); 35 enemyPython.addClass("python"); 36 37 spawn = function(){ 38 if(Math.random()<0.5){ 39 var x = Math.floor(Math.random()*(window.innerWidth-enemyPython.width())); 40 var y = Math.floor(Math.random()*(window.innerHeight-enemyPython.height())); 41 var animationName = "vibration_right"; 42 if(x<window.innerWidth*0.5) animationName = "vibration_left"; 43 var eP = enemyPython.clone(); 44 eP.css({ 45 "top": y+"px", 46 "left": x+"px", 47 "opacity": 0, 48 "animation-name": animationName 49 }); 50 scrn.append(eP); 51 eP.animate({ 52 "opacity": 1.0 53 },500,"linear"); 54 } 55 }; 56 57 scrn.on("click",function(e){ 58 var toX = e.pageX - YSBh; 59 var toY = e.pageY - YSBw; 60 61 if(YSB.offset().left > toX){ 62 YSB.css("animation-name","vibration_left"); 63 YSBDir = 1; 64 }else{ 65 YSB.css("animation-name","vibration_right"); 66 YSBDir = -1; 67 } 68 YSB.animate({ 69 "left": toX+"px", 70 "top": toY+"px" 71 },250,"easeOutQuad"); 72 }); 73 74 YSB.on("click",function(e){ 75 e.stopPropagation(); 76 77 var b = barrett.clone(); 78 b.css({ 79 "top": e.pageY+"px", 80 "left": e.pageX+"px" 81 }); 82 scrn.append(b); 83 if(YSBDir==1){ 84 b.animate({ 85 "left": "0px" 86 },250,function(){ 87 b.remove(); 88 }); 89 }else{ 90 b.css("transform","scaleX(-1)"); 91 b.animate({ 92 "left": scrn.width()+"px" 93 },250,function(){ 94 b.remove(); 95 }); 96 } 97 }); 98 99 intId = setInterval(spawn,1500); 100});

css

1@charset "UTF-8"; 2 3#screen { 4 position: absolute; 5 left: 0px; 6 top: 0px; 7 margin: 0px; 8 padding: 0px; 9 height: 120vh; 10 width: 120vw; 11 background-image: url(./images/marine.jpg); 12 background-position: center center; 13 background-repeat: no-repeat; 14 background-attachment: fixed; 15 background-size: cover; 16} 17#YSB { 18 position: absolute; 19 height: 10vw; 20 width: 10vw; 21 left: 45vw; 22 top: calc(50vh - 5vw); 23 z-index: 1; 24 25 animation: vibration_left 500ms ease-in-out 0s infinite alternate none running; 26} 27 28@keyframes vibration_left { 29 0% { 30 transform: translateY(-0.2vh) scaleX(1); 31 } 32 100% { 33 transform: translateY(0.2vh) scaleX(1); 34 } 35} 36@keyframes vibration_right { 37 0% { 38 transform: translateY(-0.2vh) scaleX(-1); 39 } 40 100% { 41 transform: translateY(0.2vh) scaleX(-1); 42 } 43} 44 45.barrett { 46 position: absolute; 47 height: 32px; 48 width: 32px; 49} 50 51.python { 52 position: absolute; 53 height: 10vw; 54 width: 10vw; 55 background-image: url(./images/python_1.png); 56 background-size: contain; 57 58 animation: vibration_left 500ms ease-in-out 0s infinite alternate none running; 59} 60 61.crying { 62 background-image: url(./images/python_2.png); 63 animation: rolling 5000ms linear 0s 1 normal none running; 64} 65 66@keyframes rolling { 67 0% { 68 transform: rotate(0deg); 69 } 70 50% { 71 transform: rotate(180deg); 72 } 73 100% { 74 transform: rotate(360deg); 75 top: 100vh; 76 } 77} 78 79.smiling { 80 background-image: url(./images/python_3.png); 81}

jQuery CDN : https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js

とりあえず上記現象を確認できたブラウザ :

  • MacのSafari ver11.0
  • Chrome バージョン61.0.3163.100

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2017/10/20 16:28

書かれている状況が再現するコード(HTML/CSS/JavaScriptなど)か、再現するURLを提示されたほうが回答を得やすいと思います。
namnium1125

2017/10/20 16:39

ご指摘ありがとうございます。 再現ができないために質問した次第ですが、現在なるべくこちらでも再現できるよう目指しています。(元コード全部載せてもしょうがないので。。(^ ^;)
kei344

2017/10/20 16:43

「hoge」という要素はHTMLにありません。それがimgなのかdivなのか何かを内包しているのかCSSが設定されているのかなど、影響する要素はたくさんあります。
namnium1125

2017/10/20 17:09

おっしゃる通りだと思ったのと、部分的な再現は困難と判断し、元コードを載せることにいたしました。ご迷惑をおかけしました。、、ただ質問文中にも書いたのですが、コードを編集しなくとも、ブラウザを開きなおしたりリロードしたりするたびに挙動が異なるというのが最大の疑問です。
guest

回答2

0

ベストアンサー

画像のロードより早く取得してしまっているのでは。

【[jQuery]Google Chromeで画像のwidthやheightがうまく取得できない場合の対処方法 « Codaholic】
http://codaholic.org/?p=1520

【jQueryで処理されるタイミング 【div箱の高さが取得できない!の原因1】 | アド企画 制作部】
http://dev.adokikaku.com/cat-js/99/div箱の高さが取得できない!の原因1/

【jQueryの$()は何をしているのか、DOMContentLoadedとloadの違い · GitHub】
https://gist.github.com/retorillo/83b37b09adf7b73d93f6

【DOMContentLoaded - Web 技術のリファレンス | MDN】
https://developer.mozilla.org/ja/docs/Web/Reference/Events/DOMContentLoaded

投稿2017/10/20 17:26

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2017/10/20 17:26

あ、解決してた。
namnium1125

2017/10/20 17:28

なんかお騒がせしてすみませんでした、、(^ ^; 普段のクセが禍していたみたいで、、
guest

0

実行タイミングの問題だったみたいです。。

修正前

javascript

1$(function(){ 2 //処理 3});

修正後

javascript

1$(window).load(function(){ 2 //処理 3});

初歩的なミスでした。。ご迷惑をおかけしました。。m(_ _)m

投稿2017/10/20 17:24

編集2017/10/20 17:24
namnium1125

総合スコア2043

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問