图片惰性加载（滚动到可视区时 图片才加载）

 一、第一种（适用大量动画）

实际工作中如果一个页面需要大量的动画上面写法就很累人了，但我们可以用wow.js和animate.css动画库配合来实现需要的动画效果。wow.js下载地址http://www.dowebok.com/131.html，animate.css下载地址https://daneden.github.io/animate.css/

使用方法分别引入animate.css和wow.js然后在html中加上  class="wow slideInLeft"  第二个class可以自已更改.

 HTML

<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></div>
<div class="wow slideInRight" data-wow-offset="10"  data-wow-iteration="10"></div>

wow是必须要添加的
slideInLeft说明了动画的样式，是从左边滑动出来的。更多动画样式可以再这个网址https://daneden.github.io/animate.css/查看。

js

new一下调用一下方法就完成了动画效果的附加

new WOW().init();

哪里需要动画只需要在哪里的class里面写上wow slideInLeft 就好了。

如果需要自定义配置，可如下使用：

var wow = new WOW({
    boxClass: 'wow',
    animateClass: 'animated',
    offset: 0,
    mobile: true,
    live: true
});
wow.init();

 

 

二、第二种用法：（适用少量动画）

惰性加载图片：

<ul>
  <li class='lazy'><img data-original='images/0.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/1.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/2.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/3.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/4.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/5.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/6.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/7.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/8.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/9.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/10.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/11.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/12.jpg' src='images/loading.gif'/></li>
</ul>

js:

<script type="text/javascript">
 
    // 图片惰性加载
    init();
    function init() {
      var images = document.images;
      // 加载首屏图片
      for (var i = 0, len = images.length; i < len; i++) {
        var obj = images[i];
        // 如果在可视区域并且还没被加载过
        if(obj.getBoundingClientRect().top < document.documentElement.clientHeight && !obj.isLoad) {
          obj.isLoad = true;
          // 先调用 HTML5 方法
          if (obj.dataset) 
            imageLoaded(obj, obj.dataset.original);
          else 
            imageLoaded(obj, obj.getAttribute('data-original'));
        } else {
          break;
        }
      }
    }
    window.onscroll = function() {
      lazyload();
    };
    function lazyload() {
      var lazy = 500;
      var images = document.images;
      for (var i = 0, len = images.length; i < len; i++) {
        var obj = images[i];
        if (obj.getBoundingClientRect().top - lazy < document.documentElement.clientHeight && !obj.isLoad) {
          obj.isLoad = true;
          obj.style.cssText = "transition: ''; opacity: 0;transform: translateY(-16px) translateX(16px);"

          if (obj.dataset) 
            imageLoaded(obj, obj.dataset.original);
          else 
            imageLoaded(obj, obj.getAttribute('data-original'));
        }
        if (obj.getBoundingClientRect().top < document.documentElement.clientHeight && !obj.isShow) {
          obj.isShow = true;
          obj.style.cssText = "transition: 1s; opacity: 1;transform: translateY(0) translateX(0);"

        }
      }
    }
    function imageLoaded(obj, src) {
      var img = new Image();
      img.onload = function() {
        obj.src = src;
      };
      img.src = src;
    }

</script>