图片预加载之延迟加载2-懒加载

最新推荐文章于 2024-02-26 17:15:08 发布
最新推荐文章于 2024-02-26 17:15:08 发布
阅读量502 收藏
点赞数 1
分类专栏： javascript 文章标签： 图片懒加载 按需加载
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/original_heart/article/details/70880951
版权

      上一篇文章中以相册为例，介绍了图片预加载的预先加载。这次将对图片预加载的延迟加载（或者说是按需加载）进行相关介绍。
图片img标签还放在页面上，但并不给它赋值src，当用户看的时候再加载。为此，我们要解决两个问题：
      一、如何知道用户要看哪些图片（也就是对进入到可视区域的图片进行加载）
      二、当图片进入可视区域内，用户要看的图片src存放在那里
下面用代码进行说明：

html部分如下：

<ul id="ul1">
    <li>
        <img _src="img/1.jpg" src="img/white.JPG"/>
    </li>
    <li>
        <img _src="img/2.jpg" src="img/white.JPG"/>
    </li>
    <li>
        <img _src="img/3.jpg" src="img/white.JPG"/>
    </li>
    <li>
        <img _src="img/4.jpg" src="img/white.JPG"/>
    </li>
    <li>
        <img _src="img/5.jpg" src="img/white.JPG"/>
    </li>
    <li>
        <img _src="img/6.jpg" src="img/white.JPG"/>
    </li>
    <li>
        <img _src="img/7.jpg" src="img/white.JPG"/>
    </li>
    <li>
        <img _src="img/8.jpg" src="img/white.JPG"/>
    </li>
    <li>
        <img _src="img/1.jpg" src="img/white.JPG"/>
    </li>
    <li>
        <img _src="img/2.jpg" src="img/white.JPG"/>
    </li>
    <li>
        <img _src="img/3.jpg" src="img/white.JPG"/>
    </li>
    <li>
        <img _src="img/4.jpg" src="img/white.JPG"/>
    </li>
    <li>
        <img _src="img/5.jpg" src="img/white.JPG"/>
    </li>
    <li>
        <img _src="img/6.jpg" src="img/white.JPG"/>
    </li>
    <li>
        <img _src="img/7.jpg" src="img/white.JPG"/>
    </li>
    <li>
        <img _src="img/8.jpg" src="img/white.JPG"/>
    </li>
    <li>
        <img _src="img/1.jpg" src="img/white.JPG"/>
    </li>
    <li>
        <img _src="img/2.jpg" src="img/white.JPG"/>
    </li>
    <li>
        <img _src="img/3.jpg" src="img/white.JPG"/>
    </li>
    <li>
        <img _src="img/4.jpg" src="img/white.JPG"/>
    </li>
    <li>
        <img _src="img/5.jpg" src="img/white.JPG"/>
    </li>
    <li>
        <img _src="img/6.jpg" src="img/white.JPG"/>
    </li>
    <li>
        <img _src="img/7.jpg" src="img/white.JPG"/>
    </li>
    <li>
        <img _src="img/8.jpg" src="img/white.JPG"/>
    </li>
    <li>
        <img _src="img/1.jpg" src="img/white.JPG"/>
    </li>
    <li>
        <img _src="img/2.jpg" src="img/white.JPG"/>
    </li>
    <li>
        <img _src="img/3.jpg" src="img/white.JPG"/>
    </li>
    <li>
        <img _src="img/4.jpg" src="img/white.JPG"/>
    </li>
    <li>
        <img _src="img/5.jpg" src="img/white.JPG"/>
    </li>
    <li>
        <img _src="img/6.jpg" src="img/white.JPG"/>
    </li>
    <li>
        <img _src="img/7.jpg" src="img/white.JPG"/>
    </li>
    <li>
        <img _src="img/8.jpg" src="img/white.JPG"/>
    </li>
    <li>
        <img _src="img/1.jpg" src="img/white.JPG"/>
    </li>
    <li>
        <img _src="img/2.jpg" src="img/white.JPG"/>
    </li>
    <li>
        <img _src="img/3.jpg" src="img/white.JPG"/>
    </li>
    <li>
        <img _src="img/4.jpg" src="img/white.JPG"/>
    </li>
    <li>
        <img _src="img/5.jpg" src="img/white.JPG"/>
    </li>
    <li>
        <img _src="img/6.jpg" src="img/white.JPG"/>
    </li>
    <li>
        <img _src="img/7.jpg" src="img/white.JPG"/>
    </li>
    <li>
        <img _src="img/8.jpg" src="img/white.JPG"/>
    </li>
    <li>
        <img _src="img/1.jpg" src="img/white.JPG"/>
    </li>
    <li>
        <img _src="img/2.jpg" src="img/white.JPG"/>
    </li>
    <li>
        <img _src="img/3.jpg" src="img/white.JPG"/>
    </li>
    <li>
        <img _src="img/4.jpg" src="img/white.JPG"/>
    </li>
    <li>
        <img _src="img/5.jpg" src="img/white.JPG"/>
    </li>
    <li>
        <img _src="img/6.jpg" src="img/white.JPG"/>
    </li>
    <li>
        <img _src="img/7.jpg" src="img/white.JPG"/>
    </li>
    <li>
        <img _src="img/8.jpg" src="img/white.JPG"/>
    </li>
</ul>

      这里给所有图片一个默认的图片地址src=”img/white.JPG”（一个白色的图片）是为了解决下图片没有src出现的显示问题，如下图
这里写图片描述

css部分如下：

*{margin:0;padding:0;}
#ul1{margin:100px auto 0;}
li{float:left;margin:0 0 10px 10px;list-style:none;border:1px solid #000;}
img{width:300px;height:200px;display:block;}

js部分如下：

      当图片到顶部的距离小于滚动距离+可视区域的高，则表示图片在可视区域内，则可视区域内的图片应该加载。如果图片到顶部的距离大于滚动距离+可视区域的高，图片不在可视区域内，不应该加载。

这里写图片描述

window.onload = function(){
    var oUl = document.getElementById("ul1");
    var aImg = oUl.getElementsByTagName('img');
    showImage();

    window.onscroll = showImage;

    // 需要展示加载的图片
    //isLoad标记表示可视区域内图片是否重复加载过，如果加载过则不再加载
    function showImage(){
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        for(var i = 0; i < aImg.length; i++){
            //当图片到顶部的距离小于滚动距离+可视区域的高，则表示图片在可视区域内
        if(!aImg[i].isLoad && getTop(aImg[i]) < scrollTop    + document.documentElement.clientHeight){
                // console.log(i);
                aImg[i].src = aImg[i].getAttribute('_src');

                // 图片是否已经加载过的标记，如果已经加载过则设为true
                aImg[i].isLoad = true;
            }
        }
    }

    // 获取绝对距离-距离顶部
    function getTop(obj){
        var iTop = 0;
        while(obj){
            iTop += obj.offsetTop;
            obj = obj.offsetParent;
        }
        return iTop;
    }
}

这样我们就利用图片的自定义属性（_src）实现了图片的懒加载，另外一种实现方式方式是把图片的地址预先存到一个数组中。然后循环数组，数组里有多少个图片url，就代表还有多少个图片没有加载完。每加载完这个图片，就把图片路径从数组里删除，当全部加载完之后，数组长度为零，循环结束，这样相比较上面性能更优。

html部分如下：

<ul id="ul1">
    <li>
        <img  src="img/white.JPG"/>
    </li>
    <li>
        <img  src="img/white.JPG"/>
    </li>
    <li>
        <img  src="img/white.JPG"/>
    </li>
    <li>
        <img  src="img/white.JPG"/>
    </li>
    <li>
        <img  src="img/white.JPG"/>
    </li>
    <li>
        <img  src="img/white.JPG"/>
    </li>
    <li>
        <img  src="img/white.JPG"/>
    </li>
    <li>
        <img  src="img/white.JPG"/>
    </li>
    <li>
        <img  src="img/white.JPG"/>
    </li>
    <li>
        <img  src="img/white.JPG"/>
    </li>
    <li>
        <img  src="img/white.JPG"/>
    </li>
    <li>
        <img  src="img/white.JPG"/>
    </li>
    <li>
        <img  src="img/white.JPG"/>
    </li>
    <li>
        <img  src="img/white.JPG"/>
    </li>
    <li>
        <img  src="img/white.JPG"/>
    </li>
    <li>
        <img  src="img/white.JPG"/>
    </li>
    <li>
        <img  src="img/white.JPG"/>
    </li>
    <li>
        <img  src="img/white.JPG"/>
    </li>
    <li>
        <img  src="img/white.JPG"/>
    </li>
    <li>
        <img  src="img/white.JPG"/>
    </li>
    <li>
        <img  src="img/white.JPG"/>
    </li>
    <li>
        <img  src="img/white.JPG"/>
    </li>
    <li>
        <img  src="img/white.JPG"/>
    </li>
    <li>
        <img  src="img/white.JPG"/>
    </li>
    <li>
        <img  src="img/white.JPG"/>
    </li>
    <li>
        <img  src="img/white.JPG"/>
    </li>
    <li>
        <img  src="img/white.JPG"/>
    </li>
    <li>
        <img  src="img/white.JPG"/>
    </li>
    <li>
        <img  src="img/white.JPG"/>
    </li>
    <li>
        <img  src="img/white.JPG"/>
    </li>
    <li>
        <img  src="img/white.JPG"/>
    </li>
    <li>
        <img  src="img/white.JPG"/>
    </li>
    <li>
        <img  src="img/white.JPG"/>
    </li>
    <li>
        <img  src="img/white.JPG"/>
    </li>
    <li>
        <img  src="img/white.JPG"/>
    </li>
    <li>
        <img  src="img/white.JPG"/>
    </li>
    <li>
        <img  src="img/white.JPG"/>
    </li>
    <li>
        <img  src="img/white.JPG"/>
    </li>
    <li>
        <img  src="img/white.JPG"/>
    </li>
    <li>
        <img  src="img/white.JPG"/>
    </li>
    <li>
        <img  src="img/white.JPG"/>
    </li>
    <li>
        <img  src="img/white.JPG"/>
    </li>
    <li>
        <img  src="img/white.JPG"/>
    </li>
    <li>
        <img  src="img/white.JPG"/>
    </li>
    <li>
        <img  src="img/white.JPG"/>
    </li>
    <li>
        <img  src="img/white.JPG"/>
    </li>
    <li>
        <img  src="img/white.JPG"/>
    </li>
    <li>
        <img  src="img/white.JPG"/>
    </li>
</ul>

html部分如下：

window.onload = function(){
    var oUl = document.getElementById("ul1");
    var aImg = oUl.getElementsByTagName('img');

    // 存放图片url的数组
    var imgUrlArr = [
        'img/1.jpg',
        'img/2.jpg',
        'img/3.jpg',
        'img/4.jpg',
        'img/5.jpg',
        'img/6.jpg',
        'img/7.jpg',
        'img/8.jpg',
        'img/1.jpg',
        'img/2.jpg',
        'img/3.jpg',
        'img/4.jpg',
        'img/5.jpg',
        'img/6.jpg',
        'img/7.jpg',
        'img/8.jpg',
        'img/1.jpg',
        'img/2.jpg',
        'img/3.jpg',
        'img/4.jpg',
        'img/5.jpg',
        'img/6.jpg',
        'img/7.jpg',
        'img/8.jpg',
        'img/1.jpg',
        'img/2.jpg',
        'img/3.jpg',
        'img/4.jpg',
        'img/5.jpg',
        'img/6.jpg',
        'img/7.jpg',
        'img/8.jpg',
        'img/1.jpg',
        'img/2.jpg',
        'img/3.jpg',
        'img/4.jpg',
        'img/5.jpg',
        'img/6.jpg',
        'img/7.jpg',
        'img/8.jpg',
        'img/1.jpg',
        'img/2.jpg',
        'img/3.jpg',
        'img/4.jpg',
        'img/5.jpg',
        'img/6.jpg',
        'img/7.jpg',
        'img/8.jpg',
        'img/1.jpg',
        'img/2.jpg',
        'img/3.jpg',
        'img/4.jpg',
        'img/5.jpg',
        'img/6.jpg',
        'img/7.jpg',
        'img/8.jpg',
        'img/1.jpg',
        'img/2.jpg',
        'img/3.jpg',
        'img/4.jpg',
        'img/5.jpg',
        'img/6.jpg',
        'img/7.jpg',
        'img/8.jpg',
        'img/1.jpg',
        'img/2.jpg',
        'img/3.jpg',
        'img/4.jpg',
        'img/5.jpg',
        'img/6.jpg',
        'img/7.jpg',
        'img/8.jpg',
        'img/1.jpg',
        'img/2.jpg',
        'img/3.jpg',
        'img/4.jpg',
        'img/5.jpg',
        'img/6.jpg',
        'img/7.jpg',
        'img/8.jpg'
    ];

    showImage();

    window.onscroll = showImage;



    // 需要展示加载的图片
    function showImage(){
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        for(var i = 0; i < aImg.length; i++){
            if(!aImg[i].isLoad && getTop(aImg[i]) < scrollTop + document.documentElement.clientHeight){
                // console.log(i);
                if(imgUrlArr){
                    aImg[i].src = imgUrlArr[0];
                    // 当加载过之后就删掉这个图片地址，下次不再循环
                    imgUrlArr.shift();
                }
                // 图片是否已经加载过的标记，如果已经加载过则设为true
                aImg[i].isLoad = true;
            }
        }
    }

    // 获取绝对距离-距离顶部
    function getTop(obj){
        var iTop = 0;
        while(obj){
            iTop += obj.offsetTop;
            obj = obj.offsetParent;
        }
        return iTop;
    }
}
o_heart
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html页面图片延迟加载,实现图片懒加载的几种方法
weixin_36386044的博客
06-03 2526
懒加载就是延时加载，即当对象需要用到的时候再去加载。本文就来为大家介绍几种实现图片懒加载的方法，希望对大家有一定的帮助。懒加载，顾名思义，在当前网页，滑动页面到能看到图片的时候再加载图片故问题拆分成两个：如何判断图片出现在了当前视口 (即如何判断我们能够看到图片)如何控制图片的加载方案一如何判断图片出现在了当前视口clientTop，offsetTop，clientHeight 以及 scroll...
前端优化：图片延迟加载（适合首屏以外的内容）
dky89616的博客
06-07 246
原理：先用一张极小的图片来代替，等到内容加载完了，再向服务器请求真正的图片并替换，可以有效的减少等待时间。 实现: <img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="a.jpg"> function loadImage(){ var def...
图片延迟加载、预加载
u013400314的博客
08-04 640
1、图片延迟加载 loading 属性 定义：延迟加载也称为惰性加载，即在长网页中延迟加载图像。用户滚动到它们之前，视口外的图像不会加载。这与图像预加载相反，在长网页上使用延迟加载将使网页加载更快。在某些情况下，它还可以帮助减少服务器负载。 举个例子来说明，当打开淘宝首页的时候，只有在浏览器窗口里的图片才会被加载，当你滚动首页向下滑的时候，进入视口内的图片才会被加载，而其它从未进入视口的图像不会也不会加载。那么延迟加载有什么好处：首先它能提升用户的体验，试想一下，如果打开页面的时候就将页面上所有的图片全部获
图片加载缓慢的原因及解决办法
最新发布
正在解锁骑着骆驼去南极的世界
02-26 3171
优化图片大小、压缩和优化图片、优化服务器性能、分批加载图片、懒加载、考虑用户网络环境等都是提高页面加载速度的有效方法。
延迟加载(Lazyload)三种实现方式
weixin_33862188的博客
03-01 1217
2019独角兽企业重金招聘Python工程师标准>>> ...
微信小程序-图片预加载组件
06-12
同时，为了性能优化，我们可以考虑使用懒加载策略，只在图片进入可视区域时开始预加载，避免无谓的资源浪费。 总结来说，微信小程序的图片预加载组件是提升用户体验的重要手段，它通过合理管理和调度图片资源的加载...
jQuery图片预加载代码
04-09
ydxLazyLoad是一个基于jQuery的延迟加载插件，它实现了图片的懒加载效果。当图片位于视口之外时，不会立即加载图片，而是在用户滚动到图片所在位置时才开始加载。这不仅提高了页面加载速度，还能节省用户流量。 ###...
CSS 实现网页图片的预加载
09-25
在网页设计中，图片预加载是一项重要的优化技术，它的目的是在用户访问页面时提前加载一些即将需要的图片，以减少用户等待时间，提高用户体验。预加载尤其适用于包含大量图片或图片密集型的网页，例如画廊、产品展示...
浅析js预加载/延迟加载
01-19
Pre loader 预加载一般有两种常用方式：xhr和动态插入节点的方式。动态插入节点是最为简单也最为广泛的一种异步加载方式，然后使用动态插入节点方法加载的文件都会 在加载后立即执行，javascript的执行一方面会占用...
5种延迟加载图像的方法以帮助你提升网站性能与用户体验
web前端开发
05-27 800
英文 |https://www.sitepoint.com/five-techniques-lazy-load-images-website-performance/翻译 | web前...
html5延迟加载效果,网站性能延迟加载图像的五种技巧(小结)
weixin_34803738的博客
06-05 785
由于图片是web上最流行的内容类型之一，因此网站的页面加载时间很容易成为一个问题。即使经过适当的优化，图像也会有相当大的重量。这可能会对访问者在访问网站内容之前等待的时间产生负面影响。很有可能，它们会失去耐心，转向其他地方，除非你能想出一个不影响速度感知的图像加载解决方案。在本文中，您将学习有关延迟加载图像的五种方法，您可以将这些方法添加到web优化工具包中，以改进站点上的用户体验。什么是延迟加载...
懒加载和预加载
断肠人在刷牙〃的博客
09-08 315
懒加载 什么是懒加载？ 懒加载也就是延迟加载。 当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次，俗称占位图），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。 为什么要使用懒加载？ 很多页面，内容很丰富，页面很长，图片较多。比如说各种商城页面。这些页面图片数量多，而且比较大，少说百来K，多则上兆。要是页面载入就一次性加载完毕。估计大家都会等到黄花变成黄花菜了。 懒加载的原
MUI 图片懒加载的源码分析
XiaoQ的博客
12-25 4167
今天学习了MUI框架中的图片懒加载的使用，第一次使用比较好奇，然后就想翻出源码来研究研究，下面先上源码： huibase.lazyLoadNow = function(className){ if(!className){className = 'HUI_Lazy';} var winInfo = hui.winInfo(), imgs = new Array(), lazyObj = h
前端性能优化之 —— 图片延迟加载 (原理以及实现方式)
菜鸟笔记
02-06 9758
前端开发的时候，有些列表页面可能会有很多图片需要加载。一次加载太多图片，会占用很大的带宽，影响网页的加载速度。 这时候我们想到一种方式，让用户浏览到什么地方，就加载该处的图片。 这里写了一个简单的例子，大家可以去体验一下，当然这里考虑到的是最简单的情况。 这里简单的讲解一下这个例子里面的源码。 例子查看 DOM 结构 由一个父容器div#lazy-img，里面是图片标签，父容器是可以滚动
多图片网页实现延迟加载图片
sonnylight的博客
08-09 3771
多图片页面的延迟加载 *{ padding:0; margin:0; } img{ width: 300px; height: 200px; display: block; } //原生JS方法 var test={};
offsetLeft,offsetTop,offsetParent详解
09-24 2036
1.offsetLeft/offsetTop 在页面任一元素的offsetLeft总是找到离其最近的已经定位的元素定位，如果没有，就根据根节点body定位，然后获取其left值 css: #div2{width:400px;height:400px;background:#0f0;margin-left:10px} #div3{width:300px
css预加载
seven_an的博客
07-01 4084
1、预备素材： 2、html元素： 请稍侯.. --> 3、css样式： .mask-loading { width: 100%; min-height: 100%; text-align: center; top: 0; bottom: 0; position: fixed; opacity: 0.8;
#layui：模块加载、全局配置、定义模块、动态加载CSS、本地存储、获取浏览器信息、其他 @FDDLC
LiuXingchang的博客
04-05 5149
一、模块加载 1、指定加载模块(手动加载)： 2、全模块加载(自动加载) 附： 加载所需模块 方法：layui.use([mods], callback) layui 的内置模块并非默认就加载的，他必须在你执行该方法后才会加载。它的参数跟上述的 define 方法完全一样。 另外请注意，mods 里面必须是一个合法的模块名，不能包含目录。如果需要加载目录，建议采用 extend 建立别名（详见模块规范） layui.use(['laypage', 'layedit'], fun.
图片延迟加载
每天都要努力学习哦~~
01-25 3363
前言 图片延迟加载:真实项目中非常重要的一个性能优化手段; 在没有加载图片之前,图片区域用默认的背景图(背景色)占位即可 首屏:先加载首屏的其他数据(内容,样式,文本等),等待其它数据加载完成,再去加载真实的图片 其他屏:当我们滚动到指定区域(一露面,出来一半,完全出现在屏幕中),在去加载真实图片 //在浏览器滚动条滚动(页面滚动)过程中,等待图片完全出现在可视窗口内的时候,我们加载真实图片 "这是非首屏图片的处理步骤"-->计算出盒子底边距离body(a)的距离 和 浏览器底边距离bo.
百度APP预加载技术实现与优化分析
“预加载技术在百度APP的应用.pdf”主要探讨了预加载技术在百度APP中的实际运用，由百度APP产品研发部的T7内核技术负责人杨刚分享，涉及浏览内核、移动应用开发、应用稳定性及跨端技术等多个技术方向。 预加载技术...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值