下記のソースは、イベント名にある通り、ページを読み込んだ時点(load)、ウィンドウの大きさを変更した時点(resize)いづれかを満たしたときにスライダーの要素がウィンドウの大きさに連動するソースの一部です。しかし、なぜかページが読み込まれてもスライダー要素の大きさが指定通りにならないのです。
ちなみに指定した通りに要素の大きさが表示されない時は、なぜかいくつかあるスライダーのうち
最後に表示される部分(下記のソースでいう所のslide03)が表示されてしまいます。
本来ならslide00が表示されるのですが、読み込んでも大きさが指定されないので
流れ込んでくるのでしょうか。
しかしウィンドウの大きさを変更すると指定通り、ウィンドウの幅に合わせて動くレスポンシブなスライダーになります。尚且つ、最後に表示されるべきスライダーから、本来最初に表示されるべきスライダー(slide00)も表示されるようになります。
なぜ、ページが読み込まれた際に、指定通りの大きさにならないのでしょうか。
使用しているjqueryのバージョンは、1.7.1です。
この現象を確認したブラウザは、IE11、クローム45.0.2454.99 m、safari5.1.7です。
//ウィンドウの幅、高さに合わせて背景の大きさが連動する var slider_resize = [ '.slide00',//一番目のスライダー '.slide01',//二番目のスライダー '.slide02',//三番目のスライダー '.slide03'//最後のスライダー ] $.each(slider_resize,function(index, value){ $(window).on('load resize', function() { var w = $(window).width(); var h = $(window).height(); $(value).css({'width': w, 'height': h - 70}) }); })
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。