欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

javascript实现图片懒加载实例

程序员文章站 2023-12-22 10:28:04
...
图片懒加载也是比较常见的一种性能优化的方法,本篇文章主要介绍了原生JS实现图片懒加载(lazyload)实例,这里整理了详细的代码,有需要的小伙伴可以参考下

前言

图片懒加载也是比较常见的一种性能优化的方法,最近在用vue做一个新闻列表的客户端时也用到了,这里就简单介绍下实现原理和部分代码。

实现原理

加载页面的时候,图片一直都是流量大头,针对图片的性能方法也挺多的比如base64、雪碧图等;懒加载也是其中一种,主要原理是将非首屏的图片src设为一个默认值,然后监听窗口滚动,当图片出现在视窗中时再给他赋予真实的图片地址,这样可以保证首屏的加载速度然后按需加载图片。

javascript实现图片懒加载实例

具体代码

首先在渲染时,图片引用默认图片,然后把真实地址放在data-*属性上面。

<image src='./../assets/default.png' :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('src');
   img[i].className = img[i].className.replace('lazyloadimg','')
  }
  }
 }

以上就是javascript实现图片懒加载实例的详细内容,更多请关注其它相关文章!

上一篇:

下一篇: