原生JS实现图片懒加载(lazyload)实例
2017-06-13 09:50
513 查看
图片懒加载也是比较常见的一种性能优化的方法,最近在用vue做一个新闻列表的客户端时也用到了,这里就简单介绍下实现原理和部分代码。
实现原理
加载页面的时候,图片一直都是流量大头,针对图片的性能方法也挺多的比如base64、雪碧图等;懒加载也是其中一种,主要原理是将非首屏的图片src设为一个默认值,然后监听窗口滚动,当图片出现在视窗中时再给他赋予真实的图片地址,这样可以保证首屏的加载速度然后按需加载图片。
具体代码
首先在渲染时,图片引用默认图片,然后把真实地址放在data-*属性上面。
<image src='./../assets/default.png' :data-src='item.allPics' class='lazyloadimg'>
然后是监听滚动,直接用window.onscroll就可以了,但是要注意一点的是类似于window的scroll和resize,还有mousemove这类触发很频繁的事件,最好用节流(throttle)或防抖函数(debounce)来控制一下触发频率。underscore和lodash里面都有封装这两个方法,这里先不多做介绍了。
接着要判断图片是否出现在了视窗里面,主要是三个高度:1,当前body从顶部滚动了多少距离。2,视窗的高度。3,当前图片距离顶部的距离。具体代码如下:
window.onscroll =_.throttle(this.watchscroll, 200); watchscroll () { var bodyScrollHeight = document.body.scrollTop;// body滚动高度 var windowHeight = window.innerHeight;// 视窗高度 var imgs = document.getElementsByClassName('lazyloadimg'); for (var i =0; i < imgs.length; i++) { var imgHeight = imgs[i].offsetTop;// 图片距离顶部高度 if (imgHeight < windowHeight + bodyScrollHeight) { imgs[i].src = imgs[i].getAttribute('data-src'); img[i].className = img[i].className.replace('lazyloadimg','') } } }
结语
大概内容就这么多了,下次可能会补充一下防抖节流源码的实现。最后再补充两个常见的滚动判断:
1.页面滚动离开首屏(这时可显示回到顶部的按钮):
document.body.scrollTop > window.innerHeight
2.页面滚动到底部了(这时可去调接口获取更多内容):
window.scrollY + window.innerHeight > document.body.offsetHeight
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- JavaScript实现页面滚动图片加载(仿lazyload效果)
- JQuery LazyLoad实现图片延迟加载-探究
- Android App中实现图片异步加载的实例分享
- picLazyLoad 实现图片延时加载(包含背景图片)
- scrollLoading插件实现图片延迟懒加载实例包涵html和js代码
- JQuery LazyLoad实现图片延迟加载-探究
- jquery.lazyload 实现图片延迟加载jquery插件
- 图片延迟加载(lazyload)的实现原理
- Android-图片选择,压缩,上传,加载 的实例(图片上传(多图也可),服务器端实现,图片加载(图片轮播实现))
- 图片延迟加载(lazyload)的实现原理
- JQuery LazyLoad实现图片延迟加载-探究
- jQuery实现页面滚动图片等元素动态加载(按需加载的实例)
- jquery.lazyload 实现图片延迟加载jquery插件
- 图片延迟加载(lazyload)的实现原理
- 实例讲解Android中如何实现图片的异步加载功能
- jquery.lazyload 实现图片延迟加载jquery插件
- 如何实现lazyload的图片延迟加载功能(1/2)
- JQuery LazyLoad实现图片延迟加载-探究
- lazyload实现原理(图片延迟加载)
- 图片延迟加载(lazyload)的实现原理