jqueryのtrigger()について

下記のソースは、スライダー要素の大きさをブラウザの幅、高さに連動させるものです。
ソースから、メソッドチェーンしているtrigger('resize')をはずすと、ページ読み込み時に本来一番目に表示されるスライダーが表示されなくなります。
ただ、これ自体は、最初にページを読み込んだときにresizeは実行されないので、trigger()で実行させているというところまでは、過去の質問で理解できたのですが、$(window).on('resize load')でrisize以外の方法、つまり読み込んだ際にも大きさを指定するソースを書いているのですが、上手くいきませんでした。

loadイベントで最初にページを開いた際に大きさを合わせたつもりだったのですが、これはなぜ上手くいかなかったのでしょうか。

javascript
1$(window).on('resize load', function() {
2            
3            var w = $(window).width(); 
4            var h = $(window).height(); 
5            
6            var slider_resize = [ 
7                    '.slide00',//一番目のスライダー 
8                    '.slide01',//二番目のスライダー 
9                    '.slide02',//三番目のスライダー 
10                    '.slide03'//最後のスライダー 
11                ] 
12                
13            // 各スライダーに処理を行う
14            $.each(slider_resize,function(index, value){ 
15                $(value).css({'width': w, 'height': h - 70}) ;
16            });
17}).trigger('resize');//

行動規範の内容に同意します

回答2件

.trigger('resize');って使ったこと無いんでアレなんですが、
ようするに、$(window).on('resize load'～ってしてるのに、.trigger('resize');とかしないと初回読み込みで動かないのはなんで？ってことですよね？
やってみたんですが、ふつうに動きましたよ?（そういうことじゃない？）

$(window).on('resize load' の書き方って、問題ないはずですよ。

ただ最初の読み込み時、縦スクロールバーが発生しない程度のコンテンツ内容であれば横スクロールバーが出てしまいますね。
縦スクロールバーがない状態の横幅取得→各要素に横幅と縦幅をeach→縦スクロールバーが発生し、結果横幅が圧迫され横スクロールバーも出る。
という残念な感じになりました。
これが今回の問題ということでしょうかね？？

投稿2015/10/24 11:15

1000

総合スコア204

aaaaaaaa

2015/10/26 06:50 編集

ご回答有難うございます。初めて読み込むときに、本来表示されるべきスライダー(一番目のスライダー)が表示されずに別のスライダー(最後のスライダー)が出てきてしまうのです。質問文、改めて読んでみるとあまりにも分かり辛い文章でした。申し訳ありませんでした。

1000

2015/11/02 16:08 編集

うーん。やはり何回やってもスライド１もちゃんと動いてます。となると、全く別の問題が考えられますよ。一応、ここに上げたソースとHTMLのみで試してみてはどうでしょう？意外なところでミスってたりとかが考えられると思います。というより、今思ったんですが、これ「スライダー」って書いてますね。スライダーで尚且つ「最後のが表示される」ということはですよ、各スライド要素をposition:absolute;にしてませんか？そうなると、HTMLの構造上「後に書いたものがレイヤーが上」になるので、最後のヤツ鹿見え無いということになります。もしかしてこれでしょうか？であれば、背景色（や画像）をいったん無しにして、background:rgba(0,0,0,0.3);とかにして、 <div class="slide00">slide00</div> <div class="slide01">slide01</div> <div class="slide02">slide02</div> <div class="slide03">slide03</div> のみにしてためしてみてはいかがでしょう？ぜんぜんちがったらすいませんｗ

行動規範の内容に同意します

load されるのは window じゃなくて、 documentだからではないでしょうか？

と推測したけど…

html
1<!DOCTYPE HTML>
2<html lang="ja-JP">
3	<head>
4		<meta charset="UTF-8">
5		<title></title>
6	</head>
7	<body>
8		<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
9		<script type="text/javascript">
10			$(window).on('resize load', function (e) {
11				console.log(e.type);
12				console.log(e.target);
13			}).trigger('resize');
14		</script>
15	</body>
16</html>

こうなった。

html
1<!DOCTYPE HTML>
2<html lang="ja-JP">
3	<head>
4		<meta charset="UTF-8">
5		<title></title>
6	</head>
7	<body>
8		<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
9		<script type="text/javascript">
10			$(window).on('load resize', function (e) {
11				console.log(e.type);
12				console.log(e.target);
13			});
14		</script>
15	</body>
16</html>