代码改变世界

Jquery.LazyLoad图片懒加载的使用

2013-12-10 10:16  hduhans  阅读(232)  评论(0)    收藏  举报

　　当网站上有大量图片要展示的话，如果一次把所有的图片都加载出来的话，这势必会影响网站的加载速度，给用户带来比较差的体验。通过使用jquery的lazy loader插件可以实现图片的延迟加载，当网页比较长的时候，会先只加载用户视窗内的图片，视窗外的图片会等到你拖动滚动条至后面才加载，这样有效的避免了因图片过多而加载慢的弊端。

　　示例下载：http://pan.baidu.com/s/1jBXQk

　　示例主要代码如下(详细使用见官网http://www.appelsiini.net/projects/lazyload)：

<html>
<head>
<title>jquery-lazyloader演示</title>
<script src="jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="jquery.lazyload.min.js" type="text/javascript"></script>
<script>
    $(function() {
        $("img.lazy").lazyload({
            effect : "fadeIn",
            //threshold : 200
            placeholder:"loading.gif"
        });
    });
</script>
</head>
<body>
    <img class="lazy" data-original="img/1.jpg" width="640" height="480"><br />
    <img class="lazy" data-original="img/2.jpg" width="640" height="480"><br />
    <img class="lazy" data-original="img/3.jpg" width="640" height="480"><br />
    <img class="lazy" data-original="img/4.jpg" width="640" height="480"><br />
    <img class="lazy" data-original="img/5.jpg" width="640" height="480"><br />
    <img class="lazy" data-original="img/6.jpg" width="640" height="480"><br />
    <img class="lazy" data-original="img/7.jpg" width="640" height="480"><br />
    <img class="lazy" data-original="img/8.jpg" width="640" height="480"><br />
    <img class="lazy" data-original="img/9.jpg" width="640" height="480"><br />
    <img class="lazy" data-original="img/10.jpg" width="640" height="480"><br />
</body>
</html>
View Code