JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)

目录:

  • 懒加载的意义(为什么要使用懒加载)
  • 原理
  • 代码

在上篇文章给大家介绍了图片懒加载(Lazyload),大家可以参考下。

懒加载的意义(为什么要使用懒加载)

页面加载速度影响最大的就是图片,一张普通的图片可以达到几M的大小,而代码也许就只有几十KB。当页面图片很多时,页面的加载速度缓慢,几S钟内页面没有加载完成,也许会失去很多的用户

所以,对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载, 等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提升,也提高了用户体验。

display: none">

原理

页面中的img标签src指向一张小图片或者src为空,然后定义data-src(这个属性可以自定义命名,我才用data-src)属性指向真实的图片。src指向一张认的图片,否则当src为空时也会向服务器发送一次请求。可以指向loading的地址。

注:图片要指定宽高

rush:js;">

当载入页面时,先把可视区域内的img标签的data-src属性值负给src,然后监听滚动事件,把用户即将看到的图片加载。这样便实现了懒加载。

代码

在写代码前,需要了解各种高度。先看这篇文章scrollTop,offsetTop,scrollLeft,offsetLeft

rush:js;"> <Meta charset="UTF-8"> Document aimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt=""> aimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt=""> aimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt=""> aimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt=""> aimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt=""> aimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt=""> aimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt=""> aimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt=""> aimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt=""> aimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt=""> aimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">

JavaScript

rush:js;">

jQuery

rush:js;">

使用节流函数进行性能优化

如果直接将函数绑定在scroll事件上,当页面滚动时,函数会被高频触发,这非常影响浏览器的性能

我想实现限制触发频率,来优化性能

节流函数:只允许一个函数在N秒内执行一次。下面是一个简单的节流函数

= time) { fun.apply(context,args); startTime = curTime; // 没达到触发间隔,重新设定定时器 } else { timeout = setTimeout(fun,delay); } }; }; // 实际想绑定在 scroll 事件上的 handler function lazyload(event) {} // 采用了节流函数 window.addEventListener('scroll',throttle(lazyload,500,1000));

以上所述是小编给大家介绍的JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

相关文章

什么是深拷贝与浅拷贝?深拷贝与浅拷贝是js中处理对象或数据...
前言 今天复习了一些前端算法题,写到一两道比较有意思的题:...
最近在看回JavaScript的面试题,this 指向问题是入坑前端必须...
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面