频道导航

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

2019-01-08 JavaScript 前端之家

前端之家收集整理的这篇文章主要介绍了JS实现非首屏图片延迟加载的示例，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

目标

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

思路

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

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

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

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

　

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

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

实现

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

<div class="container">

图片懒加载

测试性配文，测试图片懒加载

测试性配文，测试图片懒加载

测试性配文，测试图片懒加载

测试性配文，测试图片懒加载

测试性配文，测试图片懒加载

测试性配文，测试图片懒加载

测试性配文，测试图片懒加载

测试性配文，测试图片懒加载

测试性配文，测试图片懒加载

测试性配文，测试图片懒加载

测试性配文，测试图片懒加载

测试性配文，测试图片懒加载

测试性配文，测试图片懒加载

测试性配文，测试图片懒加载

测试性配文，测试图片懒加载

测试性配文，测试图片懒加载

测试性配文，测试图片懒加载

测试性配文，测试图片懒加载

测试性配文，测试图片懒加载

测试性配文，测试图片懒加载

测试性配文，测试图片懒加载

测试性配文，测试图片懒加载

测试性配文，测试图片懒加载

测试性配文，测试图片懒加载

测试性配文，测试图片懒加载

测试性配文，测试图片懒加载

测试性配文，测试图片懒加载

测试性配文，测试图片懒加载

测试性配文，测试图片懒加载

测试性配文，测试图片懒加载

测试性配文，测试图片懒加载

测试性配文，测试图片懒加载

测试性配文，测试图片懒加载

测试性配文，测试图片懒加载

测试性配文，测试图片懒加载

测试性配文，测试图片懒加载

测试性配文，测试图片懒加载

测试性配文，测试图片懒加载

测试性配文，测试图片懒加载

测试性配文，测试图片懒加载

测试性配文，测试图片懒加载

测试性配文，测试图片懒加载

测试性配文，测试图片懒加载

测试性配文，测试图片懒加载

测试性配文，测试图片懒加载

测试性配文，测试图片懒加载

测试性配文，测试图片懒加载

测试性配文，测试图片懒加载

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

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

下面就是如何实现lazyLoad

0) { element.setAttribute('src',element.getAttribute('data-src')) } }) }

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

节流函数如下

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实现非首屏图片延迟加载的示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。

原文链接：https://www.f2er.com/js/34310.html

图片图片图片延迟加载非首屏

上一篇：基于JavaScript中标识符的命名规则下一篇：JavaScript寄生组合式继承实例详解

猜你在找的JavaScript相关文章

Javascript中的事件冒泡与捕获

事件冒泡和事件捕获起因：今天在封装一个bind函数的时候，发现el.addEventListener函数支...

作者：前端之家时间：2021-02-22

搞懂js中小数运算精度问题原因及解决办法

js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型，number类型相当于其...

作者：前端之家时间：2021-02-22

搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理

什么是跨域跨域：广义的跨域包含一下内容： 1.资源跳转（链接跳转，重定向跳转，表单提...

作者：前端之家时间：2021-02-22

前端对base64编码的理解，原生js实现字符base64编码

@ "TOC" 常见对base64的认知(不完全正确) 首先对base64常见的认知，也是...

作者：前端之家时间：2021-02-22

搞懂：MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式

搞懂：MVVM模式和Vue中的MVVM模式 MVVM MVVM ：的缩写，说都能直接说出来：模型，：视图...

作者：前端之家时间：2021-02-22

js判断浏览器是否支持webGL

起因是我之前开发的网页，用到了three.js制作了一个3d的旋转球体效果。在各种浏览器上运行...

作者：前端之家时间：2021-02-14

js判断undefined和null

js判断undefined js判断null js判断null和undefined

作者：前端之家时间：2021-02-14

将文字自动转为banner打印形式的工具

http://patorjk.com/software/taag/

作者：前端之家时间：2021-02-14

聊一聊 bootstrap 的轮播图插件

今天做工作的时候，轻车熟路的做完，又用到了bootstrap的轮播图，觉得有必要安利一下这个插...

作者：前端之家时间：2021-02-14

js实现图片无缝循环跑马灯

html 代码 css js代码 function mylsRunHorseLight() { if (mylsTimer != null) { clearIn...

作者：前端之家时间：2021-02-14

最新文章