JavaScript实现图片懒加载的方法分析
2018-07-05 09:23
781 查看
本文实例讲述了JavaScript实现图片懒加载的方法。分享给大家供大家参考,具体如下:
懒加载是非常实用的提升网页性能的方式,当访问一个页面的时候,只显示可视区域内的图片,其它的图片只有出现在可视区域内的时候才会被请求加载。
我们现在用原生的js实现简单的图片懒加载,主要利用的原理就是先不给设置src,而是把图片的路径放在data-src中,等待图片被加载的时候将路径取出放到src中。
HTML代码
<div class="container"> <div class="img-area"> <img class="my-photo" alt="loading" data-src="img/img1.png"> </div> <div class="img-area"> <img class="my-photo" alt="loading" data-src="img/img2.png"> </div> <div class="img-area"> <img class="my-photo" alt="loading" data-src="img/img3.png"> </div> <div class="img-area"> <img class="my-photo" alt="loading" data-src="img/img4.png"> </div> <div class="img-area"> <img class="my-photo" alt="loading" data-src="img/img5.png"> </div> </div>
判断元素是否在可视区域
方法一:
1. 获取屏幕可视区高度:
document.documentElement.clientHeight
2. 获取元素距顶部的高度:
element.offsetTop
3. 获取滚动高度:
document.documentElement.scrollTop
4. 若满足:2-3<1,那么元素就出现在可视区域
方法二:
1. 获取元素到可视区域顶部的距离:
var bound = element.getBoundingClientRect()
2. 获取可视区域的高度:
window.innerHeight
3. 若满足
bound.top<=window.innerHeight,那么元素就出现在可视区域
方法三:
利用
IntersectionObserver函数自动观察元素是否在可视区域内
var watch = new IntersectionObserver(callback,option); //开始观察 watch.observe(el); //停止观察 watch.unobserve(el); //关闭观察器 watch.disconnect();
js代码
第一种很多人都用过,所以我们就用第二种写一下
//判断图片是否出现在可视区域内 function isInSight(el) { const bound = el.getBoundingClientRect(); const clientHeight = window.innerHeight; return bound.top <= clientHeight + 100; } //加载图片 let index = 0; function checkImgs() { const imgs = document.querySelectorAll('.my-photo'); for( let i = index; i < imgs.length; i++){ if(isInSight(imgs[i])){ loadImg(imgs[i]); index = i; } } } function loadImg(el) { if(!el.src){ const source = el.dataset.src; el.src = source; } } //函数节流 //函数节流是很重要的思想,可以防止过于频繁的操作dom function throttle(fn,mustRun = 500) { const timer = null; let previous = null; return function () { const now = new Date(); const context = this; const args = arguments; if(!previous){ previous = now; } const remaining = now -previous; if(mustRun && remaining >= mustRun){ fn.apply(context,args); previous = now; } } } //调用函数 window.onload=checkImgs; window.onscroll = throttle(checkImgs);
我们在用第三种方法写一个demo
function checkImgs() { const imgs = Array.from(document.querySelectorAll(".my-photo")); imgs.forEach(item => io.observe(item)); } function loadImg(el) { if (!el.src) { const source = el.dataset.src; el.src = source; } } const io = new IntersectionObserver(ioes => { ioes.forEach(ioe => { const el = ioe.target; const intersectionRatio = ioe.intersectionRatio; if (intersectionRatio > 0 && intersectionRatio <= 1) { loadImg(el); } el.onload = el.onerror = () => io.unobserve(el); }); });
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript图片操作技巧大全》、《JavaScript运动效果与技巧汇总》、《JavaScript切换特效与技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
您可能感兴趣的文章:
- 基于javascript实现图片懒加载
- JavaScript实现图片懒加载(Lazyload)
- 快速实现JS图片懒加载(可视区域加载)示例代码
- 解析javascript图片懒加载与预加载的分析总结
- JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
- Javascript实现图片懒加载插件的方法
- js前端实现图片懒加载(lazyload)的两种方式
- 深入研究jQuery图片懒加载 lazyload.js使用方法
- javascript瀑布流式图片懒加载实例解析与优化
- 原生JS实现图片懒加载(lazyload)实例
- 图片懒加载imgLazyLoading.js使用详解
相关文章推荐
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法及优缺点分析
- CSS和JavaScript以及Ajax实现预加载图片的方法及优缺点分析
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法及优缺点分析
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法
- JavaScript实现判断图片是否加载完成的3种方法整理
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法
- 图片滚动特效实现方法的分析(JavaScript)
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法
- 原生javaScript实现图片延时加载的方法