lazyload(遅延読込)の設定
画面表示されたら画像を読み込むようにしてサイトの読み込み時間を減らすというもの
http://blog.chiyopen.com/lazyload/
を参考に。
PC用
https://github.com/tuupola/jquery_lazyload
からjquery.lazyload.jsをとってきて任意のサーバーの場所に置く。
ヘッダーに
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
がある状態で
フッター以下に
<script type="text/javascript" src="jquery.lazyload.js"></script>
<script type="text/javascript">
<!--
$( "img.lazy" ).lazyload(
{
threshold: 200, // 200pxの距離まで近づいたら表示する
effect: "fadeIn", // じわじわっと表示させる
effect_speed: 1000 ,
});
-->
</script>
を追加しHTMLの画像を
<img src="dummy.png" data-original="img.jpg" class="lazy" alt="" width="px" height="px" />
に変更で遅延読み込みできるようになった。dummy.pngは灰色の画像でも透明の画像でも置き換えてください。
じんわりimg.jpgが表示されます。
場所のパスはちゃんと合わせてくださいね。(js/jquery.lazyload.jsなど)
スマホ用
色々試して現在なっている状態だと
http://jquery.eisbehr.de/lazy/
よりjquery.lazy.min.jsをとってきて任意のサーバーの場所に置く。
ヘッダーに
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.lazy.min.js"></script>
<script type="text/javascript">
<!--
$(function() {
$('.lazy').lazy({
effect: 'fadeIn',
threshold: 100,
effectTime: 1000,
});
});
-->
</script>
<style>
img.lazy {
width: 100%;
height: auto;
display: block;
}
</style>
を追加してHTMLの画像を
<img class="lazy" width="100%" height="auto" data-src="img.jpg" alt=""/>
でスマホも動いた。
ただ初期表示に一瞬altが出てきたのでloadingも追加した
参考：http://sterfield.co.jp/designer/jquery%E3%81%A7%E7%B0%A1%E5%8D%98%E3%81%AAloading%E7%94%BB%E9%9D%A2%E3%82%92%E4%BD%9C%E3%82%8B-3/
<script type="text/javascript">に
$(window).load(function(){
$(".loadingWrap").fadeOut();
});
を追加してCSS（<style></style>）に
html, body{
width: 100%;
height: 100%;
}
.loadingWrap{
width: 100%;
height: 100%;
}
.loadingWrap img{
}
を追加。
bodyの最初に
<div class='loadingWrap'></div>
を追加してOK。
<div class='loadingWrap'><img src="img.gif"/></div>
とするとloading画像も設定できる。
こんなとこです。
画面表示されたら画像を読み込むようにしてサイトの読み込み時間を減らすというもの
http://blog.chiyopen.com/lazyload/
を参考に。
PC用
https://github.com/tuupola/jquery_lazyload
からjquery.lazyload.jsをとってきて任意のサーバーの場所に置く。
ヘッダーに
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
がある状態で
フッター以下に
<script type="text/javascript" src="jquery.lazyload.js"></script>
<script type="text/javascript">
<!--
$( "img.lazy" ).lazyload(
{
threshold: 200, // 200pxの距離まで近づいたら表示する
effect: "fadeIn", // じわじわっと表示させる
effect_speed: 1000 ,
});
-->
</script>
を追加しHTMLの画像を
<img src="dummy.png" data-original="img.jpg" class="lazy" alt="" width="px" height="px" />
に変更で遅延読み込みできるようになった。dummy.pngは灰色の画像でも透明の画像でも置き換えてください。
じんわりimg.jpgが表示されます。
場所のパスはちゃんと合わせてくださいね。(js/jquery.lazyload.jsなど)
スマホ用
色々試して現在なっている状態だと
http://jquery.eisbehr.de/lazy/
よりjquery.lazy.min.jsをとってきて任意のサーバーの場所に置く。
ヘッダーに
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.lazy.min.js"></script>
<script type="text/javascript">
<!--
$(function() {
$('.lazy').lazy({
effect: 'fadeIn',
threshold: 100,
effectTime: 1000,
});
});
-->
</script>
<style>
img.lazy {
width: 100%;
height: auto;
display: block;
}
</style>
を追加してHTMLの画像を
<img class="lazy" width="100%" height="auto" data-src="img.jpg" alt=""/>
でスマホも動いた。
ただ初期表示に一瞬altが出てきたのでloadingも追加した
参考：http://sterfield.co.jp/designer/jquery%E3%81%A7%E7%B0%A1%E5%8D%98%E3%81%AAloading%E7%94%BB%E9%9D%A2%E3%82%92%E4%BD%9C%E3%82%8B-3/
<script type="text/javascript">に
$(window).load(function(){
$(".loadingWrap").fadeOut();
});
を追加してCSS（<style></style>）に
html, body{
width: 100%;
height: 100%;
}
.loadingWrap{
width: 100%;
height: 100%;
}
.loadingWrap img{
}
を追加。
bodyの最初に
<div class='loadingWrap'></div>
を追加してOK。
<div class='loadingWrap'><img src="img.gif"/></div>
とするとloading画像も設定できる。
こんなとこです。
