JS实现非首屏图片延迟加载的示例


Posted in Javascript onJanuary 06, 2018

目标

减少资源加载可以明显的优化页面加载的速度,所以可以减少页面载入时立即下载的图片的数量,以提高页面加载速度,其他的图片在需要的时候再进行加载。

思路

想要实现以上的目标,有几个地方需要思考。

1、如何判断哪些图片需要立即加载,哪些可以晚些再加载?

2、如何控制图片在指定的时候加载?

对于第一个问题,页面打开就会被用户看到的图片肯定需要立即加载,其他的可以延后。即在视窗中的图片需要立即加载。那么如何判断图片是否在视窗内呢?getBoundingClientRect可以返回元素的大小及其相对于视口的位置(详细说明)

 JS实现非首屏图片延迟加载的示例

可以通过图中top和right的值判断图片是否在视窗中。

对于第二个问题,先不给img指定src,而是将图片链接地址存放再元素的data-src属性(自定义)中,需要加载的时候再赋值给src,才会开始下载图片。

实现

思路有了,我们开始实现。用以下HTML进行测试

<div class="container">
 <h1>图片懒加载</h1>
 <p>测试性配文,测试图片懒加载</p>
 <p>测试性配文,测试图片懒加载</p>
 <p>测试性配文,测试图片懒加载</p>
 <p>测试性配文,测试图片懒加载</p>
 <p>测试性配文,测试图片懒加载</p>
 <p>测试性配文,测试图片懒加载</p>
 <p>测试性配文,测试图片懒加载</p>
 <p>测试性配文,测试图片懒加载</p>
 <img src="" alt="" class="lazy-img" data-src="http://c.hiphotos.baidu.com/zhidao/pic/item/1f178a82b9014a909461e9baa1773912b31bee5e.jpg">
 <p>测试性配文,测试图片懒加载</p>
 <p>测试性配文,测试图片懒加载</p>
 <p>测试性配文,测试图片懒加载</p>
 <p>测试性配文,测试图片懒加载</p>
 <p>测试性配文,测试图片懒加载</p>
 <p>测试性配文,测试图片懒加载</p>
 <p>测试性配文,测试图片懒加载</p>
 <p>测试性配文,测试图片懒加载</p>
 <img src="" alt="" class="lazy-img" data-src="http://img2.niutuku.com/desk/1208/1718/ntk-1718-66531.jpg">
 <p>测试性配文,测试图片懒加载</p>
 <p>测试性配文,测试图片懒加载</p>
 <p>测试性配文,测试图片懒加载</p>
 <p>测试性配文,测试图片懒加载</p>
 <p>测试性配文,测试图片懒加载</p>
 <p>测试性配文,测试图片懒加载</p>
 <p>测试性配文,测试图片懒加载</p>
 <p>测试性配文,测试图片懒加载</p>
 <img src="" alt="" class="lazy-img" data-src="http://2t.5068.com/uploads/allimg/151105/48-151105112944-51.jpg">
 <p>测试性配文,测试图片懒加载</p>
 <p>测试性配文,测试图片懒加载</p>
 <p>测试性配文,测试图片懒加载</p>
 <p>测试性配文,测试图片懒加载</p>
 <p>测试性配文,测试图片懒加载</p>
 <p>测试性配文,测试图片懒加载</p>
 <p>测试性配文,测试图片懒加载</p>
 <p>测试性配文,测试图片懒加载</p>
 <img src="" alt="" class="lazy-img" data-src="http://img2.niutuku.com/desk/anime/4654/4654-4708.jpg">
 <p>测试性配文,测试图片懒加载</p>
 <p>测试性配文,测试图片懒加载</p>
 <p>测试性配文,测试图片懒加载</p>
 <p>测试性配文,测试图片懒加载</p>
 <p>测试性配文,测试图片懒加载</p>
 <p>测试性配文,测试图片懒加载</p>
 <p>测试性配文,测试图片懒加载</p>
 <p>测试性配文,测试图片懒加载</p>
 <img src="" alt="" class="lazy-img" data-src="http://img2.niutuku.com/desk/1208/1721/ntk-1721-66572.jpg">
 <p>测试性配文,测试图片懒加载</p>
 <p>测试性配文,测试图片懒加载</p>
 <p>测试性配文,测试图片懒加载</p>
 <p>测试性配文,测试图片懒加载</p>
 <p>测试性配文,测试图片懒加载</p>
 <p>测试性配文,测试图片懒加载</p>
 <p>测试性配文,测试图片懒加载</p>
 <p>测试性配文,测试图片懒加载</p>

 </div>

html中链接都来自百度图片,可在network中观察是否加载,这里忽略样式。按照之前的思路,有以下代码

//所有的图片
 var imgs = document.querySelectorAll('.lazy-img');
 //首屏图片加载
 lazyLoad(imgs)
 //剩余图片加载---监听滚动事件
 window.addEventListener('scroll',function(){
 //滚动事件触发太频繁了,所以加上节流
 throttle(lazyLoad(imgs),200,500)
 })
 }

下面就是如何实现lazyLoad

function lazyLoad(imgs,offset){
 offset = offset || 100;
 if (!imgs || imgs.length < 1) {
 console.log('imgs为空');
 return ;
 }
 [].slice.call(imgs).forEach(function(element,index){
 //元素的DomRect
 var rect = element.getBoundingClientRect()
 //出现在视窗中
 if (rect.top <= window.innerHeight + offset && rect.right > 0) {
 element.setAttribute('src',element.getAttribute('data-src'))
 }
 })
}

通过window.innerHeight获取到视窗的高度,当元素距离视窗上边沿为offset时,加载图片;其中offset为指定的偏移距离。

节流函数如下

function throttle (fn, delay, atleast) {
 let timer = null
 let startTime = new Date()

 return function () {
 let context = this
 let args = arguments
 let curTime = new Date()

 clearTimeout(timer)
 if (curTime - startTime >= atleast) {
 fn.apply(context, args) // apply 指定函数指向的 上下文(this) 和 参数列表
 startTime = curTime
 } else {
 timer = setTimeout(function () {
 fn.apply(context, args)
 startTime = curTime
 }, delay)
 }
 }
 }

效果

页面载入完成,只加载了一张图片

JS实现非首屏图片延迟加载的示例

向下滚动到指定位置,才会依次加载后续图片

JS实现非首屏图片延迟加载的示例

以上这篇JS实现非首屏图片延迟加载的示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js如何调用qq互联api实现第三方登录
Mar 28 Javascript
基于Bootstrap重置输入框内容按钮插件
May 12 Javascript
xmlplus组件设计系列之树(Tree)(9)
May 02 Javascript
JSON对象转化为字符串详解
Aug 11 Javascript
详解基于Node.js的HTTP/2 Server实践
May 31 Javascript
vue和webpack安装命令详解
Jun 15 Javascript
详解React native fetch遇到的坑
Aug 30 Javascript
Bootstrap Table 双击、单击行获取该行及全表内容
Aug 31 Javascript
详解搭建es6+devServer简单开发环境
Sep 25 Javascript
vue + node如何通过一个Txt文件批量生成MP3并压缩成Zip
Jun 02 Javascript
JS判断数组四种实现方法详解
Jun 29 Javascript
JavaScript常用工具函数库汇总
Sep 17 Javascript
jQuery中库的引用方法
Jan 06 #jQuery
基于JavaScript中标识符的命名规则介绍
Jan 06 #Javascript
js生成word中图片处理方法
Jan 06 #Javascript
详解webpack中的hash、chunkhash、contenthash区别
Jan 05 #Javascript
浅谈webpack对样式的处理
Jan 05 #Javascript
js实现HTML中Select二级联动的实例
Jan 05 #Javascript
详解tween.js 中文使用指南
Jan 05 #Javascript
You might like
Yii获取当前url和域名的方法
2015/06/08 PHP
PHP判断是否连接上网络的方法
2015/07/01 PHP
详解Laravel设置多态关系模型别名的方式
2019/10/17 PHP
Javascript 类与静态类的实现(续)
2010/04/02 Javascript
jquery里的正则表达式说明
2011/08/03 Javascript
jQuery 过滤方法filter()选择具有特殊属性的元素
2014/06/15 Javascript
js识别不同浏览器基于userAgent做判断
2014/07/29 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
2015/03/26 Javascript
JS解析XML文件和XML字符串详解
2015/04/17 Javascript
Bootstrap基本样式学习笔记之表单(3)
2016/12/07 Javascript
JS常用知识点整理
2017/01/21 Javascript
Require.js的基本用法详解
2017/07/03 Javascript
Angular 5.x 学习笔记之Router(路由)应用
2018/04/08 Javascript
javascript实现文本框标签验证的实例代码
2018/10/14 Javascript
微信小程序开发之tabbar图标和颜色的实现
2018/10/17 Javascript
JavaScript 生成唯一ID的几种方式
2021/02/19 Javascript
[02:15]2014DOTA2国际邀请赛 专访LGD.lin小兔子是大腿
2014/07/14 DOTA
浅谈使用Python内置函数getattr实现分发模式
2018/01/22 Python
python2.7到3.x迁移指南
2018/02/01 Python
python自动重试第三方包retrying模块的方法
2018/04/24 Python
python实现字符串完美拆分split()的方法
2019/07/16 Python
Django DRF认证组件流程实现原理详解
2020/08/17 Python
HTML5操作WebSQL数据库的实例代码
2017/08/26 HTML / CSS
Ralph Lauren拉夫·劳伦美国官网:带有浓郁美国气息的高品味时装品牌
2017/11/01 全球购物
印度在线购买电子产品网站:Croma
2020/01/02 全球购物
英国100%防污和防水的靴子:Muck Boot Company
2020/09/08 全球购物
Servlet如何得到客户端机器的信息
2014/10/17 面试题
秘书英文求职信范文
2014/01/31 职场文书
志愿者活动总结范文
2014/04/26 职场文书
通讯稿格式及范文
2015/07/22 职场文书
美容院管理规章制度
2015/08/05 职场文书
《颐和园》教学反思
2016/02/19 职场文书
会议开幕致辞怎么写
2016/03/03 职场文书
python用海龟绘图写贪吃蛇游戏
2021/06/18 Python
Go 语言下基于Redis分布式锁的实现方式
2021/06/28 Golang
MySQL时区造成时差问题
2022/04/13 MySQL