这两天在学习图片的懒加载实现,看了很多大佬的博客,终于有了点成果。现在用了其中一位大佬的文章中的代码实现了图片懒加载并且在其基础上加入了节流函数。

原理就不多讲了,有需要的可以去大佬的文章看看。大佬文章可以从这里进->(https://www.jianshu.com/p/9b30b03f56c2)。

先上HTML结构:

     <div></div>
     <img src="" id="i1" data-src="data:image1">
     <div></div>
     <img src="" id="i2" alt="" data-src="data:image2">

然后是样式:

 <style>
         * {
 ;
 ;
         }

         div {
             height: 2000px;
         }

         #i1 {
             display: block;
             width: 200px;
             height: 200px;
             background-color: red;
         }

         #i2 {
             display: block;
             width: 200px;
             height: 200px;
             background-color: green;
         }
     </style>

最后是JavaScript的代码:

 <script>
         var lastTime = new Date().getTime();
         function lazyLoad() {
             //放入节流函数前的准备工作
             function preWork() {
                 //获取页面图片标签
                 var imgs = document.querySelectorAll("img");
                 //可视区高度
                 var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

                 imgs.forEach(function (img) {
                     //判断data-src属性是否存在,不存在代表图片已经加载过
                     if (!img.getAttribute('data-src')) {
                         return;
                     }
                     //判断高度差,替换路径后移除data-src属性
                     if (img.getBoundingClientRect().top < h) {
                         img.src = img.getAttribute('data-src');
                         img.removeAttribute('data-src');
                     }
                 });

                 //利用与运算,如果与前面为false,则不运行后面的语句;若为true,继续运行后面的语句。从而达到路径替换完后可以执行移除监听事件的效果
                 [].every.call(imgs, function (img) {
                     return !img.getAttribute('data-src');
                 }) && (window.removeEventListener("scroll", lazyLoad));
             }

             //节流函数
             function throttle() {
                 var nowTime = new Date().getTime();
                 if (nowTime - lastTime > 1000) {
                     preWork();
                     console.log("节流执行");
                     lastTime = nowTime;
                 }

             }

             //执行节流函数
             throttle();
         }

         window.addEventListener("scroll", lazyLoad);
         window.addEventListener("load", lazyLoad);

     </script>

js的代码里面加了一些注释,希望能帮助大家理解。

本人是前端小菜鸟一枚,代码里如果出现错误希望大家多多包涵并在评论区提出,本人会认真改正的!

原生js实现图片懒加载+加入节流的更多相关文章

  1. 页面性能优化-原生JS实现图片懒加载

    在项目开发中,我们往往会遇到一个页面需要加载很多图片的情况.我们可以一次性加载全部的图片,但是考虑到用户有可能只浏览部分图片.所以我们需要对图片加载进行优化,只加载浏览器窗口内的图片,当用户滚动时,再 ...

  2. 2.原生js实现图片懒加载

    网上查了很多图片懒加载的内容, 但基本上都是jQuery实现的, 没有说清楚其原理, 所以研究了一下 多的不说, 上代码, 看不明白的建议看下我的上一篇文章<1. 图解浏览器和用户设备的宽高等属 ...

  3. js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用

    js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用 一.总结 一句话总结:图片懒加载echo.js结合 Amaze UI ScrollSpy 使用的效果就是:懒加载 ...

  4. js插件---图片懒加载lazyload

    js插件---图片懒加载lazyload 一.总结 一句话总结:使用异常简单,src里面放加载的图片,data-original里面放原图片,不懂的位置去官网或者github找API就好. 1.laz ...

  5. JS实现图片懒加载插件

    一.前言 我在前几篇博客的记录中,有说自己在做一个图片懒加载的功能,然后巴拉巴拉的遇到哪些问题,结果做完了也没对懒加载这个功能做一些记录,所以这篇文章主要针对我所实现的思路,以及代码做个记录,实现不佳 ...

  6. js, javascript 图片懒加载 实例代码

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. js实现图片懒加载

    大型购物网站都会采用图片懒加载技术来优化网站首页打开速度,以提高用户体验,那么具体是怎么实现的呢,我们一探究竟. html结构(div包裹一层用来显示背景图片,等待图片加载完成后,显示真实图片) &l ...

  8. Js 之图片懒加载插件

    一.PC端(lazyload) 1.引入js文件 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.m ...

  9. js实现图片懒加载原理

    原理 图片懒加载是前端页面优化的一种方式,在页面中有很多图片的时候,图片加载就需要很多时间,很耗费服务器性能,不仅影响渲染速度还会浪费带宽,为了解决这个问题,提高用户体验,所以就出现了懒加载这种方式来 ...

随机推荐

  1. Cisco packet tracer下dhcp的配置的vlan的应用

    话不多说,先上拓扑图. pc0和pc1分别接在三层交换机的F0/1.F0/2接口,ser接在F0/24接口,用ser用作dhcp的服务器. 0x01:配置server0 先配置server的IP地址. ...

  2. POJ 3183:Stump Removal(模拟)

    http://poj.org/problem?id=3183 题意:有n个树桩,分别有一个高度h[i],要用Bomb把树桩都炸掉,如果炸的位置的两边树桩高度小于Bomb炸的树桩高度,那么小于树桩高度的 ...

  3. 充气娃娃什么感觉?Python告诉你

    上期为大家介绍了requests库的基本信息以及使用requests库爬取某东的商品页,收到了很多同学的反馈说期待猪哥的更新,猪哥感到非常开心,今天就带大家来玩一把刺激的! 一.需求背景 在实际开发过 ...

  4. 简述vue中父子组件是怎样相互传递值的(基础向)

    前言 首先,你需要知道vue中父组件和子组件分别指的是什么?   父组件:vue的根实例——用new Vue()构造函数创建的vue实例(实例会有一个挂载点,挂载点里的所有内容可理解为父组件的内容) ...

  5. c++二分查找

    c++二分查找 题目是在一些数字里找出一个数字,并输出他在第几行 代码 + 注释 #include <stdio.h> #include<iostream> using nam ...

  6. Acrobat pro Dc 2018破解版|Adobe Acrobat pro Dc 2018中文破解版下载(附序列号/免破解)

    Acrobat pro Dc 2018破解版是由Adobe公司开发的一款PDF编辑软件,它可以以PDF格式制作和保存用户的文档,以此方便浏览和打印,或使用更高级的功能,且PDF格式的文档可如实地保留原 ...

  7. mybatis-generator生成数据表中注释

    0.git clone https://github.com/backkoms/mybatis-generator-comments.git,编译打包,install到本地或delopy私服库中均可. ...

  8. ~~核心编程(二):面向对象——类&属性~~

    进击のpython 类&属性 虽然我们上一part写了一个面向对象的程序:人狗大战 但是如果在面向对象来看 你这些的就不够规范 你既然选择用面向对象的思想来写 那你就要符合人家的定义规范和操作 ...

  9. 调用另一个进程,createprocess返回值正确,但被调进程连入口函数都没进入。

    1.单独运行被调进程(提示atl不匹配). 2.编译选项设置为不依赖atl即可. 3.启发:能单独测试的,先单独测试.

  10. C# 不同访问符的访问级别

    public----成员可以由任何代码访问. private----成员只能由类中的代码访问(如果没有使用任何关键字,就默认使用这个关键字). internal----成员只能由定义它的项目(程序集) ...