懒加载图片案例

<div class="lazy-box">
      <img class="lazy" data-original="img/1.jpg" alt="1.jpg" width="960" height="540">
      <img class="lazy" data-original="img/2.jpg" alt="2.jpg" width="960" height="540">
      <img class="lazy" data-original="img/3.jpg" alt="3.jpg" width="960" height="540">
      <img class="lazy" data-original="img/4.jpg" alt="4.jpg" width="960" height="540">
      <img class="lazy" data-original="img/5.jpg" alt="5.jpg" width="960" height="540">
    </div>

.lazy-box {
        margin: 0px auto;
        padding: 0px;
        width: 960px;
        height: auto;
      }
      .lazy-box>img {
        outline: none;
        margin: 25px auto;
        padding: 0px;
        border: 1px solid #E0E0E0;
        background-color: #F0F0F0;
      }

$(document).ready(function() {
        $("div.lazy-box>img.lazy").lazyload({
          effect: 'fadeIn',
          placeholder: 'img/loading.jpg'
        });
      });