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

 更新时间:2018年01月06日 09:28:59   作者:Shapeying  
下面小编就为大家分享一篇用JS实现非首屏图片延迟加载的示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

目标

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

思路

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

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

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

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

 

可以通过图中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 提取某()特殊字符串长度的实例

    下面小编就为大家分享一篇js 提取某()特殊字符串长度的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2017-12-12
  • js中innerText/textContent和innerHTML与target和currentTarget的区别

    js中innerText/textContent和innerHTML与target和currentTarget的

    今天小编就为大家分享一篇关于js中innerText/textContent和innerHTML与target和currentTarget的区别,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01
  • 原生js实现可拖拽效果

    原生js实现可拖拽效果

    本文主要介绍了原生js实现可拖拽效果的实例,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • JS实现自定义简单网页软键盘效果代码

    JS实现自定义简单网页软键盘效果代码

    这篇文章主要介绍了JS实现自定义简单网页软键盘效果代码,可实现简单模拟键盘布局及响应鼠标点击按下键盘按键功能,简单实用,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-11-11
  • 解决layer.confirm选择完之后消息框不消失的问题

    解决layer.confirm选择完之后消息框不消失的问题

    今天小编就为大家分享一篇解决layer.confirm选择完之后消息框不消失的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 微信小程序实现时间预约功能

    微信小程序实现时间预约功能

    这篇文章主要为大家详细介绍了微信小程序实现时间预约基本功能,一个类似电商的时间预约功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • ES2020让代码更优美的运算符 (?.) (??)

    ES2020让代码更优美的运算符 (?.) (??)

    这篇文章主要介绍了ES2020让代码更优美的运算符 (?.) (??),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • 用js+cookie记录滚动条位置

    用js+cookie记录滚动条位置

    用js+cookie记录滚动条位置...
    2007-01-01
  • window.location和document.location的区别分析

    window.location和document.location的区别分析

    用户不能改变document.location(因为这是当前显示文档的位置)。但是,可以改变window.location (用其它文档取代当前文档)window.location本身也是一个对象,而document.location不是对象
    2008-12-12
  • 深入了解JavaScript词法作用域

    深入了解JavaScript词法作用域

    这篇文章主要介绍了JavaScript词法作用域的相关资料,文中讲解非常细致,代码帮助大家更好的理解和学习,感兴趣的朋友可以了解下
    2020-07-07

最新评论