技术文章分类(180)

技术随笔(11)

lazyload.js缓冲加载图片的使用

1、导入jquery.js，jquery.lazyload.js库

2、img部分

<img src="images/loadin.gif" data-original="http://img.shu163.com/uploadfiles/wallpaper/2010/6/2010093006114284.jpg">

src：　　　　是loading的图片（你也可以放模糊图片）

data-original:是你最终要载入的图片

3、js部分

window.onload = function(){
  $(".dishImg img").lazyload({
             event: "lazyload",
             effect: "fadeIn",
             threshold : 400 //在离可视区400px以内的图片也开始加载了，提升体验度
        }).trigger("lazyload");  
}

注意，trigger("lazyload")很重要，在界面刷新时就可以及时显示图片，体验度很好。"lazyload"和event是对应的。

 

以下是个完整的实例（你需要自行导入jquery.js，jquery.lazyload.js库，以及loading.gif图片方可测试成功）：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.lazyload.js"></script>
<title>title</title>
</head>
<body>
    <section id="wrapper">
        <ul>
            <li>
                <img src="images/loading.gif" data-original="http://img.shu163.com/uploadfiles/wallpaper/2010/6/2010093006114284.jpg">
            </li>
            <li>
                <img src="images/loading.gif" data-original="http://photo.8080.net/xiangce/17306/2007524205720/l_2007524205749.JPG">
            </li>
            <li>
                <img src="images/loading.gif" data-original="http://photo.8080.net/xiangce/17306/2007524205720/l_20075242167.JPG">
            </li>
            <li>
                <img src="images/loading.gif" data-original="http://imga.mumayi.com/android/wallpaper/2011/10/12/2011101205550352773473.jpg">
            </li>
            <li>
                <img src="images/loading.gif" data-original="http://www.itoobz.com/uploads/allimg/1211/1-121125102551.jpg">
            </li>
            <li>
                <img src="images/loading.gif" data-original="http://pic1.win4000.com/wallpaper/f/5101fb10c4543.jpg">
            </li>
            <li>
                <img src="images/loading.gif" data-original="http://images-fast.digu.com/930d8830aef29ffe41bc9d2aa195d7d4_0009.jpg">
            </li>
            <li>
                <img src="images/loading.gif" data-original="http://images.gamerlol.com/upload/2012/10/gl2012102511035273256579.jpg">
            </li>
            <li>
                <img src="images/loading.gif" data-original="http://www.itoobz.com/uploads/allimg/1209/19-12091H23334.jpg">
            </li>
        </ul>
    </section>
</body>
<style>
    ul{
        width:100%;
    }
    li{
        width:100%;
        margin-top:10px;
    }
    li img{width:100%;}
</style>
<script type="text/javascript">
    window.onload = function(){
         $("img").lazyload({
             effect: "fadeIn", //加载图片使用的效果(淡入)
             threshold : 400
        });
    }
    
</script>
</html>

 

 

posted @ 2014-04-11 16:54  坤哥MartinLi  阅读(262)  评论(0)  编辑  收藏  举报