使用JS进行图片懒加载

最新推荐文章于 2025-10-31 14:42:33 发布
原创 最新推荐文章于 2025-10-31 14:42:33 发布 · 1.2w 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#js懒加载 #图片懒加载 #js #懒加载

本文原创，转载请注明出处

前几天修改了之前APP的一些功能，发现图片的加载太慢了，而且一个页面显示太多图片的话其他js什么的也都延迟了加载，造成事件方法未加载、操作无效果,用户体验差。原因除了图片显示的有点多之外还有我们的服务器限制的有下载速度，所以考虑到了图片的懒加载(这个思路也可以实现上拉加载)。

下面我只是简单实现了一下效果，抛砖引玉，想一次加载一个屏幕那么多图片的话也不难，需要的可以另外加入判断即可，这里就不再赘述：

2017-05-15 第一次编辑

2017-11-24 更新
看了一下之前写的这篇博客，发现有些地方写的比较马虎或者说瞎写，因为那个时候以为这样的需求已经足够用了，闲来无事看了下发现问题很大。已经更新，如果发现还有错误请留言。
2019-1-29 更新
隔段时间翻一下自己写的东西，果然有不一样的感触，当时写的只是很粗糙的东西，跟之前看到的朋友说声抱歉，现在再优化一下。
2020-5-20 更新
init()加入了params.diff：距img元素显露出的距离，params.defaultUrl：默认站位图；增加了图片显示的过渡效果。

文章目录

CSS代码

只是设置图片的一些样式：

<style>
    *{
        margin: 0;
        padding: 0;
    }
    div {
        height: 250px;
        text-align: center;
    }
    img{
        width: 50px;
        height: 50px;
        opacity: 0;
        transition: opacity 1s ease-in;
    }
</style>

HTML代码

1.png是一个1*1px的透明图或者带有logo，这样加载快，测试效果的话无所谓，只要能区分开路径不一样就行，jpg 格式图是实际应该加载的图片路径，data-url存放图片实际路径：

 <div>
        <img class="lazyImg" data-url="https://www.runoob.com/images/compatible_ie.gif" alt="">
    </div>
    <div>
        <img class="lazyImg" data-url="https://www.runoob.com/images/compatible_firefox.gif" alt="">
    </div>
    <div>
        <img class="lazyImg" data-url="https://www.runoob.com/images/compatible_opera.gif" alt="">
    </div>
    <div>
        <img class="lazyImg" data-url="https://www.runoob.com/images/compatible_chrome.gif" alt="">
    </div>
    <div>
        <img class="lazyImg" data-url="https://www.runoob.com/images/compatible_safari.gif" alt="">
    </div>

JS代码

原理：

  1. 初始进入页面，计算要加载哪些图片，创建Image，加载图片，让要显示的图片路径改为实际路径；
  2. 滚动至图片要显示出来时（diff设置滚动至距图片多少距离开始加载），执行 1 的逻辑：
<script>
    /*
    *  init() 在初始化时调用, params.diff：距img元素显露出的距离，params.defaultUrl：默认站位图
    *
    *  loadOriginalImage() 加载占位图
    *
    *  firstLoad() 是首次进入页面加载图片的方法
    *
    *  bindScroll() 是绑定滚动
    * */
    var loadImg = {
        diff: 50, // 距img元素显露出的距离
        defaultUrl: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC',
        init: function (params) {
            this.loadOriginalImage();
            var self = this;
            // 替换默认值
            if (params) {
                this.diff = params.diff || this.diff;
                this.defaultUrl = params.defaultUrl || this.defaultUrl;
            }
            window.onscroll = function () {
                self.bindScroll();
            };
        },
        // 加载占位图
        loadOriginalImage: function () {
            var self = this;
            [].slice.call(document.querySelectorAll('.lazyImg')).forEach(function (e) {
                e.src = self.defaultUrl;
            });
            this.firstLoad();
        },
        firstLoad: function () {
            //设备可用高度
            var availHeight =  window.screen.availHeight;

            //遍历#one下的img，然后替换路径
            for(var x = 0;x < document.querySelectorAll('.lazyImg').length;x++){
                var el = document.querySelectorAll('.lazyImg')[x];
                //如果是首屏显示的图片
                if (el.offsetTop < availHeight) {
                    var imgUrl = el.dataset.url;
                    var img = new Image();
                    img.src = imgUrl;
                    img.onload = (function (e) {
                        el.src = el.dataset.url;
                        el.style.opacity = 1;
                    })();
                } else {
                    break;
                }
            }
        },
        bindScroll: function () {
            // 设备可用高度
            var availHeight = window.screen.availHeight;
            // 滚动的高度
            var scrollHeight = document.documentElement.scrollTop;

            // 判断如果显示出来了#two
            for (var x = 0; x < document.querySelectorAll('.lazyImg').length; x++) {
                var el = document.querySelectorAll('.lazyImg')[x];
                // img距顶部的高度
                var contentTop = el.offsetTop;
                // 判断此时显示出img
                if (scrollHeight + this.diff > contentTop - availHeight) {
                    // 如果data-url 不等于 src，说明图片没有加载到
                    if (el.dataset.url !== el.src) {
                        var imgUrl = el.dataset.url;
                        var img = new Image();
                        img.src = imgUrl;
                        img.onload = (function () {
                            el.src = el.dataset.url;
                            el.style.opacity = 1;
                        })();
                    }
                }
            }
        }
    };
    loadImg.init({diff: 150});
</script>

完整代码

在线示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport" />
    <title>图片懒加载</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    div {
        height: 250px;
        text-align: center;
    }
    img{
        width: 50px;
        height: 50px;
        opacity: 0;
        transition: opacity 1s ease-in;
    }
</style>
<body>
<div>
    <div>
        <img class="lazyImg" data-url="https://www.runoob.com/images/compatible_ie.gif" alt="">
    </div>
    <div>
        <img class="lazyImg" data-url="https://www.runoob.com/images/compatible_firefox.gif" alt="">
    </div>
    <div>
        <img class="lazyImg" data-url="https://www.runoob.com/images/compatible_opera.gif" alt="">
    </div>
    <div>
        <img class="lazyImg" data-url="https://www.runoob.com/images/compatible_chrome.gif" alt="">
    </div>
    <div>
        <img class="lazyImg" data-url="https://www.runoob.com/images/compatible_safari.gif" alt="">
    </div>
</div>
<script>
    /*
    *  init() 在初始化时调用, params.diff：距img元素显露出的距离，params.defaultUrl：默认站位图
    *
    *  loadOriginalImage() 加载占位图
    *
    *  firstLoad() 是首次进入页面加载图片的方法
    *
    *  bindScroll() 是绑定滚动
    * */
    var loadImg = {
        diff: 50, // 距img元素显露出的距离
        defaultUrl: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC',
        init: function (params) {
            this.loadOriginalImage();
            var self = this;
            // 替换默认值
            if (params) {
                this.diff = params.diff || this.diff;
                this.defaultUrl = params.defaultUrl || this.defaultUrl;
            }
            window.onscroll = function () {
                self.bindScroll();
            };
        },
        // 加载占位图
        loadOriginalImage: function () {
            var self = this;
            [].slice.call(document.querySelectorAll('.lazyImg')).forEach(function (e) {
                e.src = self.defaultUrl;
            });
            this.firstLoad();
        },
        firstLoad: function () {
            //设备可用高度
            var availHeight =  window.screen.availHeight;

            //遍历#one下的img，然后替换路径
            for(var x = 0;x < document.querySelectorAll('.lazyImg').length;x++){
                var el = document.querySelectorAll('.lazyImg')[x];
                //如果是首屏显示的图片
                if (el.offsetTop < availHeight) {
                    var imgUrl = el.dataset.url;
                    var img = new Image();
                    img.src = imgUrl;
                    img.onload = (function (e) {
                        el.src = el.dataset.url;
                        el.style.opacity = 1;
                    })();
                } else {
                    break;
                }
            }
        },
        bindScroll: function () {
            // 设备可用高度
            var availHeight = window.screen.availHeight;
            // 滚动的高度
            var scrollHeight = document.documentElement.scrollTop;

            // 判断如果显示出来了#two
            for (var x = 0; x < document.querySelectorAll('.lazyImg').length; x++) {
                var el = document.querySelectorAll('.lazyImg')[x];
                // img距顶部的高度
                var contentTop = el.offsetTop;
                // 判断此时显示出img
                if (scrollHeight + this.diff > contentTop - availHeight) {
                    // 如果data-url 不等于 src，说明图片没有加载到
                    if (el.dataset.url !== el.src) {
                        var imgUrl = el.dataset.url;
                        var img = new Image();
                        img.src = imgUrl;
                        img.onload = (function () {
                            el.src = el.dataset.url;
                            el.style.opacity = 1;
                        })();
                    }
                }
            }
        }
    };
    loadImg.init({diff: 150});
</script>
</body>
</html>
react-reactlazyimgcomponent一个基于jquerylazyload结合react组件概念完成的图片懒加载小插件
08-15
react-lazyimg-component 一个基于jquery.lazyload，结合 react 组件概念完成的图片懒加载小插件。支持全局配置，config 配置，个性定制等特性，还支持 velocity.js、animate.css动画库配置。
原生JS实现图片懒加载之页面性能优化
10-17
本文将深入探讨如何使用原生JavaScript实现图片懒加载，以及这种方式如何帮助优化页面性能。 一、图片懒加载原理 1. 数据存储：首先，我们需要为图片`<img>`标签添加一个自定义属性，如`data-src`，用来存储实际的...
图片懒加载JS
weixin_44178497的博客
02-05 367
懒加载
js图片懒加载
qq_42450901的博客
08-19 309
Document *{ margin: 0;padding:0;list-style: none; } ul{ overflow: hidden; width: 800px; margin:0 auto; } li{ w...
前端优化：图片懒加载实现
最新发布
2501_93895868的博客
10-31 307
图片懒加载是一种前端性能优化技术，通过延迟加载图片资源（直到图片进入视口或接近用户可视区域），减少初始页面加载时间、节省带宽并提升用户体验。以下我将逐步解释原理、实现方法、代码示例及注意事项，确保内容清晰可靠。通过以上实现，图片懒加载可显著提升页面加载速度（减少首屏资源大小），尤其适用于图片密集的网站。实际部署时，建议结合CDN和响应式图片（如。现代浏览器（Chrome、Firefox等）支持。（推荐，灵活且高效）。优先使用现代API如。（简单但兼容性有限）和。
图片懒加载库echo.js源码学习
a54654132的博客
08-20 1852
最近不是在学习设计模式吗，然后就看到了代理模式加载图片的样例，然后自己实现了一下，就发现，自己写的这货每次就只能加载一张图片，而且图片要放在哪也是个很严重的问题 然后就去了 gayhub 找了找了找流行的图片懒加载库，这一找，就找到了一个echo.j是，打开一看，源码只有100多行吧，震惊。。，看完源码，哎，木有上代理模式呀 仔细学习了下源码：觉得这种做法比较适合图片位置确定场景的吧，比如文章
js 图片懒加载案例
Vue1024的博客
07-07 235
js 图片懒加载案例
js实现图片懒加载效果
10-19
在本文中，我们关注的是如何利用js实现图片懒加载效果。实现图片懒加载的关键在于判断哪些图片需要立即加载，哪些图片可以延迟加载。通常的做法是监听滚动事件，结合图片距离视窗顶部的位置来决定何时加载图片。 ...
原生JS实现图片懒加载(lazyload)实例
10-19
原生JavaScript实现的图片懒加载方案并不复杂，但需要理解其核心原理和关键代码。 首先，实现懒加载的基本思路是：在页面初始化时，非首屏的图片的`src`属性设置为一个默认的占位符，如加载中的图片或者一张小尺寸...
图片懒加载文件jquery插件库EasyLazyload
10-11
`jQuery EasyLazyload` 插件库基于广泛使用的jQuery框架开发，它简化了图片懒加载的实现过程，让开发者无需深入了解底层机制就能轻松地在网站上应用。以下是对这个插件库的一些核心知识点的详细解释： 1. **基本...
解析javascript图片懒加载与预加载的分析总结
10-21
图片懒加载与预加载是前端开发中优化页面性能的两种常用技术，它们各自有不同的实现方式和应用场景，通过合理利用这两种技术，可以有效提升用户体验和减少服务器负载。 首先，我们来探讨懒加载（Lazy Loading）技术...
用js实现图片懒加载
liuli0927的博客
08-26 297
用js实现图片懒加载
js实现图片懒加载
AloneAsFoam的博客
02-22 474
当网页图片比较大的时候，在加载的过程中img还没加载出来的时候是一片空白， 影响排版美观，我们可以用一张占位图，当资源图片资源加载完成后再把占位图替换掉: 需要加载的资源文件   占位图   var logo = document.getElementById('logo-img'),       load = document.getElementById('load-img'
js——实现图片懒加载
Tyche_ya的博客
03-25 361
懒加载就是优先加载可视区域的内容，其他部分等进入了可视区域再加载。
javascript 图片懒加载
tangtang5963的博客
12-19 551
基于 jQuery 的图片延迟加载插件，在用户滚动页面到图片之后才进行加载。 对于有较多的图片的网页，使用图片延迟加载，能有效的提高页面加载速度。 前端开发仓库：http://code.ciaoca.com/jquery/lazyload/
JS实现图片的懒加载
webchang的博客
04-15 4441
图片的懒加载
JS图片懒加载（详解注释+功能解析）
2301_76459194的博客
05-15 634
文章摘要： 懒加载是一种优化技术，通过延迟加载图片资源，仅在图片进入可视区域时才请求加载。其实现原理是：初始时，img标签的src属性为空，图片地址存储在自定义属性（如data-src）中。通过监听滚动事件，当图片进入可视区域时，将data-src的值赋给src属性，触发图片加载。懒加载适用于图片较多的场景，如电商网站，能有效减少无效资源加载，避免并发请求过多阻塞JS加载，提升页面性能。文章还提供了代码示例，展示了如何通过JavaScript实现图片懒加载，并解释了相关函数和属性的作用。
js 小案例 实现图片的懒加载
小讨厌的博客
09-27 236
懒加载：顾名思义，大大的提高用户的体验节省不必要的资源浪费以及网站性能的提高 用于：图片较多的网站，如京东，淘宝，千图网等，图片量比较多， 需要用到（load,scroll）事件 你需要知道几个参数的意思 ： outerHeight()：返回本身盒子的高度，包括边框哦 scrollTop()：滚动条卷上去的内容高度 offset().top:https://www.cnblogs.com/firstdream/p/5497307.html 需要加载的图片设置，如下 data-src = 图片
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值