原文地址: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. Maven配置阿里云问题

    现在我们经常会与Maven打交道,无论是工作还是自己的练笔,因为它真的是太强大了.它可以帮助我们管理版本,jar包等等. 但是由于国内的环境问题,我们需要有一个仓库,有些公司会自己搭建私服,那对个人来 ...

  2. J - Association of Cats and Magical Lights Kattis - magicallights (树状数组+dfs序)

    Rar the Cat((™)) is the founder of ACM (Association of Cats and Magical Lights). This is the story o ...

  3. JS创建数组的三种方法

    1     常规方式 创建数组并给数组元素赋值 var myCars = new Array(); myCars[0] = "Saab"; myCars[1] = "Vo ...

  4. 01-电子商城项目介绍及ssm框架搭建

    1.B2C电商项目功能及架构 1.1功能列表 1.2系统架构(soa架构) 2.后台管理系统工程搭建及测试 ypMall,ypMall-manager-web ypMall为父项目,管理子项目的jar ...

  5. Tomcat爆出严重漏洞,附影响版本及解决方案

    昨天,群里聊嗨了.大家都在远程办公,却都急急忙忙的升级线上的 Tomcat 版本,原因就是 Tomcat 被曝出了严重的漏洞,几乎涉及到所有的版本. 一.漏洞原理具体来说就是 Apache Tomca ...

  6. [LC] 1099. Two Sum Less Than K

    Given an array A of integers and integer K, return the maximum S such that there exists i < j wit ...

  7. BadRequestException

    package me.zhengjie.common.exception; import lombok.Getter; import org.springframework.http.HttpStat ...

  8. Grails Controller - redirect 方法

    官方文档: http://docs.grails.org/latest/ref/Controllers/redirect.html 网页跳转方法1: // 在一个Action中直接跳转到另外一个Act ...

  9. SEO//TODO

    目录 技术背景 开发环境 学习过程 参考资料 结束语 技术背景 开发环境 学习过程 参考资料 结束语 达克效应(D-K effect),全称为邓宁-克鲁格效应(Dunning-Kruger effec ...

  10. SQLserver安装了多个实例,实例端口号也被修改后的代码连接方式

    事例说明 IP地址为192.168.1.100的服务器上安装了SQLServer2000,它有两个实例,分别为:默认实例——JLW和另外新建的实例——JLW\TEST SQLServer网络实用工具中 ...