懒加载作用:
为了节省用户流量和提高页面性能,可以在用户浏览到当前资源(一般是图片)的时候,再对资源进行请求和加载。这样既对网站进行了性能优化,也提高了用户的体验。
懒加载插件使用方法介绍
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>
以上就是懒加载插件的简单应用,当然还有很多样式可以设置,可以参考官网的进行设置即可。