html网络图片占位,界面图片的占位图的处理方法与流程

本发明涉及图像处理技术领域，尤其涉及一种界面图片的占位图的处理方法。

背景技术：

智能电视是基于互联网应用技术的电视产品，具备开放式操作系统与芯片，拥有开放式应用平台，可实现双向人机交互功能，集影音、娱乐、数据等多种功能于一体，以满足用户多样化和个性化需求。

目前,市面上的智能电视机已经全部提供接入网络的能力，用户在进行网络浏览的时候常常需要加载大量的图片，但是由于部分用户的网络带宽不足或者图片较大、较多，导致页面在加载图片的时候会有几秒的等待时间。

现有技术中一般采用设置占位图的方式,将所有图片位置放置统一的占位图。然而,相同颜色的图案多次重复出现,界面显示单调,用户体验不好。

技术实现要素：

本发明提供了一种界面图片的占位图的处理方法，以解决现有技术中智能电视上网的时候，由于网速慢或者图片较多导致在页面加载过程中相同的占位图重复出现，导致界面显示单调的问题。

本发明实施例提供了一种界面图片的占位图的处理方法，包括：

获取页面加载图片的尺寸数据和位置数据；

根据所述尺寸数据和位置数据生成所述页面加载图片的第一占位图；

获取背景颜色参数值，所述背景颜色参数包含色相、饱和度和亮度；

根据所述背景颜色参数值生成所述第一占位图的背景颜色；

将所述第一占位图叠加在所述背景颜色上，生成第二占位图；

将所述第二占位图在所述页面上加载图片的位置进行显示。

进一步的，所述获取页面加载图片的尺寸数据和位置数据具体包括：

检测页面加载图片，提取所述尺寸数据和位置数据。

进一步的，所述根据所述尺寸数据和位置数据生成所述页面加载图片的第一占位图具体包括：

生成与所述页面加载图片尺寸、位置相同的第一占位图。

进一步的，所述方法还包括：

将所述第一占位图的颜色设置为纯白色，透明度设置为10％。

进一步的，所述获取背景颜色参数值，所述背景颜色参数包含色相、饱和度和亮度具体包括：

利用随机函数在0-360之间选取色相值；

利用随机函数在15-30之间选取饱和度值；

利用随机函数在50-70之间选取亮度值。

进一步的，所述根据所述背景颜色参数值生成所述第一占位图的背景颜色具体包括：

根据所述色相值、饱和度值和亮度值生成所述第一占位图的背景颜色，并对所述背景颜色进行去重处理。

进一步的，在将所述第二占位图在所述页面上加载图片的位置进行显示之后，所述方法还包括：

将所述页面加载图片覆盖在所述第二占位图上，从而实现图片加载。

本发明实施例提供的界面图片的占位图的处理方法，获取页面加载图片的尺寸数据和位置数据；根据尺寸数据和位置数据生成页面加载图片的第一占位图；获取背景颜色参数值，背景颜色参数包含色相、饱和度和亮度；根据背景颜色参数值生成第一占位图的背景颜色；将第一占位图叠加在背景颜色上，生成第二占位图；将第二占位图在页面上加载图片的位置进行显示。本发明实施例提供的方法，根据页面加载图片的尺寸和位置，生成不同背景颜色的占位图，避免了相同颜色占位图重复出现的单调，提升了用户体验。

附图说明

图1为本发明实施例提供的界面图片的占位图的处理方法的流程图；

图2为现有技术中的页面加载图片占位图的示意图。

具体实施方式

为了使本发明的目的、技术方案和优点更加清楚，下面将结合附图对本发明作进一步地详细描述，显然，所描述的实施例仅仅是本发明一部份实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其它实施例，都属于本发明保护的范围。

现有技术中，用户在利用智能电视上网时，由于网速慢或者图片较多，导致在页面加载过程中出现统一、单调的占位图，图2为现有技术中的页面加载图片占位图的示意图，如图2所示，占位图的图案相同，颜色相同，从而影响视觉效果，本发明技术方案针对该问题进行改进。

下面结合图1所示的界面图片的占位图的处理方法流程图，对本发明实施例提供的界面图片的占位图的处理方法进行详细说明。

如图1所示，本发明提供的界面图片的占位图的处理方法主要包括如下步骤：

步骤101，获取页面加载图片的尺寸数据和位置数据。

具体的，检测当前页面中需要加载的图片，提取尺寸数据和位置数据。其中，尺寸数据包括图片的长度、宽度以及面积数据等；位置数据包括该图片在当前页面中的位置坐标等。

获取需要加载的图片的尺寸数据和位置数据的目的是为了确定占位图的尺寸大小和排列位置，占位图的尺寸和位置设定与需要加载的图片的尺寸和位置应该完全相同。

步骤102，根据尺寸数据和位置数据生成页面加载图片的第一占位图。

调用数据库中的占位图，如果调用的占位图的尺寸和页面加载图片的尺寸完全相同，则将调用的占位图作为第一占位图，放置在页面加载图片的位置；如果调用的占位图和页面加载图片的尺寸不同，则将调用的占位图处理成与页面加载图片尺寸相同的第一占位图，放置在页面加载图片的位置，从而实现了占位图和页面加载图片的尺寸、位置完全相同。

步骤103，获取背景颜色参数值，背景颜色参数包含色相、饱和度和亮度。

具体的,利用随机函数在0-360之间选取色相值；在15-30之间选取饱和度值；在50-70之间选取亮度值。

在选取随机函数时,选用rand()和srand()函数。

在一个具体的实施例中,这两个函数的工作过程如下：

1)给srand()提供一个unsigned int类型的种子值，其取值范围从0-65535；

如果未设随机数种子值，rand()在调用时会自动设随机数种子值为1；

2)调用rand()，根据提供给srand()的种子值返回一个随机数(在0到32767之间)；

3)根据需要多次调用rand()，从而不间断地得到新的随机数；

4)随时都可以给srand()提供一个新的种子值，从而进一步将rand()的输出结果“随机化”。

其中,rand产生的随机数的范围从0到rand_max，对于产生设定范围的随机数,例如,产生从a到b范围的随机数,因为从a到b共有b-a+1个数,所以要产生从a到b的数,可以写成k＝rand()％(b-a+1)+a,从而能够实现产生设定范围的随机数。

在一个具体的实施例中,选用rand()和srand()函数,产生1-100之间的随机数的程序代码如下:

步骤104，根据背景颜色参数值生成第一占位图的背景颜色。

具体的,根据色相值、饱和度值和亮度值生成第一占位图的背景颜色，由于利用随机函数有可能产生重复取值的色相值、饱和度值和亮度值，因此有可能产生相同的背景颜色，导致达不到在页面中显示不同背景颜色占位图的目的，因此为了避免产生重复的背景颜色，可以在步骤103中的随机函数中加入去重处理的语句，具体程序语句如下：

srand((unsigned)time(NULL))；//初始化随机数。

步骤105，将第一占位图叠加在背景颜色上，生成第二占位图。

根据不同的背景颜色参数值得到不同的背景颜色时，将第一占位图叠加在不同的背景颜色上，从而得到不同背景颜色的第二占位图。

在一个优选的实施例中，将第一占位图的颜色设置为纯白色，透明度设置为10％。目的是将第一占位图叠加在不同的背景颜色上时，能够显示出不同的背景颜色的占位图，避免了占位图叠加之后完全覆盖背景颜色，导致无法凸显不同颜色的视觉效果。

步骤106，将第二占位图在页面上加载图片的位置进行显示。

将具有不同背景颜色的占位图在加载图片的位置显示，避免了相同图案、相同颜色的占位图的单调，从而呈现出色彩丰富的视觉效果。

在将第二占位图在页面上加载图片的位置进行显示之后，将页面加载图片覆盖在第二占位图上，从而实现图片加载。

本发明实施例提供的界面图片的占位图的处理方法，获取页面加载图片的尺寸数据和位置数据；根据尺寸数据和位置数据生成页面加载图片的第一占位图；获取背景颜色参数值，背景颜色参数包含色相、饱和度和亮度；根据背景颜色参数值生成第一占位图的背景颜色；将第一占位图叠加在背景颜色上，生成第二占位图；将第二占位图在页面上加载图片的位置进行显示。本发明实施例提供的方法，根据页面加载图片的尺寸和位置，生成不同背景颜色的占位图，避免了相同颜色占位图重复出现的单调，提升了用户体验。

专业人员应该还可以进一步意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件来实现，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明实施例的范围。具体地，所述运算和控制部分都可以通络逻辑硬件实现，其可以是使用集成电路工艺制造出来的逻辑集成电路，本实施例对此不作限定。

结合本文中所公开的实施例描述的方法或算法的步骤可以用硬件、处理器执行的软件模块，或者二者的结合来实施。软件模块可以置于随机存储器(RAM)、内存、只读存储器(ROM)、电可编程ROM、电可擦除可编程ROM、寄存器、硬盘、可移动磁盘、CD-ROM、或技术领域内所公知的任意其它形式的存储介质中。

以上所述的具体实施方式，对本发明实施例的目的、技术方案和有益效果进行了进一步详细说明，所应理解的是，以上所述仅为本发明实施例的具体实施方式而已，并不用于限定本发明实施例的保护范围，凡在本发明实施例的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明实施例的保护范围之内。