前端如何实现图片懒加载(lazyload) 提高用户体验
定义
图片懒加载又称图片延时加载、惰性加载,即在用户需要使用图片的时候加载,这样可以减少请求,节省带宽,提高页面加载速度,相对的,也能减少服务器压力。 惰性加载是程序人性化的一种体现,提高用户体验,防止一次性加载大量数据,而是根据用户需要进行资源的请求。
实现
懒加载的难点在于确定某张图片是否是用户需要的资源,在浏览器中,用户需要的是可视区内的资源,因此我们只需要判断图片是否已经呈现在可视区内,当图片呈现在可视区内时,获取图片的真实地址并赋给该图片即可(图片宽高需要指定,可以利用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>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.srcitem.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);}};
};
原文链接 :http://mp.weixin.qq.com/s/W8qAWARdyacrTW07NBPXFA
前端如何实现图片懒加载(lazyload) 提高用户体验相关推荐
- 图片懒加载 lazyload
目录 了解 代码 效果 了解 图片懒加载是一种网页性能优化的方法,能够极大的提升用户的体验效果,现代一张图片都有可能是几兆的问题,加入100张图片你进入页面难道就直接全部请求,这得要多卡,所以使用图片 ...
- 图片懒加载——lazyload
vue-lazyload - npm 上面链接为官方指导 1.安装vue2所兼容的版本 npm i vue-lazyload 2.在main.js中引入插件和图片 // 引入懒加载插件,引入图片 im ...
- 图片懒加载(lazyload)的几种方式
背景 当页面中有很多图片时,全部加载需要很多时间,而且会消耗很多渲染资源,为了解决这个问题,加强用户体验,我们先将看得到的区域中的图片加载,也就是 可视化区域 加载,剩余部分等之后再加载. 原理 ...
- [js] 图片懒加载
懒加载使用场景 在一些图片量比较大的场景(电商首页,小程序首页等),如果我们打开页面时就加载所有的图片,那势必会导致页面的卡顿以及白屏,给用户不好的体验,导致用户流失. 但是我们仔细想一下,用户真的需 ...
- JQuery实现网页图片懒加载
使用img标签加载图片,在网页上显示图片,这里就简单的设置一下样式了,主要目的是展示图片的不同加载方式. 1.普通实现方式 普通的实现方式就是不做任何处理,需要使用到图片时就去加载图片,这些图片一般存 ...
- JS实现图片懒加载效果
文章目录 前言 一.图片实现懒加载步骤 二.案例练习(三国女将) 1. html 代码 2. css 代码 3. js 代码 执行结果 前言 懒加载时一种也页面效果,可以提高页面加载速率,并降低服务器 ...
- 图片太多加载过慢?学学图片懒加载吧
实验介绍 我们在浏览图片较多的网页时,有没有想过这些图片是如何成功展示的呢?比如像这样的图片素材网站: 这样的网页拥有成千上万的图片资源,如何优化网页性能成为了开发人员不得不思考的技术问题. 不难发现 ...
- 什么事图片懒加载?如何实现图片懒加载?
随着移动设备和网络技术的不断发展,网页设计也在不断地进化.其中,一项重要的技术就是图片懒加载(Lazy Load),它可以提高网站的加载速度和用户体验.本文将深入探讨图片懒加载的定义.原理.优势.实现 ...
- 微信小程序优化:如何实现图片懒加载?
前言 当我们在使用微信小程序浏览图片时,不可避免地会遇到加载缓慢的情况.这不仅会影响用户体验,还会耗费用户的流量.那么,有没有一种方法可以让图片在用户需要时再进行加载,从而提升用户体验和减少流量消耗呢 ...
最新文章
- iPhone全球技术巡讲北京站,WWDRChina 2009 Beijing
- Facebook表示将认真对待平台上严重的服装虚假广告问题
- 试题 历届试题 买不到的数目(dp/数学)
- spark java8 scala_在 Ubuntu16.04 中搭建 Spark 单机开发环境 (JDK + Scala + Spark)
- 产品设计:APP个人信息保护指引
- 1.登录mysql数据库_MySql使用全记录1 -----使用命令登录数据库
- mysql 时间_MySQL 日期时间
- JAVA day03 数组,方法
- 面试官是如何看程序员的简历
- (jQuery)插件开发模式
- tmux使用(程序员适用)
- 福建高中计算机会考知识点,福建省高中信息技术会考《信息技术基础》复习提纲.doc...
- 解决启动eureka报错Unable to start web ... nested exception is org.springframework.boot.web.server.WebS
- 变限积分 matlab,积分变限函数
- 电脑设置U盘启动快捷键
- 2017年18岁的北京文科状元父母都是外交官,关于高考,他说出了我们竭力回避的戳心真相
- linux ls和ll命令学习小结
- 设计模式讲解与代码实践(二十三)——模板方法
- 电脑通过android手机上网 .
- NOKOV度量动捕软件教程(5):数据处理