首页 > 其他分享 >利用Jquery Lazyload JS插件实现网页图片延迟加载

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

时间：2024-02-05 11:23:33浏览次数：30  
标签：Jquery 插件 img JS width lazyload 765 加载 图片

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") 这个对象(组)进行顺序查找)。

 

————————————————

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

原文链接：https://blog.csdn.net/m0_47207594/article/details/127464468

 

标签：Jquery,插件,img,JS,width,lazyload,765,加载,图片
From： https://www.cnblogs.com/weibo806/p/18007612

相关文章

  • 第22天：安全开发-PHP应用&留言板功能&超全局变量&数据库操作&第三方插件引用
    #数据库操作-mysqli函数&增删改查PHP函数：连接，选择，执行，结果，关闭等参考：https://www.runoob.com/php/php-ref-mysqli.html常用：mysqli_connect()打开一个到MySQL的新的连接。mysqli_select_db()更改连接的默认数据库。mysqli_query()执行某个针对数据库的查询。mysqli_fetch......
  • js 用户代理检测
    Opera在用户代理字符串方面引发争议最大的一个浏览器就是Opera。Opera默认的用户代理字符串是所有现代浏览器中最符合逻辑的，因为它正确标识了自己和版本。在Opera8之前，其用户代理字符串都是这个格式：比如，WindowsXP上的Opera7.54的字符串是这样的：Opera8发布后，语言标记从......
  • js Konqueror 和 KHTML 的版本号
    WebKit2003年，苹果宣布将发布自己的浏览器Safari。Safari的渲染引擎叫WebKit，是基于Linux平台浏览器Konqueror使用的渲染引擎KHTML开发的。几年后，WebKit又拆分出自己的开源项目，专注于渲染引擎开发。这个新浏览器和渲染引擎的开发者也面临与当初IE3.0时代同样的问题：怎......
  • js 基于能力检测进行浏览器分析
    虽然可能有人觉得能力检测类似于黑科技，但恰当地使用能力检测可以精准地分析运行代码的浏览器。使用能力检测而非用户代理检测的优点在于，伪造用户代理字符串很简单，而伪造能够欺骗能力检测的浏览器特性却很难。检测特性可以按照能力将浏览器归类。如果你的应用程序需要使用特定的浏......
  • js 浏览器元数据
    navigator对象暴露出一些API，可以提供浏览器和操作系统的状态信息。GeolocationAPInavigator.geolocation属性暴露了GeolocationAPI，可以让浏览器脚本感知当前设备的地理位置。这个API只在安全执行环境（通过HTTPS获取的脚本）中可用。这个API可以查询宿主系统并尽可能精确......
  • js 软件与硬件检测
    现代浏览器提供了一组与页面执行环境相关的信息，包括浏览器、操作系统、硬件和周边设备信息。这些属性可以通过暴露在window.navigator上的一组API获得。不过，这些API的跨浏览器支持还不够好，远未达到标准化的程度。识别浏览器与操作系统特性检测和用户代理字符串解析是当前......
  • js 浏览器分析
    想要知道自己代码运行在什么浏览器上，大部分开发者会分析window.navigator.userAgent返回的字符串值。所有浏览器都会提供这个值，如果相信这些返回值并基于给定的一组浏览器检测这个字符串，最终会得到关于浏览器和操作系统的比较精确的结果。相比于能力检测，用户代理检测还是有一定......
  • pinterest插件集中移动图片到指定文件夹
    importosimportshutildefis_image_file(filename):"""检查文件是否为图片文件。"""image_extensions=['.jpg','.jpeg','.png','.gif','.bmp','.tiff']returnany......
  • JS——常用实例
    对话框输入，获取，计算，输出。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>JS:操作HIML对象</title></head><body><!--1.两个输人框和一个输出框--><labelfor="1......
  • GeoJSON
    GeoJSON概览https://www.processon.com/mindmap/6224a2dc7d9c0836f90060a8地理要素特征对象->Feature{type:"Feature","properties":{name:'xxx'},"geometry":{{"type":"Point",......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99