图片延时加载jquery.inview.js用法详解

我们在网站上总能见到这样的效果，若是有图片，图片都是先用loading加载一小段时间，然后紧接着出来要显示的图片，即效果如下：

　　v2_loading.gif，几秒钟时间过渡到v2_pic_01_s.jpg这样，这就是图片延时加载。

具体实现技术如下：

1）引入jquery库文件；

2）引入jquery.inview.min.js文件；

3）html结构：

<a href="http://q.wan.com" target="_blank" title="秦时明月"><img src="http://static.wan.com/index/images/v2_pic_01_s.jpg" data-original="http://static.wan.com/index/images/v2_pic_01.jpg" alt="秦时明月" /></a>

4）css样式：a{background-image: url(http://static.wan.com/index/images/v2_loading.gif);}

5）script引用函数方法：

<script>
    $(function(){
      //延时加载页面图片。
      $(‘img[data-original]‘).live(‘inview‘, function(event, isVisible) {//这里要用live，不能用on；
        if (!isVisible) {
          return;
        }
        var img = $(this);
        // Show a smooth animation
        img.css(‘opacity‘, 0);
        img.load(function() {
          img.animate({
            opacity: 1
          }, 500);
        });
        // Change src
        img.attr(‘src‘, img.attr(‘data-original‘));
        // Remove it from live event selector
        img.removeAttr(‘data-original‘);
      });
    });
    </script>

以上步骤即可实现该效果。