Jquery图片延迟加载插件jquery.lazyload.js的使用方法

下面是详细的JQuery图片延迟加载插件jquery.lazyload.js的使用方法攻略：

什么是jquery.lazyload.js插件？

jquery.lazyload.js插件是一款支持图片延迟加载的jquery插件，可以很好地提升网站性能和用户体验。当用户浏览页面时，只有当图片出现在视口（可见区域）时，才会加载图片，以减少页面的加载时间和流量，同时也不会影响页面的用户体验。

如何使用jquery.lazyload.js插件？

1.下载jquery.lazyload.js插件，可以在官网上下载（http://www.appelsiini.net/projects/lazyload）或在github上下载（https://github.com/tuupola/jquery_lazyload）。

2.引入jquery.lazyload.js插件和jquery文件到页面中：

<script src="jquery.min.js"></script>
<script src="jquery.lazyload.min.js"></script>

3.为需要延迟加载的图片添加占位符属性“data-original”，并去掉src属性。

<img class="lazy" data-original="http://example.com/image.jpg">

4.在jquery.ready()内部使用.lazyload()方法来初始化插件。

$(document).ready(function() {
    $("img.lazy").lazyload();
});

至此，jquery.lazyload.js插件的使用就完成了。在页面滚动时，只有出现在视口内的图片才会被加载，从而提高网站性能和用户体验。

示例说明

示例1：加载多张图片

<html>
<head>
    <title>lazyload.js demo</title>
    <script src="jquery-1.7.min.js"></script>
    <script type="text/javascript" src="jquery.lazyload.min.js"></script>
</head>
<body>
    <h1>lazyload.js demo</h1>
    <div style="height: 500px">
        <img src="spacer.gif" data-original="https://static.googleusercontent.com/media/www.google.com/zh-CN//intl/zh-CN/webmasters/docs/search-engine-optimization-starter-guide_zh-cn.pdf" alt="PDF文档">
        <img src="spacer.gif" data-original="http://www.w3school.com.cn/i/eg_tulip.jpg" alt="郁金香">
        <img src="spacer.gif" data-original="http://img0.imgtn.bdimg.com/it/u=3248741881,185863352&fm=27&gp=0.jpg" alt="小猫">
        <img src="spacer.gif" data-original="http://img0.imgtn.bdimg.com/it/u=4299443540,2662543343&fm=27&gp=0.jpg" alt="小狗">
    </div>
    <script type="text/javascript">
        $(function() {
            $("img").lazyload({
                effect: "fadeIn"
            });
        });
    </script>
</body>
</html>

这个示例演示了如何使用jquery.lazyload.js插件来延迟加载多张图片。这里在每张图片前加了一个1像素的透明gif图片作为占位符，去掉了原始的src属性，加了新属性"data-original"，其中包含了每张图片的链接。

示例2：图片从上至下逐渐出现

<html>
<head>
    <title>lazyload.js demo</title>
    <script src="jquery-1.7.min.js"></script>
    <script type="text/javascript" src="jquery.lazyload.min.js"></script>
</head>
<body>
    <h1>lazyload.js demo</h1>
    <div style="height: 500px">
        <img src="spacer.gif" data-original="img/cat1.jpg" alt="Cat1">
        <img src="spacer.gif" data-original="img/cat2.jpg" alt="Cat2">
        <img src="spacer.gif" data-original="img/cat3.jpg" alt="Cat3">
        <img src="spacer.gif" data-original="img/cat4.jpg" alt="Cat4">
        <img src="spacer.gif" data-original="img/cat5.jpg" alt="Cat5">
        <img src="spacer.gif" data-original="img/cat6.jpg" alt="Cat6">
        <img src="spacer.gif" data-original="img/cat7.jpg" alt="Cat7">
    </div>
    <script type="text/javascript">
        $(function() {
            $("img").lazyload({
                effect: "fadeIn",
                threshold: 200,
                placeholder: "img/grey.gif",
                failurelimit: 20
            });
        });
    </script>
</body>
</html>

这个示例演示了如何使用jquery.lazyload.js插件来延迟加载多张图片，并且图片从上至下逐渐出现。这里添加了一些lazyload的参数，比如threshold（阈值），设置了200像素。只要图片距离视口的距离小于等于此值，就开始加载图片，可以实现从上至下逐渐出现图片的效果。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Jquery图片延迟加载插件jquery.lazyload.js的使用方法 - Python技术站