Lazyload图片懒加载jQuery插件 - 资源分享

Lazyload图片懒加载jQuery插件

发布于 2017-05-08 字数 6802 浏览 2928 评论 0

图片懒加载现在几乎所有的网站都有,算是一个非常热门的功能,因为他的用处非常大,凡是站长几乎都不会拒绝这个需求,实现图片懒加载的插件有很多,而且又是良莠不齐,写这篇文章就是给大家介绍,我认为最好用的图片懒加载插件。

Lazyload介绍

如今的带宽以及足够大了,但是对于网站而言,并不是这样,带宽依然是网站的瓶颈,而且现在网站的资源都是比较大的,例如一个图片网站,希望展示高清的图片给用户,就需要更大尺寸的图片,往往一个图集并不止一个图片,多个图片在一个页面展示。

Lazyload图片懒加载jQuery插件

访客打开网页的时候,浏览器会同时去请求这个图片,如果访问的用户多了,势必会造成服务器带宽堵塞,导致网页打开缓慢,这时候图片的按需加载就非常必要了,用户看到哪里就加载哪里的图片,而且可以有效的环境服务器带宽压力,减少服务器并发。

Lazyload 作为一个老牌的图片懒加载插件,几乎已经接近完美,能解决我们所能遇见的大多数问题,而且安装和使用都非常方便,推荐大家使用和推广,当然如果你的技术够硬,你可以自己写一个来满足你自己项目的需求。

安装Lazyload

你可以通过 bower 或者 npm 安装Lazyload 。

$ bower install jquery.lazyload
$ npm install jquery-lazyload

或者你跟我一样,根本就不知道上面的这些东西,那么还是老老实实的下载JS文件,然后引入到网页中,千万别忘记了 Lazyload 是依赖jQuery的,所以在引入 Lazyload 的时候还要先引入 jQuery 文件。

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

使用Lazyload

使用非常简单,这个插件没有Style样式,所以我们不需要配置和修改相关的CSS代码,使用总共分两步。

1、为图片加入样式 lazy 图片路径引用方法用 data-original

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

这里注意,很多人第一次使用的时候没有修改图片的 src 属性,然后他通过控制台插件HTTP连接发现图片资源请求了两次,就说这个插件是假的,其实是他配置不对。

上面的 lazy 类并不是唯一的,只是为了方便查找到图片元素。

2、在网页加载完毕以后调用插件

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

配置Lazyload

Lazyload有很多可以自定义的参数,来满足你项目的个性化需求,例如你可以修改图片显示的事件和方式,在没有加载图片的时候,显示一张占位图片告诉用户这里有一张图片。

$("img.lazy").lazyload({
  placeholder : "img/grey.gif", //用图片提前占位
    // placeholder,值为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏
  effect: "fadeIn", // 载入使用何种效果
    // effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn
  threshold: 200, // 提前开始加载
    // threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉
  event: 'click',  // 事件触发时才加载
    // event,值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标莫过或点击图片才开始加载,后两个值未测试…
  container: $("#container"),  // 对某容器中的图片实现效果
    // container,值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片
  failurelimit : 10 // 图片排序混乱时
     // failurelimit,值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题.
});

设置图片显示的阈值

默认情况下,网页滚动到哪里,就显示哪里的图标,但是如果你希望图片早一点显示出来,你可以配置 threshold 参数,例如设置为 200,那么当用户滚动到距离图片还有 200 像素的时候,就开始加载图片并显示出来。

$("img.lazy").lazyload({
     threshold : 200
});

图片的显示事件

默认是自动显示,但是如果你的网站受到CC攻击,你可以要求你的用户点击图片再加载,那么你可以配置 event 参数,你可以使用jQuery事件如 clickmouseover。你也可以使用自定义的事件,如 sportyfoobar。默认是等待用户向下滚动,图像出现在视口上。只有当用户点击它们才能加载图像:

$("img.lazy").lazyload({
    event : "click"
});

小技巧:您可以使用此技巧,如延迟加载图像。以下代码等待五秒后,其余的页面完成加载之前加载图像。看到它工作在延迟加载演示。

$(function() {
    $("img.lazy").lazyload({
        event : "sporty"
    });
});

$(window).bind("load", function() {
    var timeout = setTimeout(function() {
        $("img.lazy").trigger("sporty")
    }, 5000);
});

使用图片显示动画

默认情况下,插件等图像完全加载和调用 show()。你可以使用任何你想要的效果。下面的代码使用 fadeIn() 效果。检查效果如何在演示页。

$("img.lazy").lazyload({
    effect : "fadeIn"
});

兼容不支持JavaScript的浏览器

几乎每个人都启用JavaScript功能。但是如果你仍然想支持非JavaScript的用户,你可以在 <noscript></noscript> 标签里面包含真正的图片标签。

<img class="lazy" data-original="img/example.jpg"  width="640" heigh="480">
<noscript>
    <img src="img/example.jpg" width="640" heigh="480">
</noscript>

为了防止占位符和真实图像同时显示,用CSS隐藏占位符。

.lazy {
    display: none;
}

JavaScript的浏览器必须启用显示占位符文件加载时。这可以在初始化插件时同时完成。

$("img.lazy").show().lazyload();

图片布局不连续

什么是图片布局不连续,就是假如你的网页是左右布局,然后左边有图右边也有图,但是滚动网页的时候,会优先显示左边的图,因为他的代码写在前面,而当把左边的图显示完以后,才会显示右边的图片。

滚动页面插件循环虽然卸载图像。循环检查图像是否已可见。默认情况下,当第一个外部视口被发现时,循环停止。这是基于以下假设。页面上的图像顺序与HTML代码中的图像顺序相同。一些布局假设这可能是错误的。你可以控制failure_limit设置加载行为。

$("img.lazy").lazyload({
    failure_limit : 10
});

设置 failure_limit 设置为 10 原因插件停止后发现10折叠的图片,图片加载搜索。如果你有一个时髦的布局设置这个数字高。最坏的情况是实际的图像数量。

相关链接

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2891 文章
评论
84935 人气
更多

推荐作者

伊面

文章 0 评论

白况

文章 0 评论

七禾

文章 0 评论

亢潮

文章 0 评论

悲念泪

文章 0 评论