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 相关文章推荐
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
Jan 15 Javascript
html超链接打开窗口大小的方法
Mar 05 Javascript
javascript学习笔记--数字格式类型
May 22 Javascript
Sort()函数的多种用法
Mar 20 Javascript
jQuery 常用代码集锦(必看篇)
May 16 Javascript
js验证框架之RealyEasy验证详解
Jun 08 Javascript
js中数组的常用方法小结
Dec 30 Javascript
jQuery实现复制到粘贴板功能
Feb 11 Javascript
解决在vue项目中,发版之后,背景图片报错,路径不对的问题
Mar 06 Javascript
详解Vue源码中一些util函数
Apr 24 Javascript
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
解决vue项目中某一页面不想引用公共组件app.vue的问题
Aug 14 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
PHP生成月历代码
2007/06/14 PHP
php mb_substr()函数截取中文字符串应用示例
2014/07/29 PHP
ThinkPHP调用common/common.php函数提示错误function undefined的解决方法
2014/08/25 PHP
微信支付PHP SDK之微信公众号支付代码详解
2015/12/09 PHP
CodeIgniter表单验证方法实例详解
2016/03/03 PHP
Yii针对添加行的增删改查操作示例
2016/10/18 PHP
PHP使用preg_split()分割特殊字符(元字符等)的方法分析
2017/02/04 PHP
Javascript基础教程之关键字和保留字汇总
2015/01/18 Javascript
jQuery实现当前页面标签高亮显示的方法
2015/03/10 Javascript
全面解析Bootstrap排版使用方法(文字样式)
2015/11/30 Javascript
jQuery+CSS3实现四种应用广泛的导航条制作实例详解
2016/09/17 Javascript
vue父子组件的数据传递示例
2017/03/07 Javascript
浅析Angular2子模块以及异步加载
2017/04/24 Javascript
javascript 中select框触发事件过程的分析
2017/08/01 Javascript
angular项目中bootstrap-datetimepicker时间插件的使用示例
2018/03/15 Javascript
Java 生成随机字符的示例代码
2021/01/13 Javascript
python通过ElementTree操作XML获取结点读取属性美化XML
2013/12/02 Python
python生成器generator用法实例分析
2015/06/04 Python
简单讲解Python中的数字类型及基本的数学计算
2016/03/11 Python
Python实现将通信达.day文件读取为DataFrame
2018/12/22 Python
python实现自动获取IP并发送到邮箱
2018/12/26 Python
把JSON数据格式转换为Python的类对象方法详解(两种方法)
2019/06/04 Python
Django Celery异步任务队列的实现
2019/07/24 Python
python实现指定ip端口扫描方式
2019/12/17 Python
深入浅析python变量加逗号,的含义
2020/02/22 Python
python实现批量修改文件名
2020/03/23 Python
Python命令行参数argv和argparse该如何使用
2021/02/08 Python
socket.io 和canvas 实现的共享画板功能
2019/05/22 HTML / CSS
CHARLES & KEITH台湾官网:新加坡时尚品牌
2019/07/30 全球购物
一套VC试题
2015/01/23 面试题
毕业自我评价范文
2013/11/17 职场文书
简历的个人自我评价范文
2014/01/03 职场文书
教师节商场活动方案
2014/02/13 职场文书
从严治党主题教育活动总结
2015/05/07 职场文书
详解Python requests模块
2021/06/21 Python
DIV CSS实现网页背景半透明效果
2021/12/06 HTML / CSS