jquery.lazyload图片延迟加载插件—源码下载及使用方法和实例推荐 亲测 收藏


  • :
  • 04-10 12:37
  • :
  • 56次
  • :
  • 0条
  • 0赞

简介本文和大家分享一个jquery开发的用来延迟加载网页里图片的lazyload插件,

当我们网站里的图片特别多的时候,打开网页的时候,会出现“卡顿”的现象,这就是因为有太多图片正在加载而造成的,但我们的网页,在打开的时候,并不需要把所有的图片都一起加载的,只需要加载在我们“视野”之内的图片就行,其它的图片可以延迟加载,这样就加快了我们网页打打开速度,让别人访问我们网页的时候体验更好。

今天就和大家分享一个jquery开发的,可以用来延迟加载我们网页里图片的插件:jquery.lazyload

一:jquery.lazyload插件的下载与CDN加速:

//站长提供的百度云下载:有1.9.1 、 1.9.2 和1.9.3 三个版本
链接: https://pan.baidu.com/s/1X-3RgkndxY7_R-eOdF5giQ 提取码: 799f 

//官网下载:
http://plugins.jquery.com/lazyload/

//免费CDN加速:
http://cdn.staticfile.org/jquery.lazyload/1.9.1/jquery.lazyload.js
http://cdn.staticfile.org/jquery.lazyload/1.9.1/jquery.lazyload.min.js

二:jquery.lazyload插件的使用方法:

1》:把jquery库和jquery.lazyload插件引入我们的网页:

//注意把src里的地址改为自己web里的实际地址:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.lazyload.js"></script>

2》:修改我们web里需要延迟加载的img图片:

<img data-original="图片实际地址" />

注意:我们都知道,如果把我们网页里的图片都改成这样的话,会影响我们网页在搜索引擎里的权重,所以站长想在不改变我们网页HTML结构的情况下,用jquery来动态修改,代码如下:

$("img").each(function(){
    var url=$(this).prop("src");
    $(this).attr("data-original",url);
    $(this).prop("src","等待小图片/占位小图片");
});

在站长看来,把上面这段代码放到我们网页的底部,或者jquery的$(function(){})内,应该会让我们的网页,在加载图片之前,就把图片的src地址更换掉,但站长在测试的时候,按下F12,看浏览器里的资源加载,发现不起作用。

站长认为,这不是我们的代码有问题,而是在测试的时候图片太少,并且图片加载的速度太快,所以才让浏览器在“一瞬间”就已经把图片全都加载完成了,看不出来“延迟加载”的效果。

正在看这篇文章的朋友,可以试着用上面这段代码来“动态”改变我们网页里图片的src地址,不要直接修改HTML里的内容,这样就不会影响我们的网页在搜索引擎里的权重了。

文章最后站长提供的在线实例演示,就是用的这个方法。

3》:加入延迟加载的动作js:

$(function() {
    $("img").lazyload();
});

三:jquery.lazyload插件的参数说明:

$("img").lazyload({ 
    effect : "fadeIn", //图片显示的方式:show(直接显示),fadeIn(淡入),slideDown(下拉);
    threshold : 200, //设置图片距离屏幕可视范围200px时提前载入;
    event: 'click',  //默认为scroll,触发加载图片的事件,值有:click、mouseover、sporty(运动的);
    container: $("#container"), // 容器,设置只对容器之内的图片进行延迟加载;
    failure_limit:2 //设置加载2张可见区域外的图片;        
});

上面的参数,解释的都很清楚,相信大家都能明白是什么意思,只有最后一个failure_limit,大家可以有点不太明白,站长来解释一下:

当我们把我们的网页按照上面的方法“改造”完后,本来我们的图片可能是一排一个的来显示,因为图片全都换成了“占位图”或者“等待小图标”,所以变成了一排显示了好几个(如果你的网页里的每张图片都放在一个单独的容器里,就不会出现这种情况了),在这种情况下,我们就可以用failure_limit这个参数了,可以在加载可视区域外我们指定数目的图片后,就不再加载。

四:在线实例演示:

这是在线实例地址:jquery.lazyload图片延迟加载在线演示



您正在找的文章可能是: