建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

JQuery图片延时加载插件jquery.inview.js

来源:易助科技网浏览量:13收藏

简介


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