WEBデザインの勉強

初心者が1からWEBデザインを勉強するブログ。

画像の遅延読み込みをするjQueryプラグインlazyload

f:id:mmmmofu:20170611014451p:plain

サイトが重い、画像の量が多い時などに

GitHub
github.com

デモ
http://efu.sakura.ne.jp/web/lazyload/

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>lazyload</title>
  <link rel="stylesheet" href="http://efu.sakura.ne.jp/waeb/common/css/reset.css">
  <link rel="stylesheet" href="./style.css">
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="./js/jquery.lazyload.min.js"></script>
  <script src="./js/script.js"></script>
</head>
<body>
  <div class="photo photo01"><img data-original="./img/ph01.jpg" class="lazy"></div>
  <div class="photo photo02"><img data-original="./img/ph02.jpg" class="lazy"></div>
  <div class="photo photo03"><img data-original="./img/ph03.jpg" class="lazy"></div>
</body>
</html>

CSS

@charset "utf-8";

img {
  vertical-align: bottom;
}

body {
  margin: 200px 0;
  background: #000;
}

.photo {
  position: relative;
  width: 600px;
  margin: 0 auto 500px;
  padding-top: 330px;
  background: #FFF;
}

.photo img {
  position: absolute;
  top: 0;
  left: 0;
}

JS

$(function(){
  $('.lazy').lazyload({
    threshold: 1,//どのくらい近づいたら読み込むか(px)
    effect: "fadeIn",//表示の仕方
    effect_speed: 2000,//表示までの速度
  });
});