【技术实现步骤摘要】
本申请涉及软件，尤其涉及前端软件设计领域，具体而言，涉及一种骨架屏的处理方法、装置、电子设备及存储介质。
技术介绍
1、文本骨架屏生成方法是一种在页面加载期间动态生成占位文本内容的技术。该技术主要是通过在页面渲染过程中实时计算和填充占位骨架屏的纹理框架，从而以提供更好的用户体验。
2、但是，在渲染元素的过程中进行实时计算，会增加额外的性能开销，特别是对于复杂或大规模页面，这可能导致性能下降，并延长页面加载时间。此外，在实时计算和替换元素内容的过程中，由于骨架屏的尺寸大小与待渲染展示的元素在浏览器中的显示尺寸大小不一致，因此骨架屏在渲染过程中可能会导致页面布局发生变化，这种布局变化会引起视觉上的不稳定感和用户体验上的抖动问题。
3、针对上述的问题，目前尚未提出有效的解决方案。
技术实现思路
1、本申请提供了一种骨架屏的处理方法、装置、电子设备及存储介质，以至少解决现有技术中由于骨架屏的尺寸大小与待渲染展示的元素在浏览器中的显示尺寸大小不一致，导致的骨架屏在加载渲染后的元素时存在像素抖动的技术问题。
2、根据本申请的一个方面，提供了一种骨架屏的处理方法，包括：获取目标元素在浏览器中对应的显示高度和显示宽度，其中，目标元素为需要在浏览器中向用户渲染显示的元素；根据显示高度确定目标数量的伪元素，其中，伪元素为不需要在浏览器中向用户渲染显示的元素；通过目标数量的伪元素生成目标高度的第一骨架屏，其中，目标高度与目标元素在浏览器中对应的显示高度保持一致；检测目
3、可选地，骨架屏的处理方法还包括：检测目标元素在浏览器中排列的文本行数；根据文本行数确定目标元素在浏览器中对应的显示高度。
4、可选地，骨架屏的处理方法还包括：将目标数量的伪元素排列为n个目标文本行，其中，n为目标元素在浏览器中排列的文本行数；依据n个目标文本行生成目标高度的第一骨架屏。
5、可选地，骨架屏的处理方法还包括：在根据目标元素的显示字体大小调整第一骨架屏的宽度，并将调整后的第一骨架屏作为目标骨架屏之前，获取浏览器对应的预设字体阈值，其中，预设字体阈值为浏览器的最小显示字体值。
6、可选地，骨架屏的处理方法还包括：浏览器在检测到目标元素的实际字体大小小于预设字体阈值的情况下，浏览器将目标元素的显示字体大小设置为预设字体阈值；浏览器在检测到目标元素的实际字体大小大于或等于预设字体阈值的情况下，浏览器将目标元素的显示字体大小设置为目标元素的实际字体大小。
7、可选地，骨架屏的处理方法还包括：检测目标元素的显示字体大小是否大于预设字体阈值；在目标元素的显示字体大小大于预设字体阈值的情况下，将第一骨架屏的宽度调整为目标元素在浏览器中对应的显示宽度，并将调整后的第一骨架屏作为目标骨架屏；在目标元素的显示字体大小等于预设字体阈值的情况下，根据伪元素在浏览器中的显示字体大小和预设字体阈值调整第一骨架屏的宽度，并将调整后的第一骨架屏作为目标骨架屏。
8、可选地，骨架屏的处理方法还包括：获取伪元素的元素放大倍数，其中，元素放大倍数用于表征浏览器在显示伪元素时的放大倍数；计算伪元素在浏览器中的显示字体大小与元素放大倍数的比值，得到目标元素的实际字体大小；计算预设字体阈值与目标元素的实际字体大小的比值，得到第一骨架屏的宽度调整系数；计算显示宽度与宽度调整系数的比值，得到目标宽度；将第一骨架屏的宽度调整为目标宽度，并将调整后的第一骨架屏作为目标骨架屏。
9、根据本申请的另一方面，还提供了一种骨架屏的处理装置，其中，包括：获取单元，用于获取目标元素在浏览器中对应的显示高度和显示宽度，其中，目标元素为需要在浏览器中向用户渲染显示的元素；确定单元，用于根据显示高度确定目标数量的伪元素，其中，伪元素为不需要在浏览器中向用户渲染显示的元素；生成单元，用于通过目标数量的伪元素生成目标高度的第一骨架屏，其中，目标高度与目标元素在浏览器中对应的显示高度保持一致；检测单元，用于检测目标元素的显示字体大小；调整单元，用于根据目标元素的显示字体大小调整第一骨架屏的宽度，并将调整后的第一骨架屏作为目标骨架屏，其中，目标骨架屏通过加载渲染后的目标元素在浏览器中生成显示页面，目标骨架屏的宽度与目标元素的实际宽度保持一致。
10、根据本申请的另一方面，还提供了一种计算机可读存储介质，其中，计算机可读存储介质中存储有计算机程序，其中，在计算机程序运行时控制计算机可读存储介质所在设备执行上述任意一项的骨架屏的处理方法。
11、根据本申请的另一方面，还提供了一种电子设备，其中，电子设备包括一个或多个处理器和存储器，存储器用于存储一个或多个程序，其中，当一个或多个程序被一个或多个处理器执行时，使得一个或多个处理器实现上述任意一项的骨架屏的处理方法。
12、在本申请中，采用通过目标数量的伪元素生成目标高度的第一骨架屏以及根据目标元素的显示字体大小调整第一骨架屏的宽度的方式，首先获取目标元素在浏览器中对应的显示高度和显示宽度，其中，目标元素为需要在浏览器中向用户渲染显示的元素。然后根据显示高度确定目标数量的伪元素，其中，伪元素为不需要在浏览器中向用户渲染显示的元素。通过目标数量的伪元素生成目标高度的第一骨架屏，其中，目标高度与目标元素在浏览器中对应的显示高度保持一致，随后，检测目标元素的显示字体大小，并根据目标元素的显示字体大小调整第一骨架屏的宽度，并将调整后的第一骨架屏作为目标骨架屏，其中，目标骨架屏通过加载渲染后的目标元素在浏览器中生成显示页面，目标骨架屏的宽度与目标元素的实际宽度保持一致。
13、由上述内容可知，通过本申请的技术方案，首先利用伪元素来生成目标高度的第一骨架屏，由于目标高度与目标元素在浏览器中对应的显示高度保持一致，因此实现了在垂直方向保证骨架屏的高度与目标元素的显示高度一致的技术效果。此外，由于目标元素的实际宽度主要与目标元素的实际字体大小有关，而目标元素的实际字体大小和目标元素的显示字体大小又存在关联关系，因此，本申请根据目标元素的显示字体大小调整第一骨架屏的宽度，并将调整后的第一骨架屏作为目标骨架屏，其中，目标骨架屏的宽度与目标元素的实际宽度保持一致，从而实现了在水平方向保证骨架屏的宽度与目标元素的实际宽度一致的技术效果。
14、由此可见，通过本申请的技术方案，达到了生成与目标元素在浏览器中的实际尺寸一致的骨架屏的目的，从而实现了提升骨架屏加载渲染后的目标元素时的稳定性的技术效果，进而解决了现有技术中由于骨架屏的尺寸大小与待渲染展示的元素在浏览器中的显示尺寸大小不一致，导致的骨架屏在加载渲染后的元素时存在像素抖动的技术问题。
本文档来自技高网...【技术保护点】
1.一种骨架屏的处理方法，其特征在于，包括：
2.根据权利要求1所述的骨架屏的处理方法，其特征在于，获取目标元素在浏览器中对应的显示高度，包括：
3.根据权利要求2所述的骨架屏的处理方法，其特征在于，通过所述目标数量的伪元素生成目标高度的第一骨架屏，包括：
4.根据权利要求1所述的骨架屏的处理方法，其特征在于，在根据所述目标元素的显示字体大小调整所述第一骨架屏的宽度，并将调整后的第一骨架屏作为目标骨架屏之前，所述骨架屏的处理方法还包括：
5.根据权利要求4所述的骨架屏的处理方法，其特征在于，所述浏览器在检测到所述目标元素的实际字体大小小于所述预设字体阈值的情况下，所述浏览器将所述目标元素的显示字体大小设置为所述预设字体阈值；所述浏览器在检测到所述目标元素的实际字体大小大于或等于所述预设字体阈值的情况下，所述浏览器将所述目标元素的显示字体大小设置为所述目标元素的实际字体大小。
6.根据权利要求5所述的骨架屏的处理方法，其特征在于，根据所述目标元素的显示字体大小调整所述第一骨架屏的宽度，并将调整后的第一骨架屏作为目标骨架屏，
7.根据权利要求6所述的骨架屏的处理方法，其特征在于，在所述目标元素的显示字体大小等于所述预设字体阈值的情况下，根据所述伪元素在所述浏览器中的显示字体大小和所述预设字体阈值调整所述第一骨架屏的宽度，并将调整后的第一骨架屏作为所述目标骨架屏，包括：
8.一种骨架屏的处理装置，其特征在于，包括：
9.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质中存储有计算机程序，其中，在所述计算机程序运行时控制所述计算机可读存储介质所在设备执行权利要求1至7中任意一项的骨架屏的处理方法。
10.一种电子设备，其特征在于，包括一个或多个处理器和存储器，所述存储器用于存储一个或多个程序，其中，当所述一个或多个程序被一个或多个处理器执行时，使得所述一个或多个处理器实现权利要求1至7中任意一项的骨架屏的处理方法。
...【技术特征摘要】
1.一种骨架屏的处理方法，其特征在于，包括：
2.根据权利要求1所述的骨架屏的处理方法，其特征在于，获取目标元素在浏览器中对应的显示高度，包括：
3.根据权利要求2所述的骨架屏的处理方法，其特征在于，通过所述目标数量的伪元素生成目标高度的第一骨架屏，包括：
4.根据权利要求1所述的骨架屏的处理方法，其特征在于，在根据所述目标元素的显示字体大小调整所述第一骨架屏的宽度，并将调整后的第一骨架屏作为目标骨架屏之前，所述骨架屏的处理方法还包括：
5.根据权利要求4所述的骨架屏的处理方法，其特征在于，所述浏览器在检测到所述目标元素的实际字体大小小于所述预设字体阈值的情况下，所述浏览器将所述目标元素的显示字体大小设置为所述预设字体阈值；所述浏览器在检测到所述目标元素的实际字体大小大于或等于所述预设字体阈值的情况下，所述浏览器将所述目标元素的显示字体大小设置为所述目标元素的实际字体大小。
6.根据权利要求5所述的骨架屏的处...
【专利技术属性】
技术研发人员：李贺，
申请(专利权)人：天翼电子商务有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。