Rubyで作ったサイトで、以下のようなコードでローディング画面を実装しています。
ロードしたときや画面遷移したときには、ローディング画面が表示されて読み込みが終わるとページが表示されるようになっています。
しかし、アンカーリンク(<a href="#"></a>)をクリックした時はページ自体がロードされないためにローディング画面が閉じなくて困っています。
いろんな方法を考えましたが、うまくいかなかったので質問させていただきました。
何卒よろしくお願いしますm(__)m
HTML
1 <!-- ページの一番上に移動するためのアンカーリンク --> 2 <p id="scroll-up" style="display: block; opacity: 1;"> 3 <a href="#"></a> 4 </p> 5 <!-- ローディング画面 --> 6 <div id="preloader"> 7 <div class="spinner"></div> 8 </div>
CSS
1#preloader { 2 background: #14355d; 3 position: fixed; 4 top: 0; 5 right: 0; 6 bottom: 0; 7 left: 0; 8 z-index: 99998; 9 display: block; 10} 11 12.spinner { 13 width: 60px; 14 height: 60px; 15 margin: auto; 16 position: absolute; 17 top: 0; 18 left: 0; 19 bottom: 0; 20 right: 0; 21 -webkit-border-radius: 100%; 22 -moz-border-radius: 100%; 23 border-radius: 100%; 24 text-indent: -9999px; 25 border-top: 2px solid #df1843; 26 border-right: 2px solid #8a9297; 27 border-bottom: 2px solid #8a9297; 28 border-left: 2px solid #8a9297; 29 -webkit-transform: translateZ(0); 30 -moz-transform: translateZ(0); 31 -o-transform: translateZ(0); 32 -ms-transform: translateZ(0); 33 transform: translateZ(0); 34 -webkit-animation: spin .5s linear infinite; 35 -moz-animation: spin .5s linear infinite; 36 -ms-zoom-animation: spin .5s linear infinite; 37 -o-animation: spin .5s linear infinite; 38 animation: spin .5s linear infinite; 39} 40 41@keyframes spin { 42 0% { 43 transform: rotate(0); 44 } 45 46 100% { 47 transform: rotate(360deg); 48 }
JavaScript
1 $(function() { 2 $(window).on('pageshow', function() { 3 $('#preloader').fadeOut(500); 4 }); 5 6 $('a').click(function() { 7 var url = $(this).attr('href'); 8 if (this.href.match(location.hostname) && $(this).attr('href').charAt(0) != "#" && !$(this).attr('rel') && !$(this).attr('target')) { 9 var linkURL = $(this).attr('href'); 10 $('#preloader').fadeIn(500, function() { 11 location.href = linkURL; 12 }); 13 return false; 14 } 15 }); 16 });
回答1件
あなたの回答
tips
プレビュー