JavaScript
您现在的位置是:博客主页 > Web教程 > JavaScript

jQuery图片延迟加载 jquery.lazyload.js 插件

By 钱伯斯 on JavaScript Time 2017-12-06 from:互联网 7150人已围观
简介:    azyload.js用于长页面图片的延迟加载,视口外的图片会在窗口滚动到它的位置时再进行加载,这是与预加载相反的。

1、jquery.lazyload.js简介:

lazyload.js用于长页面图片的延迟加载,视口外的图片会在窗口滚动到它的位置时再进行加载,这是与预加载相反的。

2、jquery.lazyload.js优点:

它可以提高页面加载速度,在某些情况清晰它也可以帮助减少服务器负载。

3、安装lazyload.js:

 (1)、bower安装:

$ bower install jquery.lazyload

 (2)、npm安装:    

$ npm install jquery-lazyload

4、lazyload.js站点中如何使用:

lazyload依赖与jquery,所以先引入jquery和lazyload。

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

(1)、将图片路径写入data-original属性

(2)、给lazyload的图片增加一个名为lazy的class

(3)、选择所有要lazyload的图片(img.lazy),执行lazyload();

<img class="lazy" data-original="img/example.jpg" style="margin-top:1000px" height="200">
<script type="text/javascript" charset="utf-8"> 
$(function(){ $("img.lazy").lazyload(); }) 
</script>

注意:必须设置图片的高度或者宽度,否则插件可能无法正常工作

相关文章
文章评论

( 0 )