懒加载的应用

懒加载作用:

           为了节省用户流量和提高页面性能,可以在用户浏览到当前资源(一般是图片)的时候,再对资源进行请求和加载。这样既对网站进行了性能优化,也提高了用户的体验。

懒加载插件使用方法介绍

1:首先进入Lazy load官网下载插件http://plugins.jquery.com/lazyload/

   2:下载到本地电脑之后会得到一个压缩包,将压缩包进行解压

        在我们的HTML页面引入jquery然后引入刚解压的jquery.lazyload.js 

        body页面HTML内容输入如下:   

<img class="lazy" alt="" width="640" height="480" data-original="img/example.jpg" />

      图像的地址必须放在data-original属性上。给懒加载图像一个特定的class(例如:lazy)。这样你可以很容易地进行图像插          件捆绑。

3:使用Jquery代码调用代码如下:

<script>
$(function() {
    $("img.lazy").lazyload();
});
</script>

以上就是懒加载插件的简单应用,当然还有很多样式可以设置,可以参考官网的进行设置即可。

猜你喜欢

转载自blog.csdn.net/zhoulucky1993/article/details/83348982