山海科技发展网

07月02日科技常识:简单高效实现一个按需加载图片的逻辑

导读 摘要 今天小编跟大家讲解下有关简单高效实现一个按需加载图片的逻辑 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关简单高...
摘要 今天小编跟大家讲解下有关简单高效实现一个按需加载图片的逻辑 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关简单高效实现

今天小编跟大家讲解下有关简单高效实现一个按需加载图片的逻辑 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关简单高效实现一个按需加载图片的逻辑 的相关资料,希望小伙伴们看了有所帮助。

需求:根据页面滚动,当图片进入视野,就开始加载,否则不加载任何图片。

代码:

//页面加载完成时先调用一下,首屏内的图片。loadImg();document.addEventListener('scroll', function(e) { //跟着滚动,继续加载剩下的图片 loadImg()})function loadImg(){ //slice可以将类数组转化成数组对象 [].slice.call(document.querySelectorAll('[data-src]')).forEach(function(item) { // 判断元素是否已经进入视野 if (item.getBoundingClientRect().y<=innerHeight) { //设置src item.src = item.getAttribute('data-src'); //删除data-src属性,可以减少querySelectorAll的查询次数 item.removeAttribute('data-src'); } })}<img data-src="http://www.aidi.net.cn/article/detial/4467/xxx">

代码简单,却很通用,很实用。方便扩展

来源:爱蒂网