Lazyload图片懒加载jQuery插件

发布于 2017-05-08 10:34:54 字数 5010 浏览 3268 评论 0

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

Lazyload介绍

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

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

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折叠的图片,图片加载搜索。如果你有一个时髦的布局设置这个数字高。最坏的情况是实际的图像数量。

相关链接

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

关于作者

JSmiles

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

4401 文章
128 评论
84972 人气
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。