js实现图片懒加载

一、图片懒加载原理 浏览器是否发起请求图片是根据中src的属性，所以实现原理就是在图片没有进入可视区域的时候将图片链接放在datasrc中，等到图片载入可视区域再给src赋值 二、懒加载思路及实现 懒加载的实现这里提供的两种方法 1.html和css部分 css html 2. js部分，这里介绍两种方法 2.1.传统的方法，利用window和document的API 2.1.1.在实现具体方法前介绍几个API和优化性能的方法 浏览器可视窗口高度：window.innerHeight 滚动区域高度：document.body.scrollTop和document.documentElement.scrollTop 元素距离文档顶部距离：Element.offsetTop 函数节流： 事件触发后执行函数执行期间内事件再次触发，执行函数将不会执行，等规定时间之后事件触发，执行函数方可再次执行。 函数防抖：下文中未用到，就和函数节流一起介绍了。 事件触发停止一定时间后才会执行响应的函数，期间如果重复调用动作，重新计算时间。类似于，按下一个弹簧，只有你松手的时候弹簧才会弹起。本质上是将多次操作合并为一次操作。可用一个定时器维护，事件触发后wait时间内如果事件重复触发，那么取消当前定时器，重新设置一个时延为wait的定时器。 2.1.2.具体实现图片懒加载代码 window.onload=function(){ var imgs=document.querySelectorAll('img'); lazyLoadImg(imgs) window.addEventListener('scroll',throttle(imgs,lazyLoadImg,200)) } //函数节流,在规定时间内才执行一次图片加载函数，解决耗费性能，浏览器卡顿问题。 function throttle(imgs,lazyLoadImg,wait){ var lastTime=new Date().getTime() return function(){ var curTime=new Date().getTime() if(curTime-lastTimescrollTop;//满足从下向上滚动时显示图片的条件 var isScrollTop=imgItem.offsetTop本文章由javascript技术分享原创和收集