原文地址:https://blog.phyer.cn/article/9277。欢迎大家访问我的博客(●ˇ∀ˇ●)

// 防抖

let lazy_timer;
window.addEventListener('scroll', function () {
  if (lazy_timer !== null){
    clearTimeout(lazy_timer)
  }
  lazy_timer = setTimeout(function () {
    load_lazy();
  }, 100)
});
// 必须在window.onload里主动调用一次
load_lazy(); // 懒加载
function load_lazy() {
  $('.lazy-img:not([data-l])').each(function () {
    let y = this.getBoundingClientRect().top;
    if ((y+this.offsetHeight >= 0 && y <= document.body.clientHeight) || this.getAttribute('data-main') === 't') {
      this.src = this.getAttribute('data-s');
      this.setAttribute('data-l', '');
    }
  });
}

以上代码很简洁,主要就是三点

  • 对需要懒加载的图片,src设置loading.gif,data-s设置成原本的src,加载后设置data-l用于分辨是否已加载。
  • 监听scroll事件,如果图片进入了视野便执行替换src,此处注意防抖。
  • 对需要懒加载的图片,最好加上onerror事件。当加载失败时,图片的占有空间(浏览器一般会放一个破碎的图片)和实际大小不符,导致下面的图片已经到了视野中,却没有被加载,就是这样:

js实现图片的懒加载的更多相关文章

  1. 如何使用echo.js实现图片的懒加载(整理)

    如何使用echo.js实现图片的懒加载(整理) 一.总结 一句话总结:a.在img标签中添加data-echo属性加载真实图片:<img class="loading" sr ...

  2. JS怎样实现图片的懒加载以及jquery.lazyload.js的使用

    在项目中有时候会用到图片的延迟加载,那么延迟加载的好处是啥呢? 我觉得主要包括两点吧,第一是在包含很多大图片长页面中延迟加载图片可以加快页面加载速度:第二是帮助降低服务器负担. 下面介绍一下常用的延迟 ...

  3. jquery.lazyload.js图片延迟加载(懒加载)--转载

    一.插件介绍 jquery.lazyload.js 是一个用 JavaScript 编写的jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动 ...

  4. 滚动加载图片(懒加载)实现原理(这是旧实现,仅做为获取元素宽高api的参考)

    https://www.cnblogs.com/flyromance/p/5042187.html 本文主要通过以下几方面来说明懒加载技术的原理,个人前端小菜,有错误请多多指出 一.什么是图片滚动加载 ...

  5. 如何在小程序实现图片lazy-load懒加载效果

    自从跳一跳出现之后小程序又开始频繁出现了,在学习过程中发现小程序虽然好但是由于api不完善导致开发过程中有很多的坑,重点是网上相对小程序出现坑时解决方案显然比较少,小程序最让人觉得痛心疾首之一就是无法 ...

  6. 带你认识网站图片img懒加载和预加载的区别

    懒加载 什么是懒加载? 懒加载也就是延迟加载.当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需请求一次,俗称占位图),只有当图片出现在浏览 ...

  7. 使用jquery插件实现图片延迟加载--懒加载技术

    原文链接:http://www.cnblogs.com/lei2007/archive/2013/05/31/3110725.html 感谢作者.以下为原文,备忘仅供自己学习. 第一:lazyLoad ...

  8. Vue.js笔记 — vue-router路由懒加载

    用vue.js写单页面应用时,会出现打包后的JavaScript包非常大,影响页面加载,我们可以利用路由的懒加载去优化这个问题,当我们用到某个路由后,才去加载对应的组件,这样就会更加高效,实现代码如下 ...

  9. JS 实现图片的预加载(转载)

    图片预加载是web开发中一种应用相当广泛的技术,比如我们在做图片翻转显示等特效的时候,为了让图片在转换的时候不出现等待,我们最好是先让图片下载到本地,然后在继续执行后续的操作. 下面的函数实现了一个我 ...

随机推荐

  1. Shell遍历目前下后缀名为.xml的文件并替换文件内容

    1.shell查找 .xml文件 find /home/esoon/test/external/ -type f -name '*.xml' 2.替换方法 sed -i "s/10.111. ...

  2. [USACO09OCT]谷仓里的回声Barn Echoes(hush、STL)

    https://www.luogu.org/problem/P2957 题目描述 The cows enjoy mooing at the barn because their moos echo b ...

  3. 线程中调用service方法出错

    public class PnFileTGIComputeThread implements Runnable { @Resource private AppUsedService appUsedSe ...

  4. Vue创建项目及基本语法 一

    目录 目录: 一.创建Vue项目 0.使用环境要求及说明 1.使用命令创建项目 2.启动项目 二.简单指令 1.变量: 2.动态绑定变量值 3.v-once指令 4.v-html解析html 5.v- ...

  5. Centos-Apache服务(2)

    title date tags layout CentOS6.5 Apache的增值服务 2018-09-03 Centos6.5服务器搭建 post 1.更改Apache的监听端口号 [root@l ...

  6. JavaScript 简介与语法

    一.JavaScript简介 ).head里面 ).body里面 (在body内最为严谨) ).</html>之后 //程序上来要执行的部分 [2]三个常用对话框 alert()警告对话框 ...

  7. css样式表----------样式属性(背景与前景、边界和边框、列表与方块、格式与布局)

    一.背景与前景 (1).背景 line-height: 1.5 !important;">90; /*背景色(以样式表为主,样式表优先.)*/ background-image:url ...

  8. Java IO: 字符流的Piped和CharArray

    作者: Jakob Jenkov 译者: 李璟(jlee381344197@gmail.com) 本章节将简要介绍管道与字符数组相关的reader和writer,主要涉及PipedReader.Pip ...

  9. java枚举与常量类的区别

    1)枚举型可以直接与数据库打交道,我通常使用varchar类型存储,对应的是枚举的常量名.(数据库中好像也有枚举类型,不过也没用过) 2) switch语句支持枚举型,当switch使用int.Str ...

  10. 批量修改ACCESS表列名

    问题来源:从ODBC导入数据到ACCESS 再从ACCESS导入到SQL数据库,ACCESS会多带个DBO. 所以需要批量修改ACCESS的表名. 首先需要引用ADOX引用方法:打开ACCESS的VB ...