像Medium的漸近式圖片加載

m-lazyload.html

<!-- 16:9 -->
<div class="lazy-image w16-9">
  <figure>
    <!--
      .js-get-img 用js抓原始大圖資訊
      style 裡的 background-image 放 placeholder 作用的小圖
      data-img 放原始大圖的路徑
    -->
    <div
      class="small js-get-img"
      style="background-image: url(img/16-9-1-s.jpg)"
      data-img="img/16-9-1.jpg"
    >
    </div>
  </figure>
</div>


<!-- 4:3 -->
<div class="lazy-image w4-3">
  <figure>
    <div class="small js-get-img" style="background-image: url(img/4-3-1-s.jpg)" data-img="img/4-3-1.jpg">
    </div>
  </figure>
</div>


<!-- 圖片比例不同 -->
<!--
  自由尺寸，class 用 w-free
  data-width 放原圖的寬
  data-height 放原圖的長
-->
<div class="lazy-image w-free">
  <figure>
    <div class="small js-get-img"
         style="background-image: url(img/free-1-s.jpg)"
         data-img="img/free-1.jpg"
         data-width="960"
         data-height="640"
    >
    </div>
  </figure>
</div>