jquery插件 —— Lazy Load 延迟加载图片

最新推荐文章于 2023-04-11 16:34:57 发布

转载最新推荐文章于 2023-04-11 16:34:57 发布 · 443 阅读

Jquery 专栏收录该内容

6 篇文章

订阅专栏

LazyLoad是一款基于jQuery的图片延迟加载插件，能够有效提升页面加载速度并减轻服务器负担。该插件仅加载处于浏览器可视区域内的图片，其余部分则在用户滚动页面时按需加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的.

在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担.

1、 Lazy Load 依赖于 jQuery . 请将下列代码加入页面 head 区域:

< script src = "jquery.js" type = "text/javascript" ></ script >

< script src = "jquery.lazyload.js" type = "text/javascript" ></ script >

2、你必须修改 HTML 代码. 在 src 属性中设置展位符图片, demo 页面使用 1x1 像素灰色 GIF 图片. 并且需要将真实图片的 URL 设置到 data-original 属性. 这里可以定义特定的 class 以获得需要延迟加载的图片对象. 通过这种方法你可以简单地控制插件绑定.

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

处理图片的代码如下：

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

这将使所有 class 为 lazy 的图片将被延迟加载

插件下载网站： http://plugins.jquery.com/lazyload/

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

赤色天空

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

前端：lazy load(图片懒加载)——加载显示大量图片的页面优化

凉城古梦猫扑街的博客

04-15

6622

最近写加载大量图片的页面，由于服务器不给了，不能一次性加载全部图片，卡卡的，于是参考很多github的例子以及博客园——“蜗牛闯红灯”大佬的博客，对页面进行优化，当你鼠标拉下，浏览到某个div时候，才加载那一块的图片，简称：1.　图片懒加载 lazy load在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。　　什么是图片懒加...

JQuery LazyLoad实现图片延迟加载-探究

weixin_34245082的博客

08-17

164

我的广告单元，有空点一下哦，谢谢！　　对于大量图片的网站，图片延迟加载是提高速度和性能的好方法。　　目前图片延迟加载主要分两大块，一是触发加载（根据滚动条位置加载图片）；二是自动预加载（加载完首屏后n秒后自动加载其他位置的图片）。大体常用的就这两种。　　这里介绍第一种方法，根据滚动条手动加载图片，最初采用的是LazyLoad.js这个现成的小插件，当然自己用jque...

参与评论您还未登录，请先登录后发表或查看评论

Lazy Load - jQuery plugin for lazy loading images（基于jQuery的图片延迟加载插件）

weixin_34403693的博客

12-30

179

<!--个人理解：将需要延迟加载的图片的src属性全部设置为一张相同尽可能小(目的是尽可能的少占宽带，节省流量，由于缓存机制，当浏览器加载了一张图片之后，相同的图片就会在缓存中拿，不会重新到服务器上拿)的图片，然后将图片的实际地址写在alt属性里，当鼠标往下滑动的时候，动态的就将各自的alt属性的值赋值给src属性，这样就实现了图片延迟加载，减轻服务器端的压力，节省本地带宽，提升了访问网页的...

JS进阶篇--怎样实现图片的懒加载以及jquery.lazyload.js的使用

weixin_33804582的博客

06-06

307

在项目中有时候会用到图片的延迟加载，那么延迟加载的好处是啥呢？我觉得主要包括两点吧，第一是在包含很多大图片长页面中延迟加载图片可以加快页面加载速度；第二是帮助降低服务器负担。下面介绍一下常用的延迟加载插件jquery.lazyload.js以及怎样实现一个延迟加载的插件。一：jquery.lazyload.js插件 lazyload...

Jquery PlugIn for lazy loading items.

diandian82的专栏

08-15

359

//use it with slider control and lister onChange event (function($) { $.fn.sliderthumbs = function(options) { var myOptions = { listener: null }; var $this = $(

jquery.lazyload懒加载图片

weixin_43829905的博客

03-31

283

jquery.lazyload懒加载图片 lazyload.js /* * Lazy Load - jQuery plugin for lazy loading images * * Copyright (c) 2007-2013 Mika Tuupola * * Licensed under the MIT license: * http://www.opensource.org...

jQuery.lazyload使用及源码分析

极客神殿

07-20

454

前言：貌似以前自己也写过图片懒加载插件，但是新公司使用的是jQuery.lazyload插件，为了更好的运用，自己还是把源码看了遍，分别记录了如何使用，插件原理，各个配置属性的完整解释，demo实例，源码分析(较简短)，源码分析可以配合使用，配置属性，原理进行阅读一、如何使用 // 最简单的使用，不带参数 $('img').lazyload(); // 带参数(配置对象)，下面配置对象中...

网站图片延迟加载（LazyLoad按需加载）

qq_46244454的博客

03-02

350

什么是LazyLoad按需加载 LazyLoad按需加载采用图片按需加载技术，打开页面时只会加载首屏图片。访客往下滚动时才会陆续加载需要展现的图片，这样非常高效，体验舒适。（类似功能：如何实现animate动画滑动加载网页） LazyLoad按需加载实现方法我们在自己做网站时，也可以实现LazyLoad按需加载，增强网站的用户体验。下面学做网站论坛就来介绍一下LazyLoad按需加载实现方法。（...

图片懒加载

m0_73520343的博客

09-11

269

vue中使用的图片懒加载---vue-lazyload

lazyLoad实现图片懒加载

MICHONG的博客

07-06

392

实现图片懒加载 1.为需要执行懒加载的标签添加指定属性： <img class="data-daily-image" data-daily-image="${topPic}" src="/image/custom/loading.gif" title="${name}" alt="${name}" width="360" height="225" data-img="${topPic}" isload="false"/> ...

jquery.lazyload 实现图片延迟加载jquery插件

Dandan的前端开发---专注于div css js jquery

10-24

5947

Lazy Load延迟加载也有的称为惰性加载，是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的. 在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担

vue-lazyload 图片懒加载的原理与使用

weixin_44090040的博客

04-11

320

【代码】vue-lazyload 图片懒加载的原理与使用。

【JQuery】动态加载的图片如何实现LazyLoad

热门推荐

sky 胡萝卜星星

10-20

1万+

JQuery.lazyload.js是个专门用来做图片延迟加载的插件，当然网上有对它吐槽的，有各种不屑的，他们那是前端大牛，我等只能用用大牛提供插件的可没那能耐，碰巧有人在论坛问动态加载的图片怎么应用lazyload效果，其实我会说在此之前我从来没用过这个插件么…… 通过nuget下载lazyload.js，然后搜索该插件的用法，其实网上中文的用法说明都千篇一律，可我需要了解的东西也都知道了

前端实现图片懒加载(lazyload)的两种方式

w001yy的博客

10-20

4189

在实际的项目开发中，我们通常会遇见这样的场景：一个页面有很多图片，而首屏出现的图片大概就一两张，那么我们还要一次性把所有图片都加载出来吗？显然这是愚蠢的，不仅影响页面渲染速度，还浪费带宽。这也就是们通常所说的首屏加载，技术上现实其中要用的技术就是图片懒加载–到可视区域再加载。当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次，俗称占位图），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。懒加载

延迟加载(Lazyload)三种实现方式

weixin_33862188的博客

03-01

1302

2019独角兽企业重金招聘Python工程师标准>>> ...

vue-lazyload 使用中关于动态图片加载的问题

AlexGeek

09-12

3028

小记：在这些天学习Node+Vue的前后端全栈项目时，为了进行系统的优化，使用了大量的插件，其中一个插件的使用出现了问题无法的到解决，这个就是vue-lazyload的动态图片加载问题比如说在上面的这种情况下，商品区做了懒加载，但通过商品区左边的动态切换按钮进行切换发现，商品信息可以发生改变，但是商品图片却不可以动态加载，这个主要是由于在v-lazy指令的使用中没有添加key，如下的使用是...

JS使用lazyload进行图片懒加载

拆解SEO逻辑，深挖技术架构与流量获取路径。

08-10

143

原理：图片的加载是由src引起的，当对src赋值时浏览器会请求图片资源，基于这个，可以利用HTML5的属性data-xxx来保存图片的路径，当我们需要加载图片的时候才将data-xxx的值赋予src。就能实现图片的按需加载了，也就是懒加载了方法： 1.使用lazyload插件，引用jquery.js和jquery.lazyload.js 2.将img标签中的src属性赋值为加载图片，...

掌握jquery.lazyload实现图片延迟加载技术

jquery.lazyload.js是众多实现延迟加载的插件中的一个，它具有兼容性好、使用方便和效果稳定的特点，通过简单的配置即可实现图片的延迟加载。不过，随着前端技术的发展，也出现了许多新的技术解决方案，例如使用原生...