图片的延时加载

对于有较多的图片的网页，使用图片延迟加载，能有效的提高页面加载速度。这里用的插件Lazy Load

这里提供教程网站：http://code.ciaoca.com/jquery/lazyload/

这里只需要引入  jquery-1.11.1.min.js和jquery.lazyload.min.js

注意 ：将真实图片地址写在 data-original 属性中，而 src 属性中的图片换成占位符的图片（例如 1x1 像素的灰色图片或者 loading 的 gif 图片） 添加 class="lazy" 用于区别哪些图片需要延时加载，当然你也可以换成别的关键词，修改的同时记得修改调用时的 jQuery 选择器，添加width 和height属性有助于在图片未加载时沾满所需的空间。

这样就可以实现了，是不是很easy。哈哈  
<html><head>
<meta charset="utf-8">
<title>图片延迟加载 </title>
</head>
<body>      
    <div class="example content">
        <img width="765" height="574" alt="BMW M1 Hood" data-original="img/bmw_m1_hood.jpg" src="img/bmw_m1_hood.jpg" style="display: block;">
        <img width="765" height="574" alt="BMW M1 Side" data-original="img/bmw_m1_side.jpg" src="img/bmw_m1_side.jpg" style="display: block;">
        <img width="765" height="574" alt="Viper 1" data-original="img/viper_1.jpg" src="img/grey.gif"><br>
        <img width="765" height="574" alt="Viper Corner" data-original="img/viper_corner.jpg" src="img/grey.gif"><br>
        <img width="765" height="574" alt="BMW M3 GT" data-original="img/bmw_m3_gt.jpg" src="img/grey.gif"><br>
        <img width="765" height="574" alt="Corvette Pitstop" data-original="img/corvette_pitstop.jpg" src="img/grey.gif"><br>
    </div>      
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery.lazyload.min.js"></script>
<script>
$(function(){
  $('img').lazyload({
    effect:'fadeIn',
    //event: 'scrollstop',
    appear:function(elements_left, settings) {
      console.log('appear');
      console.log(elements_left);
      //console.log(this, elements_left, settings);
    },
    load:function(elements_left, settings) {
      console.log('load');
      console.log(elements_left);
      //console.log(this, elements_left, settings);
    }
    
  });
});
</script>
</body>
</html>

效果的话，我们可以用360浏览器保存网页图片功能进行观看

posted @ 2015-11-18 17:15  悟空，你真了不得  阅读(1090)  评论(0)  编辑  收藏  举报