手写图片懒加载js

最新推荐文章于 2024-09-09 09:35:48 发布
最新推荐文章于 2024-09-09 09:35:48 发布
阅读量555 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Liberty_yes/article/details/123094427
版权

图片的按需加载——图片懒加载

按需加载图片，就是让图片默认开始不加载，而且在接近可视区域范围时，再进行加载。也称之为懒惰加载。大家都知道，图片一下子全部都加载，请求的次数将会增加，势必影响性能。

先来看下懒惰加载的实现原理。它的触发动作是：当滚动条拉动到某个位置时，即将进入可视范围的图片需要加载。实现的过程分为下面几个步骤：

生成<img data-src="http://tid.tenpay.com/”url”>标签时，用data-src来保存图片地址；
记录的图片data-src都保存到数组里；
对滚动条进行事件绑定,假设绑定的函数为function lazyload(){};
在函数lazyload中，按照下面思路实现：计算图片的Y坐标，并计算可视区域的高度height，当Y小于等于(height+ scrollTop)时，图片的src的值用data-src的来替换，从而来实现图片的按需加载；
代码实例：

 <!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>图片按需加载</title>
</head>

<body>
    <style>
        li {
            float: left;
            width: 200px;
        }
    </style>
    <div style="widh:100%;height:1200px;border:1px solid #000">这里是空白的内容，高度为900像素，目的是方便出现滚动条</div>
    <ul style="width:600px;">
        <li> <img width="158" height="158" data-src="https://t7.baidu.com/it/u=3406125714,2513313326&fm=193&f=GIF" />
        </li>
        <li> <img width="158" height="158" data-src="https://img2.baidu.com/it/u=1788503664,1043895900&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" /> </li>
        <li> <img width="158" height="158" data-src="https://img0.baidu.com/it/u=3792115810,1999741661&fm=26&fmt=auto" /> </li>
        <li> <img width="158" height="158" data-src="https://img0.baidu.com/it/u=3792115810,1999741661&fm=26&fmt=auto" /> </li>
        <li> <img width="158" height="158" data-src="http://www.mjjq.com/blog/photos/Image/mjjq-photos-903.jpg" /> </li>
        <li> <img width="158" height="158" data-src="http://c.cncnimg.cn/000/954/1416_2_b.jpg" /> </li>
        <li> <img width="158" height="158" data-src="https://img0.baidu.com/it/u=1721391133,702358773&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=625" /> </li>
        <li> <img width="158" height="158" data-src="http://www.mjjq.com/pic/20070530/20070530043314558.jpg" /> </li>
    </ul>
    <script>
        var API = {
            /**
             * 兼容Mozilla(attachEvent)和IE(addEventListener)的on事件
             * @param {String} element DOM对象 例如：window，li等
             * @param {String} type on事件类型，例如：onclick，onscroll等
             * @param {Function} handler 回调事件
             */
            on: function (element, type, handler) {
                return element.addEventListener ? element.addEventListener(type, handler, false) : element
                    .attachEvent('on' + type, handler)
            },
            /**
             * 为对象绑定事件
             * @param {Object} object 对象
             * @param {Function} handler 回调事件
             */
            bind: function (object, handler) {
                return function () {
                    return handler.apply(object, arguments)
                }
            },
            /**
             * 元素在页面中X轴的位置
             * @param {String} element DOM对象 例如：window，li等
             */
            pageX: function (El) {
                var left = 0;
                do {
                    left += El.offsetLeft;

                } while (El.offsetParent && (El = El.offsetParent).nodeName.toUpperCase() != 'BODY');
                return left;

            },
            /**
             * 元素在页面中Y轴的位置
             * @param {String} element DOM对象 例如：window，li等
             */
            pageY: function (El) {
                var top = 0;
                do {
                    top += El.offsetTop;

                } while (El.offsetParent && (El = El.offsetParent).nodeName.toUpperCase() != 'BODY');
                return top;

            },
            /**
             * 判断图片是否已加载
             * @param {String} element DOM对象 例如：window，li等
             * @param {String} className 样式名称
             * @return {Boolean} 布尔值
             */
            hasClass: function (element, className) {
                return new RegExp('(^|\\s)' + className + '(\\s|$)').test(element.className)
            },
            /**
             * 获取或者设置当前元素的属性值
             * @param {String} element DOM对象 例如：window，li等
             * @param {String} attr 属性
             * @param {String} (value) 属性的值，此参数如果没有那么就是获取属性值，此参数如果存在那么就是设置属性值
             */
            attr: function (element, attr, value) {
                if (arguments.length == 2) {
                    return element.attributes[attr] ? element.attributes[attr].nodeValue : undefined
                } else if (arguments.length == 3) {
                    element.setAttribute(attr, value)
                }
            }
        };

        /**
         * 按需加载
         * @param {String} obj 图片区域元素ID
         */
        function lazyload(obj) {
            this.lazy = typeof obj === 'string' ? document.getElementById(obj) : document.getElementsByTagName('body')[
                0];
            this.aImg = this.lazy.getElementsByTagName('img');
            this.fnLoad = API.bind(this, this.load);
            this.load();
            API.on(window, 'scroll', this.fnLoad);
            API.on(window, 'resize', this.fnLoad);

        }
        lazyload.prototype = {

            /**
             * 执行按需加载图片，并将已加载的图片标记为已加载
             * @return 无
             */
            load: function () {
                var iScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                // 屏幕上边缘
                var iClientHeight = document.documentElement.clientHeight + iScrollTop;
                // 屏幕下边缘
                var i = 0;
                var aParent = [];
                var oParent = null;
                var iTop = 0;
                var iBottom = 0;
                var aNotLoaded = this.loaded(0);
                if (this.loaded(1).length != this.aImg.length) {
                    var notLoadedLen = aNotLoaded.length;
                    for (i = 0; i < notLoadedLen; i++) {
                        iTop = API.pageY(aNotLoaded[i]) - 200;
                        iBottom = API.pageY(aNotLoaded[i]) + aNotLoaded[i].offsetHeight + 200;
                        var isTopArea = (iTop > iScrollTop && iTop < iClientHeight) ? true : false;
                        var isBottomArea = (iBottom > iScrollTop && iBottom < iClientHeight) ? true : false;
                        if (isTopArea || isBottomArea) {
                            // 把预存在自定义属性中的真实图片地址赋给src
                            aNotLoaded[i].src = API.attr(aNotLoaded[i], 'data-src') || aNotLoaded[i].src;
                            if (!API.hasClass(aNotLoaded[i], 'loaded')) {
                                if ('' != aNotLoaded[i].className) {
                                    aNotLoaded[i].className = aNotLoaded[i].className.concat(" loaded");

                                } else {
                                    aNotLoaded[i].className = 'loaded';

                                }
                            }
                        }
                    }
                }
            },

            /**
             * 已加载或者未加载的图片数组
             * @param {Number} status 图片是否已加载的状态，0代表未加载，1代表已加载
             * @return Array 返回已加载或者未加载的图片数组
             */
            loaded: function (status) {
                var array = [];
                var i = 0;
                for (i = 0; i < this.aImg.length; i++) {
                    var hasClass = API.hasClass(this.aImg[i], 'loaded');
                    if (!status) {
                        if (!hasClass)
                            array.push(this.aImg[i])
                    }
                    if (status) {
                        if (hasClass)
                            array.push(this.aImg[i])
                    }
                }
                return array;
            }
        };
        // 按需加载初始化
        API.on(window, 'load', function () {
            new lazyload()
        });
    </script>
</body>

</html>

参考文章：https://www.cnblogs.com/mamimi/p/7646358.html

Liberty_yes
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
网页手写签名生成图片
10-11
网页手写签名生成图片是一种常见的交互式功能，尤其在电子商务和法律文档签署中，它允许用户在网页上通过鼠标或其他输入设备模拟手写签名，并将其转换为图像进行保存或集成到文档中。这个Java实现的技术栈主要涉及...
前端手写(二十二)——手写图片懒加载
weixin_47450807的博客
04-01 585
一、写在前面 图片懒加载是我们在开发中，需要进行处理的问题，也是前端性能优化的一个重要的因素。 二、手写懒加载 <script> function lazyload() { const imgs = document.querySelectorAll('img') const len = imgs.length const viewHeight = document.documentElement.clientHeight cons
图片懒加载（纯手写）
朝阳39的博客
08-10 342
默认情况下不加载图片，直到滚动页面，图片进入浏览器窗口的可视区域，才加载图片！
JavaScript手写专题——图片懒加载、滚动节流、防抖手写
涵盖了计算机专业基础知识、数学建模相关实践、复杂网络论文研究、LeetCode算法刷题经验、C语言开发经验、前端Vue、React框架开发实战相关知识
05-09 1001
在一些图片量比较大的网站（比如电商网站首页，或者团购网站、小游戏首页等），如果我们尝试在用户打开页面的时候，就把所有的图片资源加载完毕，那么很可能会造成白屏、卡顿等现象，因为图片真的太多了，一口气处理这么多任务，浏览器做不到啊！我们再想，用户真的需要这么多图片吗？不对，用户点开页面的瞬间，呈现给他的只有屏幕的一部分（我们称之为首屏）。只要我们可以在页面打开的时候把首屏的图片资源加载出来，用户就会认为页面是没问题的。至于下面的图片，我们完全可以等用户下拉的瞬间再即时去请求、即时呈现给他。
手写个图片懒加载和事件的节流与防抖
飞翔的熊blabla
07-11 321
转自于:https://ah.yxlblog.com/index/article/145.html 前记 在一些图片量比较大的网站（比如电商网站首页，或者团购网站、小游戏首页等），如果我们尝试在用户打开页面的时候，就把所有的图片资源加载完毕，那么很可能会造成白屏、卡顿等现象。但是打开页面的瞬间，呈现给用户的只有屏幕的一部分（我们称之为首屏）。只要我们可以在页面打开的时候把首屏的图片资源加载出来就可以了。 /* * 分析 * 1、 获取视口的高度 * 2、图片距离可视窗口的顶部距离 *.
通过js实现图片懒加载的原理及代码
m0_72742557的博客
11-14 1500
所谓图片懒加载，就是想让页面在展示图片的时候，不一下子全部开始加载，而是等到屏幕快滑到该图片的时候，再开始加载，这样做的好处，提高网页加载效率，节省用户流量
手写代码实现图片的懒加载
cyjbdqn的博客
09-29 922
介绍 无论在PC端的网页中还是在移动端的网页中，都经常要用到图片资源，很多时候一张图片的大小甚至比一个插件库还要大，这就会造成页面加载缓慢，同时需要消耗较大的流量，而往往页面中不止一张图片，正常情况下，浏览器会从上到下解析并加载图片资源。这时候即使用户不向下滚动页面，那些你还没看到的图片其实也已经被加载了，相当于白白浪费了流量。 因此我们希望图片可以按需加载，也就是说当我将页面滚动到有图...
js代码-手写代码练习----懒加载
07-16
在JavaScript的世界里，"懒加载"（Lazy Loading）是一种优化网页性能的重要技术。它主要应用于图片、视频、脚本等资源的加载，旨在提高页面的加载速度，改善用户体验。当用户滚动页面或触发特定事件时，懒加载才开始...
支持异步加载的纯手写的js树
03-27
本人手写的一款js树形控件，附带图片，代码简洁，注释齐全，可读性高，易于维护，方便移植，结构清晰，思路明了，界面美观，同时支持异步加载，对浏览器的兼容行强，你还可以根据自己的需要扩展功能，可大量应用于...
手写笔加载器：用于webpack的手写笔加载器
03-04
用于Webpack的手写笔加载器。 将Styl编译为CSS。 入门 首先，您需要安装stylus和stylus-loader ： $ npm install stylus stylus-loader --save-dev 然后将加载程序添加到您的webpack配置中。 例如： webpack....
vue自定义图片懒加载指令
09-27
vue中封装自定义指令，该指令主要功能是到达指定区域加载图片，若已加载过就不再加载
JS实现图片懒加载(lazyload)过程详解
10-15
主要介绍了JS实现图片懒加载(lazyload)过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
听说你还在手写懒加载?
weixin_33868027的博客
04-22 228
过去, 我们对含有大量图片的网站进行优化无外乎要依靠JS逻辑或是相关插件来完成, 比如懒加载技术. 而现在(至少在不久的将来), Chrome 75版本将增加原生懒加载功能. 直接开始使用 当然, 你也可以现在就开始体验这一功能, 在浏览器的标签栏输入browser://flags/#enable-lazy-image-loading并进入页面, 找到enable-lazy-image-load...
图片懒加载
weixin_44915595的博客
01-04 259
<script> const imgs=document.querySelectorAll('img'); window.addEventListener('scroll',(e)=>{ imgs.forEach(img=>{ const imgTop=img.getBoundingClientRect().top; if(imgTop<window.innerHeight){
面试官刁难系列一：手写图片懒加载代码
Smell_rookie的博客
08-26 446
前言 今天是跟面试官开撕的第一天，当你过五关斩六将终于来到面试官面前时，他可能在面试你之前写过如下的代码: <el-image :src="url" lazy></el-image> 没错，就是这么轻描淡写的一句代码，他心里却有了不一样的想法。lazy 这个属性它是如何实现图片懒加载的？请说说你的思路。 头脑顿时一场空。"只怪我平时只复制粘贴写业务代码了，草率了！"你可能此时是这样想的。幸运的是，今天是开撕的一天，今天就甩出你自信的代码给面试官。 element-plus实现思路
关于图片懒加载的几种方案
LuckyWinty的博客
12-12 311
懒加载，顾名思义，在当前网页，滑动页面到能看到图片的时候再加载图片故问题拆分成两个：如何判断图片出现在了当前视口 （即如何判断我们能够看到图片）如何控制图片的加载方案一 如何判断图片出现...
手写图片懒加载-------IntersectionObserver------JavaScript和React
留着鼻涕敲代码
12-10 494
实现思路： 利用浏览器提供的 IntersectionObserver，监听图片元素是否进入可视区域，进入后才真正去设置图片元素的 src 属性进行图片加载。 1. IntersectionObserver的基本使用 详细请看阮一峰IntersectionObserver API 使用教程 作用：监听图片元素是否进入可视区域，进入后才真正去设置图片元素的 src 属性进行图片加载。 格式： var dom = dom元素 // 实例化一个观察者 // 它的参数1是一个回调：当被观察的目标进入视口/离开视
软件著作权申请教程（超详细）（2024新版）软著申请
最新发布
m0_75269526的博客
09-09 1992
软件著作权，软著，软著申请，软用户使用手册：提交登记软件的任何一种文档的连续的前30页和连续的后30页，每页不少于30行。如果是多人合作开发著作权人不是一个人的话，还需要准备一份合作开发协议。首先我们需要在官网里面注册一个账号，并且完成实名认证，一般是注册【个人】的身份。合作开发协议书：这个如果是著作权人有多个（多个人一起开发）就需要提供这个材料。在填报完成之后需要打印一个签章页签字（如果不是个人需要盖章）注册完成后点击下面进行登记，如果没有实名需要先实名认证（源代码：源程序前连续的30页和后连续的30页。
Vue.js实现加载动画详解
"Vue.js项目实现手写加载动画，通过CSS伪类和动画技术，创建一个友好的用户体验，避免页面加载时的白屏现象。加载动画的核心是利用一个设定宽高并具有圆角的正方形，通过透明边框和伪类元素的定位，配合不同的动画...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值