前端图片懒加载lazyload

快来打我* 2021-09-18 15:30 780阅读 0赞

在实际的项目开发中，我们通常会遇见这样的场景：一个页面有很多图片，而首屏出现的图片大概就一两张，那么我们还要一次性把所有图片都加载出来吗？显然这是愚蠢的，不仅影响页面渲染速度，还浪费带宽。这也就是们通常所说的首屏加载，技术上现实其中要用的技术就是图片懒加载--到可视区域再加载。

## 思路： ##

将页面里所有img属性src属性用data-xx代替，当页面滚动直至此图片出现在可视区域时，用js取到该图片的data-xx的值赋给src。

Demo地址：[http://axuebin.com/lazyload][http_axuebin.com_lazyload]

原文地址：[原生JS实现最简单的图片懒加载][JS]

可查看demo地址根据源代码自行实现。

### 下面介绍jquery封装好的jQuery.lazyload ###

基于jQuery图片延迟加载插件jQuery.lazyload,使用延迟加载在可提高网页下载速度。在某些情况下，它也能帮助减轻服务器负载。

**一.使用方法**

**1. 引用jquery和jquery.lazyload.js到你的页面**

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

**2. 你必须改变图片的标签。图像的地址必须放在`data-original`属性上。给懒加载图像一个特定的class（例如:lazy）。这样你可以很容易地进行图像插件捆绑。代码如下：**

HTML：

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

js：

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

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

[http_axuebin.com_lazyload]: http://axuebin.com/lazyload
[JS]: https://github.com/axuebin/articles/issues/1

发表评论取消回复

表情：

评论列表（有 0 条评论，780人围观）

还没有评论，来说两句吧...

相关阅读

相关 lazyLoad实现图片懒加载

1.为需要执行懒加载的标签添加指定属性： <img class="data-daily-image" data-daily-image="${topPic}"

客官°小女子只卖身不卖艺/ 2023年02月23日 08:16/ 0 赞/ 25 阅读

相关懒加载jquery.lazyload.js

首先引入jquery文件和懒加载文件 <script type="text/javascript" src="http://libs.baidu.com/jquery/1.1

ゝ一世哀愁。/ 2022年09月24日 09:30/ 0 赞/ 392 阅读

相关 Vue图片懒加载vue-lazyload-使用

[演示][Link 1] ![322f52b362684db09fd3b1c3599d114b.gif][] 安装插件 npm install vue-l

待我称王封你为后i/ 2022年08月28日 06:39/ 0 赞/ 441 阅读

相关 vue-lazyload 图片懒加载

第一步npm install vue-lazyload --save 然后在main.js里引入 import VueLazyLoad from 'vue-lazyload

布满荆棘的人生/ 2022年05月09日 08:03/ 0 赞/ 529 阅读

相关 vue图片懒加载插件 vue-lazyload

第一步：安装插件 npm i vue-lazyload --save 第二步：在main.js中引入，并使用 ![watermark_type_ZmFuZ3poZ

柔光的暖阳◎/ 2022年04月16日 06:06/ 0 赞/ 878 阅读

相关前端如何实现图片懒加载(lazyload) 提高用户体验

定义图片懒加载又称图片延时加载、惰性加载，即在用户需要使用图片的时候加载，这样可以减少请求，节省带宽，提高页面加载速度，相对的，也能减少服务器压力。惰性加载是程序人性

﹏ヽ暗。殇╰゛Y/ 2022年04月05日 13:20/ 0 赞/ 550 阅读

相关前端图片懒加载lazyload

在实际的项目开发中，我们通常会遇见这样的场景：一个页面有很多图片，而首屏出现的图片大概就一两张，那么我们还要一次性把所有图片都加载出来吗？显然这是愚蠢的，不仅影响页面渲染速度，

快来打我*/ 2021年09月18日 15:30/ 0 赞/ 781 阅读

相关 vue-lazyload实现图片懒加载的方式

1、安装vue-lazyload npm install --save vue-lazyload 2、在main.js中引入并申明使用（1）引入 im

骑猪看日落/ 2021年09月16日 21:46/ 0 赞/ 710 阅读

相关 vue--图片懒加载，使用vue-lazyload

vue v-lazy官方API：[https://www.npmjs.com/package/vue-lazyload][https_www.npmjs.com_packag

╰半橙微兮°/ 2021年08月30日 12:10/ 0 赞/ 895 阅读

相关 lazyLoad-懒加载

懒加载也叫延迟加载，指的是在长网页中延迟加载图像，是一种很好优化网页性能的方式。用户滚动到它们之前，可视区域外的图像不会加载。这与图像预加载相反，在长网页上使用延迟加载将使网页

短命女/ 2021年08月26日 14:04/ 0 赞/ 752 阅读