blog

BLOGブログ

ARCHIVES

VAX

暑い夏到来。火の国熊本。暑いときだからこそwebページコンテンツを爽やかに表示しよう

0726-main

全国1000万人のカレー好きのみなさまお待たせいたしております。

 

VAXだょ。

 

ついに梅雨もあけ(たぶん)   カレーの季節がやってきましたね!!!!

 

毎日食べたい。。。

 

さて今回の件ですが

 

Webページを表示する際にいつまでもページ読み込みが遅いと 見る気が失せますよね。

 

僕は3秒でだめです。

 

まるで初めてのデートの待ち合わせに遅れた男女のようですね。。。

 


 

 

理由は単純にコンテンツ量だったりもしますが 要はファーストビュウを、、、

 

first view

 

だけは表示しておいてあとはスクロールにあわせて 表示すれば読み込み速度は速くなるのであります。

 

通信速度が遅いとかネット環境にもよりますが 大体画像が重たいです。

 

ってことで first view 以外は最初は、透明(透明度 0)にしておいて スクロール位置まできたら表示(透明度を 1)させちゃいましょうか。

 

 

0726-1

 

実際の動きはこちら

 

demo

 

それでは行きます!

 

js

 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
jQuery(function($){
$(‘.img_opa img’).each(function(){
//初期読み込み
if ( $(this).offset().top < $(window).height() ){
$(this).animate({‘opacity':1});
}
});

 

$(window).scroll(function(){

//現在のスクロール位置を取得
var win_pos = $(window).scrollTop();
//windowの高さ
var win_h = $(window).height();
$(‘.img_opa img’).each(function(){
if ( $(this).offset().top < win_pos + win_h) {
$(this).animate({‘opacity':1});
}
});
 });
});
</script>

 

 

 

 css

 

.img_opa img { opacity:0; }

 

 

 

html

 

<div class=”img_opa “>

<p>下に画像</p>

<img src=”○○”>

<p>下に画像</p>

<img src=”○○”>

<p>下に画像</p>

<img src=”○○”>

</div>

 

 

 

 

まとめ

 

ページ表示速度はみんな共通のイラッとポイントだと思うので

すっきり爽やかに表示できるよう心がけましょう!

それと、

熊本のおいしいカレー屋さまを紹介してください。

レポートしたいです(>_<)

 

 

 

この人が書いた記事

VAXの記事をもっと見る

関連する記事