面试官刁难系列一:手写图片懒加载代码

2024-01-12 09:08

本文主要是介绍面试官刁难系列一:手写图片懒加载代码,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前言

今天是跟面试官开撕的第一天,当你过五关斩六将终于来到面试官面前时,他可能在面试你之前写过如下的代码:

<el-image :src="url" lazy></el-image>

没错,就是这么轻描淡写的一句代码,他心里却有了不一样的想法。lazy 这个属性它是如何实现图片懒加载的?请说说你的思路。

头脑顿时一场空。"只怪我平时只复制粘贴写业务代码了,草率了!"你可能此时是这样想的。幸运的是,今天是开撕的一天,今天就甩出你自信的代码给面试官。

element-plus实现思路

翻看Element-plus源码得知在packages/comonents/image下的src找到index.vue页面,lazy属性是通过子父组件形式的props方式传递进来的:

然后在 onMounted 函数里判断是否使用了lazy,使用的话执行addLazyLoadListener事件,否则直接加载图片出来。

onMounted(() => {if (props.lazy) {nextTick(addLazyLoadListener)} else {//后面会讲到loadImage()}
})

接着就来到了这里:

const { scrollContainer } = props 这句代码就将父组件传入的props拿到。接着就是获取滚动元素的DOM了。来到第235行代码:

_lazyLoadHandler = throttle(handleLazyLoad, 200)

我们看到这里使用了throttle节流函数,引入的是throttle-debounce库,传入的200作为间歇时间。库文件地址:(https://www.npmjs.com/package/throttle-debounce)

import throttle from 'lodash/throttle'

接着使用setTimeout函数在100浩渺后执行handleLazyLoad方法。

function handleLazyLoad() {if (isInContainer(container.value, _scrollContainer)) {loadImage()removeLazyLoadListener()}
}

这里注意isInContainer这个方法,它是从*@element-plus/utils/dom*导入的。我痛过引入路径找到这个方法。

export const isInContainer = (el: HTMLElement,container: HTMLElement,
): boolean => {if (isServer || !el || !container) return falseconst elRect = el.getBoundingClientRect()let containerRect: Partial<DOMRect>if ([window, document, document.documentElement, null, undefined].includes(container,)) {containerRect = {top: 0,right: window.innerWidth,bottom: window.innerHeight,left: 0,}} else {containerRect = container.getBoundingClientRect()}return (elRect.top < containerRect.bottom &&elRect.bottom > containerRect.top &&elRect.right > containerRect.left &&elRect.left < containerRect.right)
}

可以看到使用isInContainer方法时传入的container.value, _scrollContainer使用getBoundingClientRect这个API来比较当前Image组件是否在当前滚动区域的可视区。这个API可以获取:

  • elRect.top:元素上边到视窗上边的距离
  • elRect.right:元素右边到视窗左边的距离
  • elRect.bottom:元素下边到视窗上边的距离
  • elRect.left:元素左边到视窗左边的距离

当判断当前Image组件在滚动可视区时才执行loadImage方法。

const loadImage = () => {if (isServer) returnconst attributes = attrs.value// reset statusloading.value = truehasLoadError.value = false//创建一个img实例const img = new Image()//onload 事件在图片加载完成后立即执行img.onload = (e) => handleLoad(e, img)img.onerror = handleError// bind html attrs// so it can behave consistently//这句代码是将设置在属性全部设置在img标签上Object.keys(attributes).forEach((key) => {// avoid onload to be overwrittenif (key.toLowerCase() === 'onload') returnconst value = attributes[key]img.setAttribute(key, value)})img.src = props.src
}

这样就完成了懒加载的大概过程。

自行手写图片懒加载实现思路

我们写一个简易的图片懒加载版本。当不使用懒加载直接给src设置图片路径时,倘若图片太大或者资源还没加载完成,img标签就会出现空白情况,为此我们需要利用上面提到的onload事件,等图片资源加载完成我再设置src属性为图片的地址那就不会出现空白情况啦。

手写代码之前,我们需要知道的是:什么是自执行函数?

我们先来看看普通的函数。

//定义一个函数
let total  =0
function sum (a,b) {return total = a + b
}

Q:那么我们想执行这个函数需要怎么做呢?
A:如果想执行它,就必须得调用它,并且还得给它传参。

const hh = sum(1,2)
console.log(hh) // =>3

自执行函数呢?自执行函数就是当它被定义出来,就会自动执行的函数。不需要调用,传参也很方便。就上面的函数,用自执行函数定义就是这样:

let total = 0 
(function sum (a,b) {return total = a + b
})(1,2)
console.log(total) // => 3

所以,这就很有用处了。

const myImage = (function(){// 创建一个img标签let imgNode = document.createElement('img')// 将创建好的img标签添加到body上document.body.appendChild(imgNode)// new一个Image实例let img = new Image()// 图片资源加载完成后将地址设置给上面创建好的img标签的src属性img.onload = function() {imgNode.src = img.src}return {setSrc(src){// 首先将加载中的图片设定给img的src属性imgNode.src = '图片加载中的图片(可本地地址)'// 将传入的地址缓存到上面创建的实例的src中img.src = src}}
})()// 自执行函数
// 使用
myImage.setSrc('https://www.baidu.com/img/bd_logo1.png?where=super')

调戏面试官的一天就这么轻松愉快地结束了。当你面试后真的遇到了别忘记回来点个赞哦。

文章来源于公众号《前端发现》

这篇关于面试官刁难系列一:手写图片懒加载代码的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/597370

相关文章

Python FastAPI+Celery+RabbitMQ实现分布式图片水印处理系统

《PythonFastAPI+Celery+RabbitMQ实现分布式图片水印处理系统》这篇文章主要为大家详细介绍了PythonFastAPI如何结合Celery以及RabbitMQ实现简单的分布式... 实现思路FastAPI 服务器Celery 任务队列RabbitMQ 作为消息代理定时任务处理完整

springboot循环依赖问题案例代码及解决办法

《springboot循环依赖问题案例代码及解决办法》在SpringBoot中,如果两个或多个Bean之间存在循环依赖(即BeanA依赖BeanB,而BeanB又依赖BeanA),会导致Spring的... 目录1. 什么是循环依赖?2. 循环依赖的场景案例3. 解决循环依赖的常见方法方法 1:使用 @La

使用C#代码在PDF文档中添加、删除和替换图片

《使用C#代码在PDF文档中添加、删除和替换图片》在当今数字化文档处理场景中,动态操作PDF文档中的图像已成为企业级应用开发的核心需求之一,本文将介绍如何在.NET平台使用C#代码在PDF文档中添加、... 目录引言用C#添加图片到PDF文档用C#删除PDF文档中的图片用C#替换PDF文档中的图片引言在当

详解C#如何提取PDF文档中的图片

《详解C#如何提取PDF文档中的图片》提取图片可以将这些图像资源进行单独保存,方便后续在不同的项目中使用,下面我们就来看看如何使用C#通过代码从PDF文档中提取图片吧... 当 PDF 文件中包含有价值的图片,如艺术画作、设计素材、报告图表等,提取图片可以将这些图像资源进行单独保存,方便后续在不同的项目中使

C#使用SQLite进行大数据量高效处理的代码示例

《C#使用SQLite进行大数据量高效处理的代码示例》在软件开发中,高效处理大数据量是一个常见且具有挑战性的任务,SQLite因其零配置、嵌入式、跨平台的特性,成为许多开发者的首选数据库,本文将深入探... 目录前言准备工作数据实体核心技术批量插入:从乌龟到猎豹的蜕变分页查询:加载百万数据异步处理:拒绝界面

Java实现文件图片的预览和下载功能

《Java实现文件图片的预览和下载功能》这篇文章主要为大家详细介绍了如何使用Java实现文件图片的预览和下载功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... Java实现文件(图片)的预览和下载 @ApiOperation("访问文件") @GetMapping("

用js控制视频播放进度基本示例代码

《用js控制视频播放进度基本示例代码》写前端的时候,很多的时候是需要支持要网页视频播放的功能,下面这篇文章主要给大家介绍了关于用js控制视频播放进度的相关资料,文中通过代码介绍的非常详细,需要的朋友可... 目录前言html部分:JavaScript部分:注意:总结前言在javascript中控制视频播放

Spring Boot 配置文件之类型、加载顺序与最佳实践记录

《SpringBoot配置文件之类型、加载顺序与最佳实践记录》SpringBoot的配置文件是灵活且强大的工具,通过合理的配置管理,可以让应用开发和部署更加高效,无论是简单的属性配置,还是复杂... 目录Spring Boot 配置文件详解一、Spring Boot 配置文件类型1.1 applicatio

Spring Boot 3.4.3 基于 Spring WebFlux 实现 SSE 功能(代码示例)

《SpringBoot3.4.3基于SpringWebFlux实现SSE功能(代码示例)》SpringBoot3.4.3结合SpringWebFlux实现SSE功能,为实时数据推送提供... 目录1. SSE 简介1.1 什么是 SSE?1.2 SSE 的优点1.3 适用场景2. Spring WebFlu

java之Objects.nonNull用法代码解读

《java之Objects.nonNull用法代码解读》:本文主要介绍java之Objects.nonNull用法代码,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录Java之Objects.nonwww.chinasem.cnNull用法代码Objects.nonN