时间:2021-05-25
定义
图片懒加载又称图片延时加载、惰性加载,即在用户需要使用图片的时候加载,这样可以减少请求,节省带宽,提高页面加载速度,相对的,也能减少服务器压力。
惰性加载是程序人性化的一种体现,提高用户体验,防止一次性加载大量数据,而是根据用户需要进行资源的请求。
实现
懒加载的难点在于确定某张图片是否是用户需要的资源,在浏览器中,用户需要的是可视区内的资源,因此我们只需要判断图片是否已经呈现在可视区内,当图片呈现在可视区内时,获取图片的真实地址并赋给该图片即可(图片宽高需要指定,可以利用padding处理)。
判断是否存在于可视区
浏览器视口高度
待加载资源距离视口顶端位置
通过以上两点即可判断图片是否位于可视区内。
var nodes = document.querySelectorAll('img[data-src]'), elem = nodes[0], rect = elem.getBoundingClientRect(), vpHeight = document.documentElement.clientHeight;if(rect.top < vpHeight && rect.bottom>=0) { console.log('show')}之后获取图片的真实地址
<img src="loading.gif" alt="" data-src="1.gif">...<script data-filtered="filtered"> var src = elem.dataset.src;</script>把真实地址赋给图片
var img = new Image();img.onload = function(){ elem.src = img.src;}img.src = src;完整代码
var scrollElement = document.querySelector('.page'), viewH = document.documentElement.clientHeight;function lazyload(){ var nodes = document.querySelectorAll('img[data-src]'); Array.prototype.forEach.call(nodes,function(item,index){ var rect; if(item.dataset.src==='') return; rect = item.getBoundingClientRect(); if(rect.bottom>=0 && rect.top < viewH){ (function(item){ var img = new Image(); img.onload = function(){ item.src = img.src; } img.src = item.dataset.src item.dataset.src = '' })(item) } })}lazyload();scrollElement.addEventListener('scroll',throttle(lazyload,500,1000));function throttle(fun, delay, time) { var timeout, startTime = new Date(); return function() { var context = this, args = arguments, curTime = new Date(); clearTimeout(timeout); if (curTime - startTime >= time) { fun.apply(context, args); startTime = curTime; } else { timeout = setTimeout(fun, delay); } };};总结
以上所述是小编给大家介绍的前端图片懒加载(lazyload)的实现方法(提高用户体验),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
在开发H5项目中有时候会遇到要加载大量图片的情况,利用预加载技术可以提高用户浏览时的体验。1)概念:懒加载也叫延迟加载:JS图片延迟加载,延迟加载图片或符合某些
前言懒加载技术(简称lazyload)并不是新技术,它是js程序员对网页性能优化的一种方案。lazyload的核心是按需加载。在大型网站中都有lazyload的
1.前言 懒加载技术(简称lazyload)并不是新技术,它是js程序员对网页性能优化的一种方案.lazyload的核心是按需加载.在大型网站中都有lazyl
本文主要介绍web前端使用图片懒加载imgLazyLoading,供大家参考,具体内容如下1、html代码//懒加载对象目标代码//引用本地js2、js代码im
单页应用有个无法避免的问题就是首屏加载慢,虽然可以通过gzip、路由懒加载、CDN、提高服务器带宽等手段,首屏加载速度仍然比传统多页应用慢一些。为了提高用户体验