使用JS进行图片懒加载

最新推荐文章于 2024-05-30 17:38:42 发布
最新推荐文章于 2024-05-30 17:38:42 发布
阅读量1.1w 收藏 6
点赞数 2
分类专栏： 小玩意 小效果 文章标签： js懒加载 图片懒加载 js 懒加载
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/github_37125043/article/details/72174017
版权

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

前几天修改了之前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>
CN-cheng
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript图片加载---加载大图的一个解决方案
MIKUScallion的专栏
04-21 2679
网页在加载一张大图片时，往往要加载很久； 而且，在加载过程中，无法很好地控制图片的样式，容易造成错位等显示错误； 如果能够在加载大图时，先使用一张较小的loading图片占位，然后后台加载大图片，当大图片加载完成后，自动替换占位图， 这样能提供更好的用户体验； 由于，我在开发一个图片查看器时，遇到这样的需求，所以我写了个angular服务，来解决这个问题，效果还不错； 虽然是angula
【JavaScript】图片的懒加载
等时钟成长
03-25 4662
【JavaScript】图片的懒加载 文章目录【JavaScript】图片的懒加载1. 懒加载2. 利用`scroll`事件利用`HTMLElement.offsetTop`利用`Element.getBoundingClientRect()`节流优化3. 利用`IntersectionObserver`4. References 1. 懒加载 在一个很长很长的页面里，只渲染可视区域里的内容对于性能提升非常有用。图片懒加载就是这样一种技术，我们可以在图片进入可视区域之后再去请求/渲染。 这需要一个技巧，就是
Vue自定义图片懒加载指令v-lazyload详解
08-30
主要为大家详细介绍了Vue自定义图片懒加载指令v-lazyload，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
图片懒加载的四种实现方案
最新发布
qq_44741577的博客
05-30 1378
懒加载：延迟加载，对于一个很长的页面，优先加载可视区域的内容，其他部分等进入可视区域时再加载。
Glide4 设置默认图片和错误图片，即设置占位图
热门推荐
ezconn的博客
11-10 1万+
一，设置占位图： RequestOptions options = new RequestOptions() .placeholder(R.drawable.img_default)//图片加载出来前，显示的图片 .fallback( R.drawable.img_blank) //url为空的时候,显示的图片 ...
img加载图片失败展示占位图的onerror事件
weixin_45102212的博客
07-19 2632
项目开发经常会遇到图片加载失败，要求在图片加载失败时，显示默认占位图片，经常是图片字段为空或null显示占位图，第一次遇到这样的。这样就解决了一部分加载不出来的图片。目前是可以满足两个标签。......
vue实现图片懒加载的五种方式
weixin_43913643的博客
09-18 5458
推荐使用插件
JS实现图片懒加载以及遇到的坑
Sallywa的博客
01-30 1079
本文参照了博文：http://axuebin.com/blog/2017/08/19/javascript-lazyload/在他的基础上做了一些改动 为什么要图片懒加载 因为一个图片就是一个请求，请求多了，自然浏览器的渲染速度下降，图片懒加载就是解决这个问题的一个方法。还有一个方法是使用雪碧图，可以看我另外一个blog。 所谓的图片懒加载就是一开始就不加载所有的图片，而是当我们滚动到图片...
原生JS实现图片懒加载之页面性能优化
10-17
本文将深入探讨如何使用原生JavaScript实现图片懒加载，以及这种方式如何帮助优化页面性能。 一、图片懒加载原理 1. 数据存储：首先，我们需要为图片`<img>`标签添加一个自定义属性，如`data-src`，用来存储实际的...
js实现图片懒加载效果
10-19
主要为大家详细介绍了js实现图片懒加载效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
图片懒加载文件jquery插件库EasyLazyload
10-11
`jQuery EasyLazyload` 插件库基于广泛使用的jQuery框架开发，它简化了图片懒加载的实现过程，让开发者无需深入了解底层机制就能轻松地在网站上应用。以下是对这个插件库的一些核心知识点的详细解释： 1. **基本...
图片懒加载imgLazyLoading.js使用详解
10-18
《图片懒加载imgLazyLoading.js使用详解》 在现代网页设计中，图片懒加载是一种常见的优化策略，它能够显著提升页面的加载速度和用户体验。本文将深入探讨一种名为imgLazyLoading.js的JavaScript库，该库提供了强大...
echojs+图片懒加载
01-13
Echo 是一个轻量的 JS 图片懒加载插件，不依赖其它库。特别适用于移动端需要加载大量图片的应用。使用方法，查看https://blog.csdn.net/qq_44952391/article/details/122477458?spm=1001.2014.3001.5502
vue图片懒加载
weixin_49554584的博客
01-19 6529
我们使用软件的时候，会有很多图片需要加载，但是当网络环境不好，或内存不足的情况，就会导致用户首屏加载特别慢，影响用户体验，所以为了解决这个问题，提出了图片懒加载的方法来解决该问题。这样做的好处就是可以使用当前网络环境来全力加载该可视区域的图片，增加加载速度；②首屏加载时候img标签src赋为空值，这样就不会去渲染看不见的图片而浪费时间。③当用户滑动到图片的可视区域后，替换src的路径，改为正式路径，则开始渲染图片。①当图片区域到达用户界面可视区域的时候才进行加载图片。
vue中实现图片懒加载的方法（一）
weixin_54145360的博客
11-10 8442
主要思路就是在可视区域内得图片进行加载，反之默认不做图片得请求，可以用我们本地自己定义得比较小得loading图代替（当然这个loading图片也会做网络请求，但是是我们自己定义的，那便可空，选的图会比较小，而且在同一时刻，相同图片只会请求一次），本次实现，源码里没有给默认的loading图片，而是把图片加载之前的样式，以及图片加载失败后的样式交给使用者自己定义。方案1： 传统实现图片懒加载，会去监听滚动条的变化，当图片进入可视区域内，通过监听当前图片以及滚动条位置，判断是否已经进入可视区域。
js-图片懒加载的实现
Skybububu的博客
04-18 824
指当页面加载数据时，只先加载浏览器可视区的图片，而不是直接加载页面中所有图片。只有当鼠标滚轮往下滑，才加载后面的图片。
vue中实现图片的懒加载
jiangjunyuan168的博客
04-19 1万+
1、安装vue-lazyload插件 npm install vue-lazyload --save-dev 2、在main.js中进行引用 import VueLazyload from "vue-lazyload"; Vue.use(VueLazyload); //或者自定义配置插件 Vue.use(VueLazyload, { preLoad: 1.3, error: require('../src/assets/image/error.png'), loading: require('../
JavaScript实现懒加载
weixin_51422386的博客
12-05 3077
项目性能优化
js intersection 图片懒加载
12-09
而使用JS intersection 图片懒加载技术则可以解决这个问题。它的原理是在网页初始化时，并不加载所有图片，而是只加载窗口可见区域内的图片，当用户滚动页面，有图片出现在可见区域时再加载相应的图片。 这项技术的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值