图片懒加载(lazyload)的几种方式

背景

当页面中有很多图片时，全部加载需要很多时间，而且会消耗很多渲染资源，为了解决这个问题，加强用户体验，我们先将看得到的区域中的图片加载，也就是可视化区域加载，剩余部分等之后再加载。

原理

一个图片就是一个 <img> 标签，浏览器会根据 <img> 标签的 src 属性来发起请求，只要我们不给 src 赋值，或者赋值一个很小的加载图片，使用一个暂时的属性来保存图片的 src ，比如 data-src (可以用其他的名字，只要不会发送http请求就行），当图片进入可视化区域后，再把 data-src 赋值给 src 。

示例

<img data-src="@/assets/imgs/test.jpg" src="@/assets/imgs/login.jpg">

1.e.offsetTop

e代表图片元素，判断图片是否进入可视区域

e.offsetTop < document.body.clientHeight + document.body.scrollTop

 data(){return{flag: true}},created() {this.throttle(this.lazyLoad, 3000)()  //首次进入加载},mounted() {const that = this;window.addEventListener('scroll',()=>{that.throttle(that.lazyLoad, 2000)()})},methods:{//节流优化throttle(fn, delay){const that = this;return function () {if (!that.flag) return;that.flag = false;  //没执行过就一直是false，会直接returnsetTimeout(() => {fn.apply(that, arguments);that.flag = true; //setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环。当定时器回调函数没有执行的时候标记永远是false，在开头被return掉，从而达到回流效果}, delay);}},lazyLoad(){let images = document.getElementsByTagName('img')  //加定时器的目的是为了让images能够遍历到setTimeout(()=>{for(let i =0;i<images.length;i++){if(images[i].offsetTop<document.body.clientHeight + document.body.scrollTop){   images[i].src = images[i].dataset.src;}}},300)}}

2.e.getBoundingRect

e.getBoundingClientRect() 方法返回一个 DOMRect 对象，其提供了元素的大小及其相对于视口的位置。与offsetTop方法类似，只是改变了判断图片元素是否在可视区域的计算方式。

e.getBoundingClientRect().top<document.body.clientHeight

 data(){return{flag: true}},created() {this.throttle(this.lazyLoad, 3000)()  //首次进入加载},mounted() {const that = this;window.addEventListener('scroll',()=>{that.throttle(that.lazyLoad, 2000)()})},methods:{//节流优化throttle(fn, delay){const that = this;return function () {if (!that.flag) return;that.flag = false;  //没执行过就一直是false，会直接returnsetTimeout(() => {fn.apply(that, arguments);that.flag = true; //setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环。当定时器回调函数没有执行的时候标记永远是false，在开头被return掉，从而达到回流效果}, delay);}},lazyLoad(){let images = document.getElementsByTagName('img')//加定时器的目的是为了让images能够遍历到setTimeout(()=>{for(let i =0;i<images.length;i++){if(images[i].getBoundingClientRect().top<document.body.clientHeight){   //getBoundingClientRect().top 元素的上边相对浏览器视窗的位置如果小于可视窗口的高度images[i].src = images[i].dataset.src;}}},300)}}

3. IntersectionObserver

交叉观察器，自动观察指定对象是否进入可视区域

let observe = new IntersectionObserver(callback, option);

created() {this.intersectionObserver();
},
methods:{intersectionObserver(){let images = document.getElementsByTagName('img');const observer = new IntersectionObserver((imgs) => {console.log('imgs===', imgs)// imgs: 目标元素集合imgs.forEach((img) => {// img.isIntersecting代表目标元素可见，可见的时候给src赋值if (img.isIntersecting) {const item = img.targetitem.src = item.dataset.src//解除对img元素的观察observer.unobserve(item);}})})//定时器和Array.from的目的是让images可遍历setTimeout(()=>{Array.from(images).forEach(item => {//观察img元素observer.observe(item);})},300)}
}

4.vue-lazyload库

(1)安装

npm install vue-lazyload -S

(2)全局引用并使用

import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)

(3)使用

将 :src='xxx' 改成 vue-lazy='xxx'

图片懒加载(lazyload)的几种方式相关推荐

前端如何实现图片懒加载(lazyload) 提高用户体验
定义图片懒加载又称图片延时加载.惰性加载,即在用户需要使用图片的时候加载,这样可以减少请求,节省带宽,提高页面加载速度,相对的,也能减少服务器压力. 惰性加载是程序人性化的一种体现,提高用户体验,防 ...
图片懒加载 lazyload
目录了解代码效果了解图片懒加载是一种网页性能优化的方法,能够极大的提升用户的体验效果,现代一张图片都有可能是几兆的问题,加入100张图片你进入页面难道就直接全部请求,这得要多卡,所以使用图片 ...
图片懒加载的原理--三种方法实现
1. 图片懒加载的背景类似于大型的淘宝商城.京东等网页,设计大量的商品图片信息,如果我们使页面包含的所有图片一次性加载完成,那用户体验很差. 目前流行的做法是滚动动态加载,也就是懒加载,显示在屏幕之 ...
图片懒加载——lazyload
vue-lazyload - npm 上面链接为官方指导 1.安装vue2所兼容的版本 npm i vue-lazyload 2.在main.js中引入插件和图片 // 引入懒加载插件,引入图片 im ...
【UN-JS-工具类】懒加载的实现 -- 两种方式 --- 一种5行JS实现懒加载
懒加载的实现 (两种方式) 方法一:scroll + getBoundingClientRect 方法二:IntersectionObserver(推荐) codepen 展示 lazyLoad-sc ...
JavaScript判断图片是否加载完成的三种方式
一.load事件 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <!DOCTYPE HTML> <html> <head> ...
JS实现图片懒加载效果
文章目录前言一.图片实现懒加载步骤二.案例练习(三国女将) 1. html 代码 2. css 代码 3. js 代码执行结果前言懒加载时一种也页面效果,可以提高页面加载速率,并降低服务器 ...
[js] 图片懒加载
懒加载使用场景在一些图片量比较大的场景(电商首页,小程序首页等),如果我们打开页面时就加载所有的图片,那势必会导致页面的卡顿以及白屏,给用户不好的体验,导致用户流失. 但是我们仔细想一下,用户真的需 ...
js 图片懒加载最好的方法
图片懒加载多种方法第一种是循环遍历img属性,判断每一个img离顶部的高度减去屏幕的高度是否大于0,小于0的话就就出现在屏幕上了,我们就更改属性显示图片,这种有弊端,因为是监听滚动条,相等于实时监 ...

图片懒加载(lazyload)的几种方式

图片懒加载(lazyload)的几种方式相关推荐

最新文章

热门文章