图片加载方法、装置及存储介质.pdf

(19)中华人民共和国国家知识产权局(12)发明专利申请(10)申请公布号CN114327720A(43)申请公布日2022.04.12(21)申请号202111621402.X(22)申请日2021.12.28(71)申请人深圳乐信软件技术有限公司地址518000广东省深圳市南山区粤海街道科苑南路3099号中国储能大厦第24层(72)发明人柯文涛李磊磊李伟亮(74)专利代理机构北京品源专利代理有限公司11332代理人潘登(51)Int.Cl.G06F9/451(2018.01)G06F9/445(2018.01)G06F16/955(2019.01)G06F16/957(2019.01)权利要求书2页说明书10页附图5页(54)发明名称图片加载方法、装置及存储介质(57)摘要本申请公开了一种图片加载方法、装置及存储介质，涉及计算机技术领域，通过拦截图片加载请求修改图片链接的方式，可以避免因不同开发人员开发的组件加载出来的图片尺寸的差异导致加载出来的图片尺寸过大的问题，从而可以缩短首屏加载时间。该方法包括：在用户访问页面的情况下，获取目标组件对应的图片链接，并拦截目标组件对应的图片加载请求；基于可视区域的显示宽度和显示高度，确定链接调整参数；基于链接调整参数，对图片链接进行调整，得到优化后图片链接；基于优化后图片链接在可视区域内进行图片的加载。CN114327720ACN114327720A权利要求书1/2页1.一种图片加载方法，其特征在于，包括：在用户访问页面的情况下，获取目标组件对应的图片链接，并拦截所述目标组件对应的图片加载请求；基于可视区域的显示宽度和显示高度，确定链接调整参数；基于所述链接调整参数，对所述图片链接进行调整，得到优化后图片链接；基于所述优化后图片链接在所述可视区域内进行图片的加载。2.根据权利要求1所述的图片加载方法，其特征在于，所述基于可视区域的显示宽度和显示高度，确定链接调整参数，包括：基于所述显示宽度和宽度调整参数，确定图片加载宽度；并且，基于所述显示高度和高度调整参数，确定图片加载高度；基于所述图片加载宽度和所述图片加载高度，确定所述链接调整参数。3.根据权利要求1所述的图片加载方法，其特征在于，所述基于可视区域的显示宽度和显示高度，确定链接调整参数之前，所述方法还包括：获取页面的DOM节点的宽度和所述DOM节点的高度；在确定所述DOM节点的宽度和所述DOM节点的高度均不为0的情况下，根据所述DOM节点的宽度确定所述显示宽度，且根据所述DOM节点的高度确定所述显示高度。4.根据权利要求3所述的图片加载方法，其特征在于，所述基于所述链接调整参数，对所述图片链接进行调整之前，所述方法还包括：在确定所述DOM节点的宽度为0的情况下，根据所述DOM节点的高度和自适应宽度，确定所述链接调整参数；在确定所述DOM节点的高度为0的情况下，根据所述DOM节点的宽度和自适应高度，确定所述链接调整参数。5.根据权利要求1所述的图片加载方法，其特征在于，所述基于可视区域的显示宽度和显示高度，确定链接调整参数，包括：在确定页面的浏览器支持WebP格式的情况下，基于所述WebP格式的后缀、所述显示宽度和所述显示高度，确定所述链接调整参数。6.根据权利要求1‑5任意一项所述的图片加载方法，其特征在于，所述获取目标组件对应的图片链接，并拦截所述目标组件对应的图片加载请求，包括：在图片的加载方式为基于src引用的加载方式的情况下，遍历Vue的DOM节点获取所述图片链接，并通过Vue中的预设API重写src属性，对所述图片加载请求进行拦截；在图片的加载方式为懒加载的方式的情况下，修改lazyload插件中的filter参数，对所述图片加载请求进行拦截。7.根据权利要求6所述的图片加载方法，其特征在于，所述遍历Vue的DOM节点获取所述图片链接，包括：基于变动观察器监听DOM节点的加载，在确定DOM节点在首屏高度内的情况下，遍历Vue的DOM节点获取所述图片链接。8.一种图片加载装置，其特征在于，包括：拦截模块，用于在用户访问页面的情况下，获取目标组件对应的图片链接，并拦截所述目标组件对应的图片加载请求；2CN114327720A权利要求书2/2页确定模块，用于基于可视区域的显示宽度和显示高度，确定链接调整参数；调整模块，基于所述确定模块确定的链接调整参数，对所述图片链接进行调整，得到优化后图片链接；图片加载模块，用于基于所述调整模块调整得到的所述优化后图片链接在所述可视区域内进行图片的加载。9.一种图片加载装置，其特征在于，包括存储器、处理器、总线和通信接口；所述存储器用于存储计算机执行指令，所述处理器与所述存储器通过所述总线连接；当所述图片加载装置运行时，处理器执行所述存储器存储的所述计算机执行指令，以使所述图片加载装置执行如