今更ながらslickでlazyLoad
- WEBSITE制作
- WEB関連
- Wordpress
このサイトは基本的にslickを使ったスライドにて大量の写真を表示することに特化したサイトです。
そのはずなのに、写真をloadingする時間に関して今までちゃんと対応できて無かった。
つまり、たくさん写真をロードして表示するサイトなので、全ての写真をloadingしてから画面を表示するとなると、結構時間が掛かっちゃう。
それを解消するのがlazyloadと言う機能と言うわけです。（まぁ今更な解説ですが、、）
基本的にはslack内で表示する画像に関して、遅延読み込みにしたい<img>タグを、
<img data-lazy="xxx.jpg" alt="xxx">の様にします。それで、slick の設定jsで、
var slide = $('.slide').slick({
infinite: true,
centerMode: true,
arrows: true,
dots: true,
lazyLoad: 'progressive',
});こんな感じで「lazyLoad: ‘progressive‘」と設定。
・progressive とすると、画面表示後から遅延して指定した画像を読み込み。
・ondemand だと、スライドして画像表示されるタイミングローディングが開始される。
と言う事です。
例えばWordpressのループだと２枚目から「<img data-lazy=”xxx.jpg” alt=”xxx”>」にしてあげれば最初の１枚をローディングした時点でslickが表示されることになる。その場合、変数で以下の様にすれば簡単かと思います。
<div class="slide">
<?php
$args = array(
'post_type'=>'post',
'orderby' => 'date',
'paged' => 1,
'posts_per_page'=>5,
'post_status' => 'publish',
'order' => 'DESC',
);
$num = 0;
$the_query = new WP_Query( $args );
if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post();
if ( $num == 0 ) {
echo '<div><img src="xxx.jpg" alt="xxx"></div>';
} else {
echo '<div><img data-lazy="xxx.jpg" alt="xxx"></div>';
}
$num++;
endwhile; endif;
?>
</div>※分かりやすくするためにかなりシンプルにしてます。。
こんな単純な事なのに今まで対応して無かったことに反省中。
ただ、こう言う処理漏れ案件がまだまだあるのよね。
しっかりしたテーマに仕上げなければ。