简介

inview是一款JQuery图片延时加载插件。

使用

1.  引入文件

<script src="static/js/jquery-3.6.0.min.js"></script>
<script src="static/js/jquery.inview.min.js"></script>

2.  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>

3.  调用

<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>

相关链接

GitHub 地址：https://github.com/protonet/jquery.inview