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

浏览数：40 / 时间：2015年06月09日

我们在网站上总能见到这样的效果，若是有图片，图片都是先用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>

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

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class style com log src http html 文件 si class style com log src http html 文件 si

相关文章

随机文章

您可能还喜欢

您可能还喜欢