原生JS实现图片懒加载(lazyload)实例
前言
图片懒加载也是比较常见的一种性能优化的方法，最近在用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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
现在又想做一个无缝滚动了，所以在网上找啊找，好多都是相同的，而且调试复杂，好多都不能动，也懒得去细看，终于让我发现了这个，希望能帮到别人：2013-06-06
跟我学习javascript的严格模式，对javascript严格模式进行概述，进入严格模式的方法，以及如何调用和相关语法，感兴趣的小伙伴们可以参考一下2015-11-11
本文给大家分享的是一个在javascript中使用innerhtml输出的时候如何实现换行的小技巧，其实很简单，在需要换行的地方加上\即可2015-08-08
这篇文章主要介绍了JavaScript数据结构中栈的应用之表达式求值问题,详细分析了中缀表达式、后缀表达式等概念、原理与转换方法,以及基于后缀表达式实现的表达式求值相关操作技巧,需要的朋友可以参考下2017-04-04
这篇文章主要为大家详细介绍了原生JS实现拖拽照片墙，实现照片互换位置，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
ES6 javascript中class静态方法、属性与实例属性用法示例
这篇文章主要介绍了ES6 javascript中class静态方法、属性与实例属性用法,结合实例形式分析了ES6中类的静态方法、静态属性概念、功能、使用方法与相关注意事项,需要的朋友可以参考下2017-10-10
这篇文章主要为大家介绍了Json Web Token在前后端实践思考分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
跟我学Nodejs（一）--- Node.js简介及安装开发环境
这篇文章主要介绍了Node.js简介及安装开发环境,需要的朋友可以参考下2014-05-05
这篇文章主要为大家详细介绍了springMVC结合AjaxForm上传文件的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-07-07
本篇主要是对js二维数组排序的简单示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
最新评论