js实现图片的懒加载
原文地址: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实现图片的懒加载的更多相关文章
- 如何使用echo.js实现图片的懒加载(整理)
如何使用echo.js实现图片的懒加载(整理) 一.总结 一句话总结:a.在img标签中添加data-echo属性加载真实图片:<img class="loading" sr ...
- JS怎样实现图片的懒加载以及jquery.lazyload.js的使用
在项目中有时候会用到图片的延迟加载,那么延迟加载的好处是啥呢? 我觉得主要包括两点吧,第一是在包含很多大图片长页面中延迟加载图片可以加快页面加载速度:第二是帮助降低服务器负担. 下面介绍一下常用的延迟 ...
- jquery.lazyload.js图片延迟加载(懒加载)--转载
一.插件介绍 jquery.lazyload.js 是一个用 JavaScript 编写的jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动 ...
- 滚动加载图片(懒加载)实现原理(这是旧实现,仅做为获取元素宽高api的参考)
https://www.cnblogs.com/flyromance/p/5042187.html 本文主要通过以下几方面来说明懒加载技术的原理,个人前端小菜,有错误请多多指出 一.什么是图片滚动加载 ...
- 如何在小程序实现图片lazy-load懒加载效果
自从跳一跳出现之后小程序又开始频繁出现了,在学习过程中发现小程序虽然好但是由于api不完善导致开发过程中有很多的坑,重点是网上相对小程序出现坑时解决方案显然比较少,小程序最让人觉得痛心疾首之一就是无法 ...
- 带你认识网站图片img懒加载和预加载的区别
懒加载 什么是懒加载? 懒加载也就是延迟加载.当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需请求一次,俗称占位图),只有当图片出现在浏览 ...
- 使用jquery插件实现图片延迟加载--懒加载技术
原文链接:http://www.cnblogs.com/lei2007/archive/2013/05/31/3110725.html 感谢作者.以下为原文,备忘仅供自己学习. 第一:lazyLoad ...
- Vue.js笔记 — vue-router路由懒加载
用vue.js写单页面应用时,会出现打包后的JavaScript包非常大,影响页面加载,我们可以利用路由的懒加载去优化这个问题,当我们用到某个路由后,才去加载对应的组件,这样就会更加高效,实现代码如下 ...
- JS 实现图片的预加载(转载)
图片预加载是web开发中一种应用相当广泛的技术,比如我们在做图片翻转显示等特效的时候,为了让图片在转换的时候不出现等待,我们最好是先让图片下载到本地,然后在继续执行后续的操作. 下面的函数实现了一个我 ...
随机推荐
- Java分层架构的使用规则
原文章引用地址:http://blog.csdn.net/ygzk123/article/details/7816511 三层结构的程序不是说把项目分成DAL, BLL, WebUI三个模块就叫三层了 ...
- IDEA Maven项目中添加tomcat没有无artifact选项
IntelliJ使用 ##使用IntelliJ IDEA配置web项目时,选择Edit Configration部署Tomcat的Deployment可能会出现以下情况: 导致新手部署过程中摸不着头脑 ...
- QTP基本循环异常遍历(代码方式实现)
0 环境 系统环境:win7 1 前言 在正常循环的基础下 添加异常处理遍历 一些基本操作 请看正常循环 https://www.cnblogs.com/my-ordinary/p/11739180. ...
- HTML5 Fundamental Syntax
HTML5 Fundamental Syntax */--> HTML5 Fundamental Syntax 1 Adding Document Structure with HTML5's ...
- 吴裕雄--天生自然 HADOOP大数据分布式处理:安装配置Tomcat服务器
下载链接:https://tomcat.apache.org/download-80.cgi tar -zxvf apache-tomcat-8.5.42.tar.gz -C /usr/local/s ...
- Linux把内存挂载成硬盘提高读写速度
tmpfs是一种虚拟内存文件系统正如这个定义它最大的特点就是它的存储空间在VM里面,这里提一下VM(virtual memory),VM是由linux内核里面的vm子系统管理,现在大多数操作系统都采用 ...
- 机器人可以拥有社交智能吗?——微软雷德蒙研究院院长Eric Horvitz与他的个人虚拟助理之梦
Horvitz与他的个人虚拟助理之梦" title="机器人可以拥有社交智能吗?--微软雷德蒙研究院院长Eric Horvitz与他的个人虚拟助理之梦">编者按:到 ...
- nodejs 客户端证书设置。
最近的系统要求较高的安全等级 https+usbkey证书 https的操作很简单 openssl 生成ca 和证书,配置启动即可 生成成功后,类似这样. 类似这样 var options = { k ...
- 蛋白质修饰|phosphors|mascot+X|
生物医学大数据 重点:蛋白质定量 新蛋白可以是全新的蛋白质,也可以是知结构但未知功能的蛋白质,也可以是知道结构有新功能的蛋白质. 新蛋白鉴定可以使用以下方法. 基于基因组,可以基因组中的coding区 ...
- python3多线程爬虫(第一卷)
多进程虽然使用方便,可以充分利用CPU,但是由于个进程之间是并行且各自有自己的数据存储,所以很难进行数据间的通信,需要接入第三方模块,现在我依旧用糗事百科讲解下多线程的应用,举个例子之前用4个进程同时 ...