lazysizes Sample 5

1200px 下に背景画像の領域があります。

<div style="height:1200px; padding: 20px; color: #999; border: 1px solid #ccc;">
  <p>1200px 下に画像があります。</p>
</div>
        
<div class="bgimg lazyload" data-bg="/images/sample.jpg"></div>

<!--  lazysizes の読み込み -->
<script src="lazysizes.min.js"></script>
<!--  unveilhooks プラグインの読み込み -->
<script src="ls.unveilhooks.min.js"></script>

.bgimg {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height:600px;
  max-width: 960px;
  margin: 50px 0;
}