利用Jquery Lazyload JS插件实现网页图片延迟加载

最新推荐文章于 2024-04-24 01:03:46 发布
最新推荐文章于 2024-04-24 01:03:46 发布
阅读量721 收藏 1
点赞数 1
文章标签： javascript jquery 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47207594/article/details/127464468
版权

Jquery Lazyload是一款网页图片延迟加载JS插件，本文介绍该JS的使用方法。

最新的jquery lazyload可以单独使用（即不依赖jquery），本文介绍的是依赖jquery的使用及配置方法。

Github项目地址：https://github.com/tuupola/lazyload

本文使用的是1.9.7版本（实际与1.9.6版本一致）

首先需要引用jquery，如：​​https://libs.afengim.com/libs/jquery-3.5.1/jquery-3.5.1-min.js​​

之后引用​​jquery.lazyload.js​​及​​jquery.scrollstop.js​​

1.实例代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Jquery lazyload</title>
    <script src="https://libs.afengim.com/libs/jquery-3.5.1/jquery-3.5.1-min.js" type="application/javascript"></script>
    <script src="https://libs.afengim.com/libs/lazyload-1.9.7/jquery.lazyload.min.js"
            type="application/javascript"></script>
    <script src="https://libs.afengim.com/libs/lazyload-1.9.7/jquery.scrollstop.min.js"
            type="application/javascript"></script>
    <style>
        img {
            max-width: 100%;
            height: 100%;
            object-fit: cover;
        }
    </style>
</head>
<body>
<img class="lazy" data-original="https://tools.afengim.com/demo/jquery-lazyload/images/1.webp" height="574"
     width="765"/>
<img class="lazy" data-original="https://tools.afengim.com/demo/jquery-lazyload/images/2.webp" height="574"
     width="765"/>
<img class="lazy" data-original="https://tools.afengim.com/demo/jquery-lazyload/images/3.webp" height="574"
     width="765"/>
<img class="lazy" data-original="https://tools.afengim.com/demo/jquery-lazyload/images/4.webp" height="574"
     width="765"/>
<img class="lazy" data-original="https://tools.afengim.com/demo/jquery-lazyload/images/5.webp" height="574"
     width="765"/>
<img class="lazy" data-original="https://tools.afengim.com/demo/jquery-lazyload/images/6.webp" height="574"
     width="765"/>
<img class="lazy" data-original="https://tools.afengim.com/demo/jquery-lazyload/images/7.webp" height="574"
     width="765"/>
<img class="lazy" data-original="https://tools.afengim.com/demo/jquery-lazyload/images/8.webp" height="574"
     width="765"/>
<img class="lazy" data-original="https://tools.afengim.com/demo/jquery-lazyload/images/9.webp" height="574"
     width="765"/>
<img class="lazy" data-original="https://tools.afengim.com/demo/jquery-lazyload/images/10.webp" height="574"
     width="765"/>
<img class="lazy" data-original="https://tools.afengim.com/demo/jquery-lazyload/images/11.webp" height="574"
     width="765"/>
<img class="lazy" data-original="https://tools.afengim.com/demo/jquery-lazyload/images/12.webp" height="574"
     width="765"/>
<img class="lazy" data-original="https://tools.afengim.com/demo/jquery-lazyload/images/13.webp" height="574"
     width="765"/>
<img class="lazy" data-original="https://tools.afengim.com/demo/jquery-lazyload/images/14.webp" height="574"
     width="765"/>
<img class="lazy" data-original="https://tools.afengim.com/demo/jquery-lazyload/images/15.webp" height="574"
     width="765"/>
<img class="lazy" data-original="https://tools.afengim.com/demo/jquery-lazyload/images/16.webp" height="574"
     width="765"/>
<img class="lazy" data-original="https://tools.afengim.com/demo/jquery-lazyload/images/17.webp" height="574"
     width="765"/>
<img class="lazy" data-original="https://tools.afengim.com/demo/jquery-lazyload/images/18.webp" height="574"
     width="765"/>
<script type="text/javascript">
    $(function () {
        $("img.lazy").lazyload({
            effect: "fadeIn",
        });
    });
</script>
</body>
</html>

打开网页后只加载当前屏幕内的图片，只有滚动或下拉浏览器才会加载底部的图片

2.初始化属性

使用jquery lazyload需要进行初始化才能生效延迟加载效果。

初始化代码：

<script type="text/javascript">
    $(function () {
        $("img.lazy").lazyload({
            effect: "fadeIn",
        });
    });
</script>

可以通过不定义​​.lazy样式​​实现不带​​class="lazy"​​即可初始化，会对该页面的全部img标签生效

全局初始化代码如下：

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

可以在初始化代码​​$("img.lazy").lazyload({​​后添加属性，以实现更多效果，每个属性以,结尾

需要为img标签添加lazy样式（lazy可以在初始化定义值），如：​​$("img.afengblog").lazyload​​

示例：​​<img class="afengblog" data-original="test.png"/>​​

图片路径引用方法默认使用​​data-original​​，也可以在初始化定义data-后的值。

如：​​data_attribute : "afengblog",​​

示例：​​<img class="afengblog" data-afengblog="test.png"/>​​

以下介绍基础的使用属性：

​​threshold​​属性可以提前加载图片，可以自定义高度，如：​​200​​，则提前200高度加载图片。

​​effect​​属性可以定义载入效果，一般为：​​fadeIn​​（渐入效果）。

​​placeholder​​属性可以设置全局图像占位符，如：​​data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=​​ 此处也可以设置http地址图片或者base64图片，实现替换默认的加载图片。

​​effectspeed​​属性可以设置动画持续时长, 单位毫秒，如：​​1000​​（动画持续1000ms）

3.可用的初始化属性

$('img.lazy').lazyload({
  // threshold: 提前开始加载高度.
  threshold: 200,
  // failure_limit: 同 failurelimit
  failure_limit: 10,
  // event: 设置何种事件触发时才加载, 默认 scroll
  event: 'click',
  // effect: 使用何种载入效果
  effect: "fadeIn",
  // container: 对某容器中的图片实现效果
  container: $("#container"),
  // data_attribute: 用于设置 lazyload 操作的自定义属性(data-后面的属性名)
  data_attribute : "attr",
  // skip_invisible: 是否 不加载不可见图片. true 不加载, false 加载.
  skip_invisible : false,
  // appear: 用于在图片加载之前到显示图片之间的处理函数，一般用于展示加载动画.
  appear: function() {},
  // load: 用于图片加载完毕之后执行的函数.
  load: function() {},
  // placeholder: 设置占位图片路径
  placeholder : "img/lazy.gif",
  // failurelimit: 一次加载图片的张数(图片排序混乱时使用)
  failurelimit : 10,
  // effectspeed: 设置动画持续时长, 单位毫秒
  effectspeed : 1000,
});

各属性介绍

以下内容转自博文链接：https://blog.csdn.net/Leo_DLi/article/details/112315506

​​1, threshold: 默认值 0​​

threshold: 值为数字, 用于设置提前开始加载高度. 如设置为200, 表示滚动条在离目标位置还有 200 的高度时就开始加载图片, 可以做到不让用户察觉。
​​2, failure_limit : 默认值 0​​failure_limit: 值为数字, 同 failurelimit(下文介绍)

​​3, event: 默认值 "scroll"​​event: 用于设置触发加载的时机. 值有scroll(滚动), click(点击), mouseover(鼠标划过), sporty(运动的), foobar(…).可以实现鼠标莫过或点击图片才开始加载,后两个值未测试…

​​4, effect: 默认值 "show"​​

effect: 用于设置显示图片是的动画效果. 值有: show(直接显示), fadeIn(淡入), slideDown(下拉)等

​​5, container: 默认值 window​​container: 值为某容器, 用于设置对某容器中的图片实现效果. lazyload默认在拉动浏览器滚动条时生效, 这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片

​​6, data_attribute: 默认值 "original"​​data_attribute: 用于设置 lazyload 操作的自定义属性(data-后面的属性名)

​​7, skip_invisible: 默认值 true​​skip_invisible: 设置是否加载不可见的图片.

Lazy Load 插件默认对隐藏的图片不加载(例如 display:none ). 这样做有助于性能的优化. 如果希望连隐藏的图片一起加载,则可以把 skip_invisible 设为 false .

​​8, appear: 默认值 null​​appear: 用于在图片加载之前到显示图片之间的处理函数，一般用于展示加载动画.

​​9, load: 默认值 null​​load: 用于图片加载完毕之后执行的函数.

​​10, placeholder: 默认值 "data:image/png;base64,iV......"​​placeholder: 用于设置占位图片.

值为某一图片路径. 此图片用来占据将要加载的图片的位置, 待图片加载时, 占位图则会隐藏

 

接下来的两个是兼容低版本的属性, 在该版本中正常使用.

​​11, effectspeed : 毫秒数​​effectspeed: 用于控制动画的速度.

属性默认是空的, 所以如果不设置它, 动画的时间为400毫秒.

​​12, failurelimit: 值为数字. 在图片布局混乱时使用.​​Lazy Load 有一个循环查找 img 的机制. 根据 HTML 文档的布局从上往下查找, 当找到第一个并未显示/加载的 img 时, 就会停止往下查找.(其实就是对 $("img.lazy") 这个对象(组)进行顺序查找)。

Demo地址：​​https://tools.afengim.com/demo/jquery-lazyload/​​

原文地址：​​https://www.afengblog.com/jquery-lazyload.html​​

阿峰博客
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
jquery.lazyload 实现图片延迟加载jquery插件
12-12
怎么实现ImageLazyLoad 一、使用JQuery插件 ，插件名: jquery.lazyload（7kb大小），压缩后（3kb大小） 在线压缩js http://closure-compiler.appspot.com/home 虽然是很牛X的特效,不过用JQuery插件只需要短短几句...
jquery插件lazyload.js延迟加载图片的使用方法
12-11
如果一个网页很长并且有很多图片的话，下载图片就需要很多时间，那么就会影响整个网页的加载速度，而这款延迟加载插件，会通过你的滚动情况来加载你需要看的图片，然后它才会从后台请求下载图片，最后显示出来。...
图片懒加载插件jquery.lazyload.min.js
LLL_liuhui的博客
10-18 1432
1、下载 官网下载地址：http://plugins.jquery.com/lazyload/ 2、引入 <script src="./jquery.js"></script> <script src="./jquery.lazyload.min.js"></script> html、 <ul> <li>&...
jquery.lazyload.js下载以及 图片延迟加载的使用
zwxiaole的专栏
06-18 245
图片延迟加载,网上有很多资料,但是我找jquery.lazyload.js找了很久没发现,而且很多地方的js不对, 想来想去这个应该也是jquery的一个插件,于是搜索jquery的所有插件,终于发现了,下载地址如下: https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.js 这个是最新版本的jquer...
图片延迟加载——jquery.lazyload.js
最新发布
yuxingwu9872的博客
04-24 366
你必须改变图片的标签, 图像的地址必须放在data-original属性上。给懒加载图像一个特定的class(例如:lazy)。提升网页加载速度的方法有很多种, 用 jquery.lazyload.js 实现图片异步延迟加载, 对于页面包含图片较多的网站来说, 会是个不错的提升网页打开速度的方法。这将使所有 class 为 lazy 的图片将被延迟加载.如何设置单个图片延迟加载。
前端优化之图片延迟加载（lazyload.js）
weixin_33938733的博客
03-30 123
　　要想缩短首屏加载时间，思路一般是减少http请求次数和降低每次的请求量。本文中使用现成的lazyload.js插件，文末会放出下载地址。 　　lazyload.js可以实现图片分批次加载，不是一次性加载完毕再分批次展现。使用该插件有个注意的地方，图片要加上宽高。因为默认图是1像素的，所以如果没有给图片限制宽高，当滚动条滚动时会全部加载出来。 　　比如下面这段代码，其中的图片会一次性加载完成...
jQuery延迟加载(懒加载)插件 – jquery.lazyload.js
weixin_33979363的博客
04-08 116
http://www.w3cways.com/1765.html http://www.cnblogs.com/tinyphp/archive/2013/04/09/3009385.html   jquery插件的写法，以及requireJS如何引入jquery插件 下面，就是一个自制的jQuery小插件(affix)，用于固定某个元素在浏览器顶部(也可以自定义距离浏览器顶部多高的位置)，...
缓冲加载图片的 jQuery 插件 lazyload.js 使用方法详解
vincent_void的专栏
09-01 9644
Lazy Load 这个 jQuery 插件，是用来缓冲加载图片的插件。如果一篇文章很长有很多图片的话，下载图片就需要很多时间。而这款插件，会检测你的滚动情况，只有你要看到那个图片的时候，它才会从后台请求下载图片，然后显示出来。使用这个插件，可以在需要显示图片的时候，才下载图片，所以可以减少服务器的压力，避免不必要的资源下载。如果一个人不看下面的图片，那加载下面的图片就是一种浪费。 La
Jquery.LazyLoad.js修正版下载，实现图片延迟加载插件
01-19
没解决方案，就得发挥咱DIY的精神，自己想法解决，分析了BUG，理了理思路，结合前段时间我做弹出窗口特效的方法，解决了Jquery.LazyLoad.js的兼容问题，现将思路和方法与大家分享一下。 解决思路大致是两点，一是从...
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
10-27
jQuery lazyLoad.js插件是一个非常流行的JavaScript库，它允许开发者在网页中实现图片的延迟加载。这个功能的主要目的是提高页面加载速度，尤其是对于拥有大量图片的网页，因为它只在图片进入浏览器视口时才开始加载...
Vue-Lazyload学习文档
MonsterK666的博客
03-26 1378
Vue-Lazyload懒加载 注：此文档中的配置实例中文文档为机翻和根据自我理解进行的翻译 可能如原文有出入，若想理解原意请看英语文档 原官方文档地址：https://www.npmjs.com/package/vue-lazyload 1、安装 npm i vue-lazyload -S 2、使用 2.1、main.js导入并配置 import VueLazyload from 'vue-lazyload' Vue.use(VueLazyload, { preLoad: 1.3, er
jQuery.lazyload.js
09-06
jQuery图片延迟加载插件jQuery.lazyload.js,使用延迟加载在可提高网页下载速度以及提高用户体验，也能帮助减轻服务器负载。
图片延迟加载的jq
10-17
jquery.lazyload用JQ实现图片延迟加载，即在浏览器看到的地方才加载图片。
jquery.lazyload图片预加载效果 jquery预加载
11-13
jquery.lazyload图片预加载 调用简单 内有实例
jquery.lazyload.js 图片懒加载 --demo
08-21
jquery.lazyload.js 图片懒加载 --demo
jquery.lazyload.min.js
01-27
jquery.lazyload.min.js
延时加载（lazy load）
松鼠豪的坚果
09-03 504
延时加载（lazy load）1. 什么是延时加载？技术背景： 当项目中的页面需要加载大量的图片时，如果不进行相关的优化处理，显然页面的性能和对用户的体验是非常不友好的。如果3s还没有加载完成，用户很可能直接关掉你的页面。 优化的方式有很多，首先从源头来讲，可以对加载的图片信息进行优化处理，代码精简减少冗余。和—–延时加载。 延时加载 即 当在真正需要数据的时候，才真正执行数据加载操作。是一种
jquery.lazyload插件实现图片延迟加载
05-25
jquery.lazyload是一款jQuery插件，可以实现图片的延迟加载。当页面加载时，只会加载可视区域内的图片，当页面滚动时，再加载其他的图片，这样可以提高网页的加载速度和用户体验。 使用jquery.lazyload插件，需要先引入jQuery库和jquery.lazyload插件的js文件。然后在页面中需要延迟加载的图片上添加class="lazy"和data-original属性，data-original属性存储了真实的图片地址。 接着在js中编写代码： ``` $(function() { $("img.lazy").lazyload(); }); ``` 这样就完成了延迟加载的设置。如果想要设置一些参数，可以传入一个对象作为参数，如下所示： ``` $(function() { $("img.lazy").lazyload({ effect : "fadeIn", // 图片淡入效果 threshold : 200, // 提前加载像素 failure_limit : 10, // 加载失败重试次数 event : "click", // 事件触发加载 container: $("#container") //容器对象 }); }); ``` 这样就可以根据自己的需求进行设置。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

阿峰博客

你的鼓励是我最大的动力！谢谢

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值