圖片延時加載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>

以上步驟便可實現該效果。