CN118035582A - 图片加载方法及装置、存储介质、电子设备 - Google Patents
图片加载方法及装置、存储介质、电子设备 Download PDFInfo
- Publication number
- CN118035582A CN118035582A CN202410194244.1A CN202410194244A CN118035582A CN 118035582 A CN118035582 A CN 118035582A CN 202410194244 A CN202410194244 A CN 202410194244A CN 118035582 A CN118035582 A CN 118035582A
- Authority
- CN
- China
- Prior art keywords
- picture
- resource
- target
- page frame
- page
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000011068 loading method Methods 0.000 title claims abstract description 74
- 238000009877 rendering Methods 0.000 claims abstract description 53
- 238000000034 method Methods 0.000 claims abstract description 44
- 238000007781 pre-processing Methods 0.000 claims abstract description 40
- 230000008569 process Effects 0.000 claims abstract description 24
- 230000000977 initiatory effect Effects 0.000 claims abstract description 14
- 230000006870 function Effects 0.000 claims description 82
- 238000012544 monitoring process Methods 0.000 claims description 22
- 108091026890 Coding region Proteins 0.000 claims description 15
- 238000004590 computer program Methods 0.000 claims description 7
- 238000005516 engineering process Methods 0.000 abstract description 3
- 238000010586 diagram Methods 0.000 description 8
- 230000000694 effects Effects 0.000 description 8
- 238000013461 design Methods 0.000 description 6
- 238000012986 modification Methods 0.000 description 4
- 230000004048 modification Effects 0.000 description 4
- 238000004140 cleaning Methods 0.000 description 3
- 230000006399 behavior Effects 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 2
- 230000008878 coupling Effects 0.000 description 2
- 238000010168 coupling process Methods 0.000 description 2
- 238000005859 coupling reaction Methods 0.000 description 2
- 238000011161 development Methods 0.000 description 2
- 238000012423 maintenance Methods 0.000 description 2
- 238000005457 optimization Methods 0.000 description 2
- 238000012545 processing Methods 0.000 description 2
- 230000004044 response Effects 0.000 description 2
- 238000013515 script Methods 0.000 description 2
- 230000006978 adaptation Effects 0.000 description 1
- 238000004891 communication Methods 0.000 description 1
- 238000011109 contamination Methods 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 230000000007 visual effect Effects 0.000 description 1
Landscapes
- Information Transfer Between Computers (AREA)
Abstract
本发明公开了一种图片加载方法及装置、存储介质、电子设备，涉及前端显示技术领域，其中，该方法包括：在页面框架组件中注册元素自定义指令，其中，元素自定义指令用于在使用页面框架组件对浏览器页面进行渲染之前，通过第一钩子函数对目标图片元素进行预处理；通过页面框架组件中的页面框架模板和第一钩子函数对目标图片元素的资源定位地址进行预处理；基于预处理后的资源定位地址向目标服务器发起图片加载请求，并接收目标服务器返回的图片资源；将图片资源渲染至浏览器页面的指定展示位置。本发明解决了相关技术中加载网页图片过程中由于图片标签重复发起加载请求，导致网络延迟的技术问题。
Description
技术领域
本发明涉及前端显示技术领域，具体而言，涉及一种图片加载方法及装置、存储介质、电子设备。
背景技术
Vue自定义指令是Vue.js框架中的一种高度灵活的指令方式，用于扩展HTML(HyperText Markup Language，超文本标记语言)元素的行为和功能，通过编写钩子函数逻辑，可以实现各种复杂操作，例如，DOM(文档对象模型)元素操作、事件监听以及样式修改等，另一方面，在HTML中的图片标签(例如，<img>)用于在网页上显示图像，并通过设置src(source，外部资源)属性来加载图片资源。
然而，如果src出现不当操作(例如，空值、无效路径或JavaScript动态修改)，可能会导致图片标签发起额外且不必要的请求，产生二次请求问题，从而增加网络流量和延迟问题，大大降低用户体验。
针对上述的问题，目前尚未提出有效的解决方案。
发明内容
本发明实施例提供了一种图片加载方法及装置、存储介质、电子设备，以至少解决相关技术中加载网页图片过程中由于图片标签重复发起加载请求，导致网络延迟的技术问题。
根据本发明实施例的一个方面，提供了一种图片加载方法，包括：在页面框架组件中注册元素自定义指令，其中，所述元素自定义指令用于在使用所述页面框架组件对浏览器页面进行渲染之前，通过第一钩子函数对目标图片元素进行预处理；通过所述页面框架组件中的页面框架模板和所述第一钩子函数对所述目标图片元素的资源定位地址进行预处理；基于预处理后的所述资源定位地址向目标服务器发起图片加载请求，并接收所述目标服务器返回的图片资源；将所述图片资源渲染至所述浏览器页面的指定展示位置。
可选地，在通过所述页面框架组件中的页面框架模板和所述第一钩子函数对所述目标图片元素的资源定位地址进行预处理之前，还包括：获取所述页面框架模板中所述目标图片元素的图片元素标签；获取所述图片元素标签的标签属性，其中，所述标签属性至少包括：所述资源定位地址；判断所述资源定位地址的地址字段是否为空，得到判断结果。
可选地，在得到所述判断结果之后，通过所述页面框架组件中的页面框架模板和所述第一钩子函数对所述目标图片元素的资源定位地址进行预处理的步骤，包括：在所述判断结果指示所述地址字段非空的情况下，保留该地址字段中的图片资源索引序列；或者，在所述判断结果指示所述地址字段为空的情况下，通过所述第一钩子函数将预设图片占位符对应的定长编码序列作为图片资源索引序列填充至该地址字段。
可选地，在基于预处理后的所述资源定位地址向目标服务器发起图片加载请求之前，还包括：创建CSS选择器，并基于所述资源定位地址中的所述图片资源索引序列定义所述CSS选择器的样式属性；使用所述CSS选择器对所述浏览器页面的渲染过程中的渲染状态进行监测，得到监测结果。
可选地，在使用所述CSS选择器对所述浏览器页面的渲染过程中的渲染状态进行监测，得到监测结果之前，还包括：在所述CSS选择器中定义所述图片资源的背景色样式属性，其中，所述背景色样式属性的属性内容包括：在监测到所述图片资源未加载完成的情况下，使用目标背景色填充所述指定展示位置，以及，在监测到该图片资源加载完成的情况下，自动隐藏所述目标背景色。
可选地，所述元素自定义指令中的预定义钩子函数还包括：第二钩子函数，在将所述图片资源发送至所述浏览器页面的指定展示位置之后，还包括：在监测到所述浏览器页面中的所有所述图片资源均能够完整显示的情况下，卸载所述页面框架组件；执行所述元素自定义指令，通过第二钩子函数删除浏览器缓存中的所有与所述浏览器页面相关的所述目标图片元素的图片元素标签以及标签属性。
可选地，所述图片元素标签的所述标签属性还包括：图片标识序列，通过所述页面框架组件中的页面框架模板和所述第一钩子函数对所述目标图片元素的资源定位地址进行预处理的步骤，还包括：通过随机编码器和预设编码长度获取随机编码序列；基于所述随机编码序列对所述目标图片元素的图片标识序列进行赋值。
根据本发明实施例的另一方面，还提供了一种图片加载装置，包括：注册单元，用于在页面框架组件中注册元素自定义指令，其中，所述元素自定义指令用于在使用所述页面框架组件对浏览器页面进行渲染之前，通过第一钩子函数对目标图片元素进行预处理；预处理单元，用于通过所述页面框架组件中的页面框架模板和所述第一钩子函数对所述目标图片元素的资源定位地址进行预处理；接收单元，用于基于预处理后的所述资源定位地址向目标服务器发起图片加载请求，并接收所述目标服务器返回的图片资源；渲染单元，用于将所述图片资源渲染至所述浏览器页面的指定展示位置。
可选地，所述图片加载装置还包括：第一获取单元，用于在通过所述页面框架组件中的页面框架模板和所述第一钩子函数对所述目标图片元素的资源定位地址进行预处理之前，获取所述页面框架模板中所述目标图片元素的图片元素标签；第二获取单元，用于获取所述图片元素标签的标签属性，其中，所述标签属性至少包括：所述资源定位地址；判断单元，用于判断所述资源定位地址的地址字段是否为空，得到判断结果。
可选地，所述预处理单元包括：保留模块，用于在得到所述判断结果之后，在所述判断结果指示所述地址字段非空的情况下，保留该地址字段中的图片资源索引序列；填充模块，用于在所述判断结果指示所述地址字段为空的情况下，通过所述第一钩子函数将预设图片占位符对应的定长编码序列作为图片资源索引序列填充至该地址字段。
可选地，所述图片加载装置还包括：创建单元，用于在基于预处理后的所述资源定位地址向目标服务器发起图片加载请求之前，创建CSS选择器，并基于所述资源定位地址中的所述图片资源索引序列定义所述CSS选择器的样式属性；监测单元，用于使用所述CSS选择器对所述浏览器页面的渲染过程中的渲染状态进行监测，得到监测结果。
可选地，所述图片加载装置还包括：定义单元，用于在使用所述CSS选择器对所述浏览器页面的渲染过程中的渲染状态进行监测，得到监测结果之前，在所述CSS选择器中定义所述图片资源的背景色样式属性，其中，所述背景色样式属性的属性内容包括：在监测到所述图片资源未加载完成的情况下，使用目标背景色填充所述指定展示位置，以及，在监测到该图片资源加载完成的情况下，自动隐藏所述目标背景色。
可选地，所述元素自定义指令中的预定义钩子函数还包括：第二钩子函数，所述图片加载装置还包括：卸载单元，用于在将所述图片资源发送至所述浏览器页面的指定展示位置之后，在监测到所述浏览器页面中的所有所述图片资源均能够完整显示的情况下，卸载所述页面框架组件；执行单元，用于执行所述元素自定义指令，通过第二钩子函数删除浏览器缓存中的所有与所述浏览器页面相关的所述目标图片元素的图片元素标签以及标签属性。
可选地，所述图片元素标签的所述标签属性还包括：图片标识序列，所述预处理单元还包括：获取模块，用于通过随机编码器和预设编码长度获取随机编码序列；赋值模块，用于基于所述随机编码序列对所述目标图片元素的图片标识序列进行赋值。
根据本发明实施例的另一方面，还提供了一种计算机可读存储介质，所述计算机可读存储介质包括存储的计算机程序，其中，在所述计算机程序运行时控制所述计算机可读存储介质所在设备执行上述任意一项图片加载方法。
根据本发明实施例的另一方面，还提供了一种电子设备，包括一个或多个处理器和存储器，所述存储器用于存储一个或多个程序，其中，当所述一个或多个程序被所述一个或多个处理器执行时，使得所述一个或多个处理器实现上述任意一项图片加载方法。
本发明中，提出一种图片加载方法，先在页面框架组件中注册元素自定义指令，其中，元素自定义指令用于在使用页面框架组件对浏览器页面进行渲染之前，通过第一钩子函数对目标图片元素进行预处理，再通过页面框架组件中的页面框架模板和第一钩子函数对目标图片元素的资源定位地址进行预处理，然后基于预处理后的资源定位地址向目标服务器发起图片加载请求，并接收目标服务器返回的图片资源，最后将图片资源渲染至浏览器页面的指定展示位置。
本发明中，通过在页面框架组件中注册元素自定义指令，并在元素自定义指令中利用第一钩子函数在渲染前对目标图片元素的资源定位地址进行预处理，进而基于预处理后的资源定位地址向目标服务器请求加载目标图片元素对应的图片资源，接收服务器返回的图片资源并渲染至指定展示位置，完成图片加载，本发明通过在元素自定义指令中定义的钩子函数，能够实现控制图片元素的渲染过程，通过预定义目标图片元素的资源定位地址可以实现控制图片资源的获取路径，进而可以使图片标签以明确的资源定位地址发起图片加载请求，避免由于资源定位地址出错，图片标签重复发起图片加载和渲染请求，导致网络流量增加以及网络延迟加重的问题，进而解决了相关技术中加载网页图片过程中由于图片标签重复发起加载请求，导致网络延迟的技术问题。
附图说明
此处所说明的附图用来提供对本发明的进一步理解，构成本申请的一部分，本发明的示意性实施例及其说明用于解释本发明，并不构成对本发明的不当限定。在附图中：
图1是根据本发明实施例的一种可选的图片加载方法的流程图；
图2是根据本发明实施例的一种可选的基于自定义指令的图片加载方法的流程图；
图3是根据本发明实施例的一种可选的基于自定义指令的图片加载方法的实施效果图；
图4是根据本发明实施例的一种可选的图片加载装置的示意图；
图5是根据本发明实施例的一种用于图片加载方法的电子设备(或移动设备)的硬件结构框图。
具体实施方式
为了使本技术领域的人员更好地理解本发明方案，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分的实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本发明保护的范围。
需要说明的是，本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本发明的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、***、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。
为便于本领域技术人员理解本发明，下面对本发明各实施例中涉及的部分术语或名词做出解释：
超文本标记语言，HyperText Markup Language，简称HTML，一种用于创建网页的标准标记语言，通过使用标签(tag)来描述网页的结构和内容，包括标题、段落、链接、图片等，使得浏览器能够正确显示这些内容。
HTML元素，是指在HTML文档中用于描述文档的结构和内容的标签。
文档对象模型，DOM，是通过解析HTML文档得到的由节点和DOM元素组成的树状结构，其中，DOM元素是指在DOM中用于表示HTML元素的对象，每个DOM元素对应HTML文档中的一个HTML元素，通过操作DOM元素可以实现对文档内容进行动态访问与修改。
Vue自定义指令，一种在Vue.js框架中扩展HTML元素行为和功能的指令，开发者可以通过自定义指令直接操作DOM元素，并在模板中使用指令名称来触发对应的逻辑。
图片占位符，一种用于在网页或应用程序中临时替代实际图片内容的占位符，通常在实际图片加载成功之前显示，为用户提供视觉提示。
img，图片标签，用于在HTML文档中表示在网页图像对应的图像元素。
img二次请求问题，是指在加载网页时由图片标签<img>重复发起的不必要请求。
本发明下述各实施例可应用于各种需要进行网页图片加载和/或应用图片加载的***/应用/设备中，能够实现通过在元素自定义指令定义钩子函数可以实现控制图片元素的渲染过程，通过预定义目标图片元素的资源定位地址可以实现控制图片资源的获取路径，进而可以使图片标签以明确的资源定位地址发起图片加载请求。
下面结合各个实施例来详细说明本发明。
实施例一
根据本发明实施例，提供了一种图片加载方法实施例，需要说明的是，在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机***中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。
图1是根据本发明实施例的一种可选的图片加载方法的流程图，如图1所示，该方法包括如下步骤：
步骤S101，在页面框架组件中注册元素自定义指令，其中，元素自定义指令用于在使用页面框架组件对浏览器页面进行渲染之前，通过第一钩子函数对目标图片元素进行预处理。
步骤S102，通过页面框架组件中的页面框架模板和第一钩子函数对目标图片元素的资源定位地址进行预处理。
步骤S103，基于预处理后的资源定位地址向目标服务器发起图片加载请求，并接收目标服务器返回的图片资源。
步骤S104，将图片资源渲染至浏览器页面的指定展示位置。
通过上述步骤，可以先在页面框架组件中注册元素自定义指令，其中，元素自定义指令用于在使用页面框架组件对浏览器页面进行渲染之前，通过第一钩子函数对目标图片元素进行预处理，再通过页面框架组件中的页面框架模板和第一钩子函数对目标图片元素的资源定位地址进行预处理，然后基于预处理后的资源定位地址向目标服务器发起图片加载请求，并接收目标服务器返回的图片资源，最后将图片资源渲染至浏览器页面的指定展示位置。
本发明实施例中，通过在页面框架组件中注册元素自定义指令，并在元素自定义指令中利用第一钩子函数在渲染前对目标图片元素的资源定位地址进行预处理，进而基于预处理后的资源定位地址向目标服务器请求加载目标图片元素对应的图片资源，接收服务器返回的图片资源并渲染至指定展示位置，完成图片加载，本发明通过在元素自定义指令中定义钩子函数，能够实现控制图片元素的渲染过程，通过预定义目标图片元素的资源定位地址可以实现控制图片资源的获取路径，进而可以使图片标签以明确的资源定位地址发起图片加载请求，避免由于资源定位地址出错，图片标签重复发起图片加载和渲染请求，导致网络流量增加以及网络延迟加重的问题，进而解决了相关技术中加载网页图片过程中由于图片标签重复发起加载请求，导致网络延迟的技术问题。
下面结合上述各步骤对本发明实施例进行详细说明。
本发明实施例的实施主体可以是图片加载***，通过在元素自定义指令定义钩子函数可以实现控制图片元素的渲染过程，通过预定义目标图片元素的资源定位地址可以实现控制图片资源的获取路径，避免二次请求问题。
步骤S101，在页面框架组件中注册元素自定义指令。其中，元素自定义指令用于在使用页面框架组件对浏览器页面进行渲染之前，通过第一钩子函数对目标图片元素进行预处理。
需要说明的是，页面框架组件用于对浏览器页面进行构建，本发明实施例可以选用Vue.js框架中的Vue组件作为页面框架组件，页面框架组件中至少包括以下类型的.vue文件：temple(页面框架模板)、script(用于定义组件的JavaScript逻辑，包括数据、方法、生命周期钩子等)以及style(用于定义组件的CSS样式，可以通过添加scoped属性来实现样式的模块化，防止全局污染)。
本发明实施例中的自定义指令可以是Vue.js中的自定义指令，Vue.js是一个流行的前端JavaScript框架，用于构建用户界面和单页应用程序，该框架中包含一个完整的指令***，自定义指令可以在原有的指令***之上，支持前端开发人员利用自定义指令来扩展Vue功能。
需要说明的是，创建自定义指令通常涉及到注册指令，以及定义一组钩子函数，钩子函数用于在指令的生命周期的不同阶段被调用。本发明实施例中的第一钩子函数可以选用beforeMount钩子函数，beforeMount钩子函数在自定义指令第一次绑定到目标元素，以及在挂载父组件之前被调用，此时元素已经创建，但尚未添加到DOM树中，是修改或操作DOM结构的最佳时机。
步骤S102，通过页面框架组件中的页面框架模板和第一钩子函数对目标图片元素的资源定位地址进行预处理。
可选地，在执行步骤S102之前，还包括：获取页面框架模板中目标图片元素的图片元素标签；获取图片元素标签的标签属性，其中，标签属性至少包括：资源定位地址；判断资源定位地址的地址字段是否为空，得到判断结果。
本发明实施例示例性的提供几种在HTML文档中用于描述文档结构和内容的标签，例如，<p>、<div>、<img>等。
其中，<p>标签用于定义段落，常用于将文本内容分段，浏览器会自动在<p>元素前后添加空白，以表示段落之间存在间距；
<div>标签是HTML中的块级容器，用于将文档分割为独立的部分，以及在对某一组元素进行包装时用于定义样式和应用脚本；
<img>标签(即本发明实施例中的图片元素标签)用于在网页中***图像，通过设置src属性指定图片的URL(外部资源定位符)，alt(替代文本)属性提供了图片元素的替代文本，如果图片无法显示时会显示alt属性中的文本，title(标题)属性则用于提供图片元素的额外信息。
本发明实施例中可以选择调用JavaScript中的节点对象获取接口(例如document.querySelector())方法，在目标图片元素所在的HTML文档中获取该图片元素的节点对象(本发明实施例中指图片元素标签)。
本发明实施例还可以选择使用节点对象的属性获取接口(getAttribute())方法获取图片元素标签的各种属性值，并将获取到的属性值(至少包括本发明实施例中的资源定位地址)暂时保存在指定变量中，以便进行后续的判断步骤。
需要说明的是，资源定位地址(本实施例定义为src)是图片元素标签的标签属性之一，标签属性还包括：唯一标识符(本实施例定义为data-img-id)以及背景色(本实施例定义为currentcolor)。
可选地，在得到判断结果之后，通过页面框架组件中的页面框架模板和第一钩子函数对目标图片元素的资源定位地址进行预处理的步骤，包括：在判断结果指示地址字段非空的情况下，保留该地址字段中的图片资源索引序列；或者，在判断结果指示地址字段为空的情况下，通过第一钩子函数将预设图片占位符对应的定长编码序列作为图片资源索引序列填充至该地址字段。
需要说明的是，本发明实施例中可以使用1像素透明gif图作为预设图片占位符，并使用1像素透明gif图对应的base64格式的编码字符串(可以记为base64gif)作为定长编码序列对空白src字段进行填充，可以实现在HTML或CSS代码中直接嵌入图像数据，这样的图像数据通常用于网页设计和开发中，作为占位符、跟踪像素或者在需要极小体积图像的场景下使用。
一种示例的，提供一种可选的表示数值1像素透明gif图像对应的base64编码：
<imgsrc＝"data:image/gif；base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAA AAAABAAEAAAICRAEAOw＝＝"alt＝"1像素透明GIF">。
其中，data是一个数据URI的前缀，表明接下来的内容是直接嵌入到URI中的数据，而不是指向外部资源的链接；image/gif用于指定嵌入数据的MIME类型，表明这是一个GIF图像；base64表示之后的字符串是图像数据的Base64编码表示。
步骤S103，基于预处理后的资源定位地址向目标服务器发起图片加载请求，并接收目标服务器返回的图片资源。
可选地，在基于预处理后的资源定位地址向目标服务器发起图片加载请求之前，还包括：创建CSS选择器，并基于资源定位地址中的图片资源索引序列定义CSS选择器的样式属性；使用CSS选择器对浏览器页面的渲染过程中的渲染状态进行监测，得到监测结果。
需要说明的是，CSS选择器用于选择需要应用样式的HTML元素，通过CSS选择器可以根据元素的标签名、id标识、类、属性等特征来指定元素，本发明实施例中要指定目标图片元素，应用的样式即为被Vue.js中的预设事件***获取目标图片元素对应的图片资源的获取状态。
本发明实施例提供以下几种可选的CSS选择器类型：元素选择器、类选择器、ID选择器、属性选择器、伪类选择器、后代选择器以及子选择器，开发者可以根据应用场景需求选择合适的选择器类型，本发明对此不做具体限定。
可选地，在使用CSS选择器对浏览器页面的渲染过程中的渲染状态进行监测，得到监测结果之前，还包括：在CSS选择器中定义图片资源的背景色样式属性，其中，背景色样式属性的属性内容包括：在监测到图片资源未加载完成的情况下，使用目标背景色填充指定展示位置，以及，在监测到该图片资源加载完成的情况下，自动隐藏目标背景色。
如图3所示，左图为真实图片被加载成功前的效果图，右图为真实图片被加载成功后的效果图，真实的图片资源占据待展示位置，背景色自动隐藏，不影响真实图片的呈现效果。
需要说明的是，可以在CSS样式选择器中设置背景色currentColor为指定颜色，并设置属性为：真实图片资源被加载成功后，自动隐藏背景色。
步骤S104，将图片资源渲染至浏览器页面的指定展示位置。
可选地，元素自定义指令中的预定义钩子函数还包括：第二钩子函数，在将图片资源发送至浏览器页面的指定展示位置之后，还包括：在监测到浏览器页面中的所有图片资源均能够完整显示的情况下，卸载页面框架组件；执行元素自定义指令，通过第二钩子函数删除浏览器缓存中的所有与浏览器页面相关的目标图片元素的图片元素标签以及标签属性。
本发明实施例中的第二钩子函数可以选用Unmounted钩子函数，Unmounted钩子函数在绑定的目标元素所在的Vue组件被卸载，从DOM中移除之后被调用，此时是进行清理工作的最佳时机，例如，移除事件***，或者清除与该目标元素相关的定时器以及计数器等。
可选地，图片元素标签的标签属性还包括：图片标识序列，通过页面框架组件中的页面框架模板和第一钩子函数对目标图片元素的资源定位地址进行预处理的步骤，还包括：通过随机编码器和预设编码长度获取随机编码序列；基于随机编码序列对目标图片元素的图片标识序列进行赋值。
需要说明的是，随机编码器可以是一个定长(例如8位)随机数生成器，用于生成唯一ID，并赋值给图片标识序列(记为data-img-id)。
本发明实施例可以通过Vue自定义指令的钩子函数可以实现控制图片元素img渲染过程，并利用CSS选择器自动监测src属性状态，避免img二次请求问题的产生。
本发明实施例还可以在图片资源加载完成前使用数值1像素透明gif图作为图片占位符，填充在图片资源的待展示位置，并设计color属性作为占位符的填充背景色，而在图片资源完成加载之后，将color属性应用为隐藏该填充背景色。
本发明实施例还可以通过避免重复发起相同图像资源的请求进而减少网络请求，而每个网络请求都需要一定时间来建立连接、传输数据和接收响应，本发明实施例可以大大减少不必要的网络开销，并加快页面加载速度。
本发明实施例由于避免img二次请求问题的产生，可以实现避免下载重复的图像资源，进而节省带宽消耗，由于图片资源通常占据了网页中较大部分内容存储资源，还可以在节省用户流量的同时降低服务器负载。
本发明实施例在解决二次请求问题的过程中没有使用常规手段中的额外标记手段，可以使代码更加简洁和利于维护，增强了开发代码的可维护性和简洁性，可以使开发人员更加专注于其他功能设计和其他优化任务。
下面结合另一种具体的实施方式来说明本发明。
本发明实施方式针对图片标签属性src的不当操作(如空值、无效路径或JavaScript动态修改)所引发的img二次请求问题，提出一种基于自定义指令的图片加载方法。
图2是根据本发明实施例的一种可选的基于自定义指令的图片加载方法的流程图，如图2所示，该图片加载方法包括如下步骤：
S1，在注册自定义指令，并在自定义指令中定义beforeMount钩子函数和unmounted钩子函数。
本发明实施例中的自定义指令可以是Vue.js中的自定义指令，Vue.js是一个流行的前端JavaScript框架，用于构建用户界面和单页应用程序，该框架中包含一个完整的指令***，自定义指令可以在原有的指令***之上，支持前端开发人员利用自定义指令来扩展Vue功能。
需要说明的是，创建自定义指令通常涉及到注册指令，以及定义一组钩子函数，钩子函数用于在指令的生命周期的不同阶段被调用。
其中，beforeMount钩子函数在自定义指令第一次绑定到目标元素，以及在挂载父组件之前被调用，此时元素已经创建，但尚未添加到DOM树中，是修改或操作DOM结构的最佳时机。
Unmounted钩子函数在绑定的目标元素所在的Vue组件被卸载，从DOM中移除之后被调用，此时是进行清理工作的最佳时机，例如，移除事件***，或者清除与该目标元素相关的定时器以及计数器等。
S2，在Vue组件对网页页面进行渲染之前，在Vue组件的HTML文档中获取图片元素标签img。
S3，判断图片元素标签img对应的资源定位符src是否为空字符串或空格。
需要说明的是，资源定位符src是图片元素标签的标签属性之一，标签属性还包括：data-img-id(唯一标识符)以及currentcolor(背景色)。
S4，如果资源定位符src是空字符串或者空格，则修改src，使用预定义字符串填充src字段，否则，直接终止流程并直接使用src中的资源定位地址渲染图片。
需要说明的是，本发明实施例中可以使用1像素透明gif图对应的base64格式的编码字符串(可以记为base64gif)作为预定义字符串对空白src字段进行填充，可以实现在HTML或CSS代码中直接嵌入图像数据，这样的图像数据通常用于网页设计和开发中，作为占位符、跟踪像素或者在需要极小体积图像的场景下使用。
一种示例的，提供一种可选的表示1像素透明gif图像对应的base64编码：
<imgsrc＝"data:image/gif；base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAA AAAABAAEAAAICRAEAOw＝＝"alt＝"1像素透明GIF">。
其中，data是一个数据URI的前缀，表明接下来的内容是直接嵌入到URI中的数据，而不是指向外部资源的链接；image/gif用于指定嵌入数据的MIME类型，表明这是一个GIF图像；base64表示之后的字符串是图像数据的Base64编码表示。
S5，利用指定编码器或者随机数生成器生成定长(例如8位)唯一id，赋值给唯一标识符属性(即，图片标识序列，data-img-id)。
S6，基于唯一标识符属性和资源定位地址属性生成CSS样式选择器，并将CSS样式选择器中的样式表定义为[data-img-id＝id][src＝base64gif]。
S7，在CSS样式选择器中设置背景色currentColor为指定颜色，并设置属性为：真实图片资源被加载成功后，自动隐藏背景色。
S8，使用CSS样式选择器对图片渲染过程进行监控，监控到真实图片资源被加载成功后，卸载自定义指令，并清理标签属性[data-img-id＝id][src＝base64gif]。
图3是根据本发明实施例的一种可选的基于自定义指令的图片加载方法的实施效果图，如图3所示，左图为真实图片被加载成功前的效果图，使用灰色背景色的1像素透明gif图像作为占位符填充待展示位置，右图为真实图片被加载成功后的效果图，真实的图片资源占据待展示位置，背景色自动隐藏，不影响真实图片的呈现效果。
本发明实施例可以通过Vue自定义指令的钩子函数可以实现控制图片元素img渲染过程，并利用CSS选择器自动监测src属性状态，避免img二次请求问题的产生。
本发明实施例还可以在图片资源加载完成前使用1像素透明gif图作为图片占位符，填充在图片资源的待展示位置，并设计color属性作为占位符的填充背景色，而在图片资源完成加载之后，将color属性应用为隐藏该填充背景色。
本发明实施例还可以通过避免重复发起相同图像资源的请求进而减少网络请求，而每个网络请求都需要一定时间来建立连接、传输数据和接收响应，本发明实施例可以大大减少不必要的网络开销，并加快页面加载速度。
本发明实施例由于避免img二次请求问题的产生，可以实现避免下载重复的图像资源，进而节省带宽消耗，由于图片资源通常占据了网页中较大部分内容存储资源，还可以在节省用户流量的同时降低服务器负载。
本发明实施例在解决二次请求问题的过程中没有使用常规手段中的额外标记手段，可以使代码更加简洁和利于维护，增强了开发代码的可维护性和简洁性，可以使开发人员更加专注于其他功能设计和其他优化任务。
下面结合另一种可选的实施例来说明本发明。
实施例二
本实施例中提供的一种图片加载装置包含了多个实施单元，每个实施单元对应于上述实施例一中的各个实施步骤。
图4是根据本发明实施例的一种可选的图片加载装置的示意图，如图4所示，该装置可以包括：注册单元41，预处理单元42，接收单元43，渲染单元44。
其中，注册单元41，用于在页面框架组件中注册元素自定义指令，其中，元素自定义指令用于在使用页面框架组件对浏览器页面进行渲染之前，通过第一钩子函数对目标图片元素进行预处理。
预处理单元42，用于通过页面框架组件中的页面框架模板和第一钩子函数对目标图片元素的资源定位地址进行预处理。
接收单元43，用于基于预处理后的资源定位地址向目标服务器发起图片加载请求，并接收目标服务器返回的图片资源。
渲染单元44，用于将图片资源渲染至浏览器页面的指定展示位置。
上述图片加载装置，可以先通过注册单元41在页面框架组件中注册元素自定义指令，其中，元素自定义指令用于在使用页面框架组件对浏览器页面进行渲染之前，通过第一钩子函数对目标图片元素进行预处理，再通过预处理单元42基于页面框架组件中的页面框架模板和第一钩子函数对目标图片元素的资源定位地址进行预处理，然后通过接收单元43基于预处理后的资源定位地址向目标服务器发起图片加载请求，并接收目标服务器返回的图片资源，最后通过渲染单元44将图片资源渲染至浏览器页面的指定展示位置。
本发明实施例中，通过在页面框架组件中注册元素自定义指令，并在元素自定义指令中利用第一钩子函数在渲染前对目标图片元素的资源定位地址进行预处理，进而基于预处理后的资源定位地址向目标服务器请求加载目标图片元素对应的图片资源，接收服务器返回的图片资源并渲染至指定展示位置，完成图片加载，本发明通过在元素自定义指令中定义的钩子函数，能够实现控制图片元素的渲染过程，通过预定义目标图片元素的资源定位地址可以实现控制图片资源的获取路径，进而可以使图片标签以明确的资源定位地址发起图片加载请求，避免由于资源定位地址出错，图片标签重复发起图片加载和渲染请求，导致网络流量增加以及网络延迟加重的问题，进而解决了相关技术中加载网页图片过程中由于图片标签重复发起加载请求，导致网络延迟的技术问题。
可选地，图片加载装置还包括：第一获取单元，用于在通过页面框架组件中的页面框架模板和第一钩子函数对目标图片元素的资源定位地址进行预处理之前，获取页面框架模板中目标图片元素的图片元素标签；第二获取单元，用于获取图片元素标签的标签属性，其中，标签属性至少包括：资源定位地址；判断单元，用于判断资源定位地址的地址字段是否为空，得到判断结果。
可选地，预处理单元包括：保留模块，用于在得到判断结果之后，在判断结果指示地址字段非空的情况下，保留该地址字段中的图片资源索引序列；填充模块，用于在判断结果指示地址字段为空的情况下，通过第一钩子函数将预设图片占位符对应的定长编码序列作为图片资源索引序列填充至该地址字段。
可选地，图片加载装置还包括：创建单元，用于在基于预处理后的资源定位地址向目标服务器发起图片加载请求之前，创建CSS选择器，并基于资源定位地址中的图片资源索引序列定义CSS选择器的样式属性；监测单元，用于使用CSS选择器对浏览器页面的渲染过程中的渲染状态进行监测，得到监测结果。
可选地，图片加载装置还包括：定义单元，用于在使用CSS选择器对浏览器页面的渲染过程中的渲染状态进行监测，得到监测结果之前，在CSS选择器中定义图片资源的背景色样式属性，其中，背景色样式属性的属性内容包括：在监测到图片资源未加载完成的情况下，使用目标背景色填充指定展示位置，以及，在监测到该图片资源加载完成的情况下，自动隐藏目标背景色。
可选地，元素自定义指令中的预定义钩子函数还包括：第二钩子函数，图片加载装置还包括：卸载单元，用于在将图片资源发送至浏览器页面的指定展示位置之后，在监测到浏览器页面中的所有图片资源均能够完整显示的情况下，卸载页面框架组件；执行单元，用于执行元素自定义指令，通过第二钩子函数删除浏览器缓存中的所有与浏览器页面相关的目标图片元素的图片元素标签以及标签属性。
可选地，图片元素标签的标签属性还包括：图片标识序列，预处理单元还包括：获取模块，用于通过随机编码器和预设编码长度获取随机编码序列；赋值模块，用于基于随机编码序列对目标图片元素的图片标识序列进行赋值。
上述的图片加载装置还可以包括处理器和存储器，上述注册单元41，预处理单元42，接收单元43，渲染单元44等均作为程序单元存储在存储器中，由处理器执行存储在存储器中的上述程序单元来实现相应的功能。
上述处理器中包含内核，由内核去存储器中调取相应的程序单元。内核可以设置一个或以上，通过调整内核参数来基于预处理后的资源定位地址向目标服务器发起图片加载请求，并接收目标服务器返回的图片资源，并将图片资源渲染至浏览器页面的指定展示位置。
上述存储器可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)，存储器包括至少一个存储芯片。
本申请还提供了一种计算机程序产品，当在数据处理设备上执行时，适于执行初始化有如下方法步骤的程序：在页面框架组件中注册元素自定义指令，其中，元素自定义指令用于在使用页面框架组件对浏览器页面进行渲染之前，通过第一钩子函数对目标图片元素进行预处理；通过页面框架组件中的页面框架模板和第一钩子函数对目标图片元素的资源定位地址进行预处理；基于预处理后的资源定位地址向目标服务器发起图片加载请求，并接收目标服务器返回的图片资源；将图片资源渲染至浏览器页面的指定展示位置。
根据本发明实施例的另一方面，还提供了一种计算机可读存储介质，计算机可读存储介质包括存储的计算机程序，其中，在计算机程序运行时控制计算机可读存储介质所在设备执行上述实施例一中任意一项的图片加载方法。
根据本发明实施例的另一方面，还提供了一种电子设备，包括一个或多个处理器和存储器，存储器用于存储一个或多个程序，其中，当一个或多个程序被一个或多个处理器执行时，使得一个或多个处理器实现上述实施例一中任意一项的图片加载方法。
图5是根据本发明实施例的一种用于图片加载方法的电子设备(或移动设备)的硬件结构框图。如图5所示，电子设备可以包括一个或多个(图5中采用502a、502b，……，502n来示出)处理器502(处理器502可以包括但不限于微处理器MCU或可编程逻辑器件FPGA等的处理装置)、用于存储数据的存储器504。除此以外，还可以包括：显示器、输入/输出接口(I/O接口)、通用串行总线(USB)端口(可以作为I/O接口的端口中的一个端口被包括)、网络接口、键盘、电源和/或相机。本领域普通技术人员可以理解，图5所示的结构仅为示意，其并不对上述电子装置的结构造成限定。例如，电子设备还可包括比图5中所示更多或者更少的组件，或者具有与图5所示不同的配置。
上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。
在本发明的上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。
在本申请所提供的几个实施例中，应该理解到，所揭露的技术内容，可通过其它的方式实现。其中，以上所描述的装置实施例仅仅是示意性的，例如所述单元的划分，可以为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个***，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，单元或模块的间接耦合或通信连接，可以是电性或其它的形式。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。
所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可为个人计算机、服务器或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、移动硬盘、磁碟或者光盘等各种可以存储程序代码的介质。
以上所述仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本发明的保护范围。
Claims (10)
1.一种图片加载方法，其特征在于，包括：
在页面框架组件中注册元素自定义指令，其中，所述元素自定义指令用于在使用所述页面框架组件对浏览器页面进行渲染之前，通过第一钩子函数对目标图片元素进行预处理；
通过所述页面框架组件中的页面框架模板和所述第一钩子函数对所述目标图片元素的资源定位地址进行预处理；
基于预处理后的所述资源定位地址向目标服务器发起图片加载请求，并接收所述目标服务器返回的图片资源；
将所述图片资源渲染至所述浏览器页面的指定展示位置。
2.根据权利要求1所述的图片加载方法，其特征在于，在通过所述页面框架组件中的页面框架模板和所述第一钩子函数对所述目标图片元素的资源定位地址进行预处理之前，还包括：
获取所述页面框架模板中所述目标图片元素的图片元素标签；
获取所述图片元素标签的标签属性，其中，所述标签属性至少包括：所述资源定位地址；
判断所述资源定位地址的地址字段是否为空，得到判断结果。
3.根据权利要求2所述的图片加载方法，其特征在于，在得到所述判断结果之后，通过所述页面框架组件中的页面框架模板和所述第一钩子函数对所述目标图片元素的资源定位地址进行预处理的步骤，包括：
在所述判断结果指示所述地址字段非空的情况下，保留该地址字段中的图片资源索引序列；或者，
在所述判断结果指示所述地址字段为空的情况下，通过所述第一钩子函数将预设图片占位符对应的定长编码序列作为图片资源索引序列填充至该地址字段。
4.根据权利要求3所述的图片加载方法，其特征在于，在基于预处理后的所述资源定位地址向目标服务器发起图片加载请求之前，还包括：
创建CSS选择器，并基于所述资源定位地址中的所述图片资源索引序列定义所述CSS选择器的样式属性；
使用所述CSS选择器对所述浏览器页面的渲染过程中的渲染状态进行监测，得到监测结果。
5.根据权利要求4所述的图片加载方法，其特征在于，在使用所述CSS选择器对所述浏览器页面的渲染过程中的渲染状态进行监测，得到监测结果之前，还包括：
在所述CSS选择器中定义所述图片资源的背景色样式属性，其中，所述背景色样式属性的属性内容包括：在监测到所述图片资源未加载完成的情况下，使用目标背景色填充所述指定展示位置，以及，在监测到该图片资源加载完成的情况下，自动隐藏所述目标背景色。
6.根据权利要求5所述的图片加载方法，其特征在于，所述元素自定义指令中的预定义钩子函数还包括：第二钩子函数，在将所述图片资源发送至所述浏览器页面的指定展示位置之后，还包括：
在监测到所述浏览器页面中的所有所述图片资源均能够完整显示的情况下，卸载所述页面框架组件；
执行所述元素自定义指令，通过第二钩子函数删除浏览器缓存中的所有与所述浏览器页面相关的所述目标图片元素的图片元素标签以及标签属性。
7.根据权利要求2所述的图片加载方法，其特征在于，所述图片元素标签的所述标签属性还包括：图片标识序列，通过所述页面框架组件中的页面框架模板和所述第一钩子函数对所述目标图片元素的资源定位地址进行预处理的步骤，还包括：
通过随机编码器和预设编码长度获取随机编码序列；
基于所述随机编码序列对所述目标图片元素的图片标识序列进行赋值。
8.一种图片加载装置，其特征在于，包括：
注册单元，用于在页面框架组件中注册元素自定义指令，其中，所述元素自定义指令用于在使用所述页面框架组件对浏览器页面进行渲染之前，通过第一钩子函数对目标图片元素进行预处理；
预处理单元，用于通过所述页面框架组件中的页面框架模板和所述第一钩子函数对所述目标图片元素的资源定位地址进行预处理；
接收单元，用于基于预处理后的所述资源定位地址向目标服务器发起图片加载请求，并接收所述目标服务器返回的图片资源；
渲染单元，用于将所述图片资源渲染至所述浏览器页面的指定展示位置。
9.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质包括存储的计算机程序，其中，在所述计算机程序运行时控制所述计算机可读存储介质所在设备执行权利要求1至7中任意一项所述的图片加载方法。
10.一种电子设备，其特征在于，包括一个或多个处理器和存储器，所述存储器用于存储一个或多个程序，其中，当所述一个或多个程序被所述一个或多个处理器执行时，使得所述一个或多个处理器实现权利要求1至7中任意一项所述的图片加载方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202410194244.1A CN118035582A (zh) | 2024-02-21 | 2024-02-21 | 图片加载方法及装置、存储介质、电子设备 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202410194244.1A CN118035582A (zh) | 2024-02-21 | 2024-02-21 | 图片加载方法及装置、存储介质、电子设备 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN118035582A true CN118035582A (zh) | 2024-05-14 |
Family
ID=91000268
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202410194244.1A Pending CN118035582A (zh) | 2024-02-21 | 2024-02-21 | 图片加载方法及装置、存储介质、电子设备 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN118035582A (zh) |
-
2024
- 2024-02-21 CN CN202410194244.1A patent/CN118035582A/zh active Pending
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US8549395B2 (en) | Method and system for transforming an integrated webpage | |
| CN106294658B (zh) | 网页快速展示方法和装置 | |
| CN109254773A (zh) | 骨架页面生成方法、装置、设备和存储介质 | |
| CN109840083B (zh) | 网页组件模板构建方法、装置、计算机设备和存储介质 | |
| CN112507260A (zh) | 网页加载方法及装置、电子设备、计算机可读存储介质 | |
| WO2016005887A2 (en) | Client-side template engine and method for constructing a nested dom module for a website | |
| US7945853B2 (en) | Script markup | |
| CN112256990B (zh) | 一种图像处理方法及装置、计算机可读存储介质 | |
| WO2019080796A1 (zh) | web***的前后端分离方法、装置、设备及存储介质 | |
| CN110765284A (zh) | 一种生成演示文稿的方法、***、计算设备及存储介质 | |
| CN113419729A (zh) | 基于组件化的前端页面搭建方法、装置、设备及存储介质 | |
| WO2016005885A2 (en) | Asynchronous initialization of document object model (dom) modules | |
| CN116954450A (zh) | 针对前端网页的截图方法以及装置、存储介质、终端 | |
| CN114791988A (zh) | 一种基于浏览器的pdf文件解析方法、***、存储介质 | |
| WO2016005886A2 (en) | Self-referencing of running script elements in asychronously loaded dom modules | |
| CN112632425A (zh) | 一种离线资源文件的生成方法、装置、设备及存储介质 | |
| CN118035582A (zh) | 图片加载方法及装置、存储介质、电子设备 | |
| CN114168875A (zh) | 一种页面程序的生成方法、装置、计算机设备及存储介质 | |
| CN111913703B (zh) | 对象编辑方法、装置、电子设备及可读存储介质 | |
| CN113626392A (zh) | 文档数据更新的方法和装置、电子设备和存储介质 | |
| CN112306619A (zh) | 一种截图方法和装置 | |
| US20160012146A1 (en) | Client Web Browser and Method for Constructing a Website DOM Module With Client-Side Functional Code | |
| CN113468454A (zh) | 渲染html页面的方法和装置 | |
| CN112328930B (zh) | 基于cobalt的页面渲染方法，服务器，客户端及*** | |
| CN111079050B (zh) | 页面信息获取方法、页面信息获取装置及计算机存储介质 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |