Q.スマホ閲覧時のサムネイルの表示速度が遅いのですが
スマートフォンでのトップページのアイキャッチ画像の表示速度が遅いと感じます。デスクトップでは問題無いのになぜスマホだけ遅いのでしょうか?
特にiPhoneよりもAndroidスマートフォンで顕著にでます。ブログの購読者の多くはスマートフォンからアクセスするので、スマートフォンでのトップページのサムネイルの表示速度をデスクトップ並みにする方法を教えていただけますか?
A.下記のphpファイルの該当箇所を編集します
当該箇所にはアニメーションが設定されていますが、デバイスによって処理速度が異なる為、表示に影響が出ることがあります。これを解消するには下記ファイルの該当箇所を削除してください。
編集するファイル:header.php
削除する箇所:
<script type="text/javascript">
jQuery(document).ready(function($){
$('.post_item .image_area img').each( function(i){
var bottom_of_object = $(this).position().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
if( bottom_of_window < bottom_of_object ){
$(this).css('opacity','0');
}
});
$(window).scroll( function(){
$('.post_item .image_area').each( function(){
var bottom_of_object = $(this).position().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
if( bottom_of_window > bottom_of_object ){
$(this).find('.image1 > img').delay(450).animate({'opacity':'1'}, 350,
'easeOutQuad');
$(this).find('.image2 > img').delay(650).animate({'opacity':'1'}, 350,
'easeOutQuad');
$(this).find('.image3 > img').delay(850).animate({'opacity':'1'}, 350,
'easeOutQuad');
$(this).find('.image4 > img').delay(1050).animate({'opacity':'1'},
350, 'easeOutQuad');
$(this).find('.image5 > img').delay(1250).animate({'opacity':'1'},
350, 'easeOutQuad');
}
});
});
$(window).scroll( function(){
var return_top_link = $('.page_navi');
var bottom_of_object = return_top_link.position().top +
return_top_link.outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
if( bottom_of_window < bottom_of_object ){
return_top_link.css('opacity','0');
}
if( bottom_of_window > bottom_of_object ){
return_top_link.delay(1200).animate({'opacity':'1'}, 700, 'easeOutQuad');
}
});
});
</script>
この記事は役に立ちましたか?
もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!