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

您可能感兴趣的文章:

使用canvas进行图像编辑的实例
下面小编就为大家带来一篇使用canvas进行图像编辑的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08
在线编辑器的实现原理(兼容IE和FireFox)
在线编辑器的实现原理(兼容IE和FireFox)...
2007-03-03
JavaScript Map 和 Object 的区别解析
在JavaScript中，Map 和 Object 看起来都是用键值对来存储数据，那么他们有什么不同呢，这篇文章主要介绍了JavaScript Map 和 Object 的区别,需要的朋友可以参考下
2022-08-08
js初始化验证实例详解
这篇文章主要介绍了js初始化验证,结合实例形式分析了javascript初始化验证相关的判断、设置、检测等相关操作技巧,需要的朋友可以参考下
2016-11-11
聊聊JavaScript如何实现继承及特点
“继承”是面向对象编程里面经常提及到的概念，它的目的是实现代码复用。这篇文章主要介绍了聊聊JavaScript如何实现继承及特点，有兴趣的可以了解一下。
2017-04-04
一步步教你实现微信小程序自定义组件
之前做小程序开发的时候,对于开发来说比较头疼的莫过于自定义组件了,下面这篇文章主要给大家介绍了关于微信小程序自定义组件的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-03-03
js sort 二维数组排序的用法小结
我们知道在js中默认提供了sort函数，但是这个函数默认是按照数组内容的ascii码升序进行排列的，如果我们要对二维数组排序要如何做呢
2014-01-01
微信小程序基础教程之echart的使用
简单的使用echarts不难,但是在小程序里用echarts可能有些理不清。所以这篇文章主要给大家介绍了关于微信小程序基础教程之echart使用的相关资料,需要的朋友可以参考下
2021-06-06
javascript 容错处理代码(屏蔽js错误)
有时候大家来浏览网页的时候发现IE浏览器左下角总有个黄色错误标志，有时候更是直接弹出错误无法继续浏览页面，这样对于网站的正规性与权威性发展不利。
2010-04-04
JavaScript保留关键字汇总
本篇文章是小编日常收集整理些javascript保留关键字相关知识汇总，需要的朋友参考下
2015-12-12