[发明专利]一种图片呈现的方法以及图片呈现装置

说明书

技术领域

本发明涉及网页前端设计领域，具体涉及一种图片呈现的方法以及图片呈现装置。

背景技术

随着计算机技术以及浏览器技术的快速发展，万维网Web前端应用发展得越发复杂与庞大。图片资源作为应用评价指标之一，与用户的交互越来越密切。当浏览器频繁载入大量高质量图片资源时，用户不得不被动的面对停滞的浏览器页面以等待资源加载完毕。当网络受到影响甚至中断的时候，会导致最终图片资源渲染失败或者页面呈现不完整等结果。这些都会使得用户受到不同程度的负面体验。

在现有技术中，通过加载等待动画过场特效使得用户的注意力得以转移，虽然该方法或可间接延长用户耐心度，但是当诸多图片同时加载的时候，会影响页面整体观赏性和一致性，并且始终单一的动画无法从根本上挽救用户体验，导致用户打开网页时，视觉体验低。

发明内容

本发明实施例提供了一种图片呈现的方法以及图片呈现装置，用于当用户打开网页时，提高用户的视觉体验。

本发明实施例第一方面提供了一种图片呈现的方法，具体包括：

将图片容器覆盖于加载框上方，加载框用于加载目标图片的原图，图片容器与加载框属于浏览器中的元素；

通过图片容器对原图的数据进行压缩处理，得到目标图片的预览图，预览图呈现于图片容器中，且预览图的尺寸与原图一致；

通过加载框判断原图是否加载完成；

若加载完成，则对图片容器执行隐藏操作，使得原图呈现。

本发明实施例第二方面提供了一种图片呈现装置，具体包括：

覆盖单元，用于将图片容器覆盖于加载框上方，加载框用于加载目标图片的原图，图片容器与加载框属于浏览器中的元素；

压缩单元，用于通过图片容器对原图的数据进行压缩处理，得到目标图片的预览图，预览图呈现于图片容器中，且预览图的尺寸与原图一致；

判断单元，用于通过加载框判断原图是否加载完成；

隐藏单元，用于当判断单元判断原图加载完成时，对图片容器执行隐藏操作，使得原图呈现。

本发明实施例第三方面提供了一种图片呈现装置，具体包括：

输入装置、输出装置、处理器和存储器；

处理器通过调用存储器存储的操作指令，用于执行如下步骤：

将图片容器覆盖于加载框上方，加载框用于加载目标图片的原图，图片容器与加载框属于浏览器中的元素；

通过图片容器对原图的数据进行压缩处理，得到目标图片的预览图，预览图呈现于图片容器中，且预览图的尺寸与原图一致；

通过加载框判断原图是否加载完成；

若加载完成，则对图片容器执行隐藏操作，使得原图呈现。

从以上技术方案可以看出，本发明实施例具有以下优点：

本发明实施例中，图片呈现装置将图片容器覆盖于加载框上方，加载框用于加载目标图片的原图，图片容器与加载框属浏览器中的元素，通过图片容器对原图的数据进行压缩处理，得到目标图片的预览图，预览图呈现于图片容器中，且预览图的尺寸与原图一致，然后通过加载框判断原图是否加载完成，如果加载完成，则对图片容器执行隐藏操作，使得原图呈现。也就是说，用户在等待目标图片的原图在加载时，在目标图片原图的位置会显示与原图对应尺寸的预览图，用户在等待原图加载的时候能看到与原图相对应的预览图，使得用户打开网页时，提高用户的视觉体验。

附图说明

图1为本发明实施例中网络结构示意图；

图2为本发明实施例中图片呈现的方法一实施例示意图；

图3为本发明实施例中图片呈现的方法另一实施例示意图；

图4为本发明实施例中图片呈现的方法另一实施例示意图；

图5为本发明实施例中图片呈现装置一实施例示意图；

图6为本发明实施例中图片呈现装置另一实施例示意图；

图7为本发明实施例中图片呈现装置另一实施例示意图。

具体实施方式

本发明实施例提供了一种图片呈现的方法以及图片呈现装置，用于当用户打开网页时，提高用户的视觉体验。

为了使本技术领域的人员更好地理解本发明方案，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分的实施例，而不是全部的实施例。基于本发明中的实施例。