WEBサイトのローディング画面について質問させていただきます。
制作中のWEBサイトでサイズの大きい画像を読み込むぺージがあり、以下のコードでローディング画面を用意しました。
HTML
1<body> 2<div class="loading"> 3 <img src="img/loader.gif" width=“64px" height=“64px"> 4</div> 5<div class="wrapper">コンテンツ</div> 6</body>
CSS
1 .loading { 2 width: 100%; 3 height: 100%; 4 background: #080808; 5 position: fixed; 6 top: 0; 7 left: 0; 8 z-index: 100; 9} 10 11.loading img { 12 position: absolute; 13 top: 50%; 14 left: 50%; 15 margin: -32px 0 0 -32px; 16 width: auto; 17}
javascript
1 $(window).load(function(){ 2 $(".loading").fadeOut(); 3 });
ローディング画面は問題なく表示され、読み込みが完了するとぺージが表示されるのですが、ローディング画像のgifアニメーションが、表示中にところどころで止まってカクカクした動きになってしまいます。
画像をダウンロードしている影響ではないかと思ったのですが、これを解消する方法はありますでしょうか?
なお、safari(10.1.1/mac)では上記のような動作ですが、chrome(58/mac)、IE(11/win)ではスムーズにアニメーションが動作します。
(ブラウザに依るのでしょうか?)
自分なりに手を加えてみたもののjQuery初心者でこれ以上どうにもならず(実際に対処可能な問題なのかもわからず)…恐れ入りますがアドバイスいただけますと幸いです。
https://teratail.com/questions/62463
別の方が質問されていた記事を拝見し、試してみましたが…動作は変わらずでした。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/06/18 09:30