CN103914450A

CN103914450A - 移动终端平台中网页图片呈现方法和装置

Info

Publication number: CN103914450A
Application number: CN201210591517.3A
Authority: CN
Inventors: 杜立召
Original assignee: Beijing Feinno Communication Technology Co Ltd
Current assignee: Beijing Feinno Communication Technology Co Ltd
Priority date: 2012-12-31
Filing date: 2012-12-31
Publication date: 2014-07-09
Anticipated expiration: 2032-12-31
Also published as: CN103914450B

Abstract

本发明公开了一种移动终端平台中网页图片呈现方法和装置。本发明实施例提供的一种移动终端平台中网页图片呈现方法包括：建立由第一图片控件、第二图片控件和图像互换格式Gif图片控件构成的控件模板；当移动终端需要从网络中下载网页图片并显示时，启动控件模板；利用第一图片控件加载关联的占位图片，并在需要显示网页图片的位置显示占位图片；建立网页图片和第二图片控件的关联，在网页图片下载完毕后，利用第二图片控件加载关联的网页图片，当加载成功时，利用加载的网页图片替换占位图片，当加载失败时，判断网页图片的类型；当为Gif图片时，利用Gif图片控件解析该网页图片，由解析后的网页图片替换占位图片并展示该网页图片。

Description

移动终端平台中网页图片呈现方法和装置

技术领域

本发明涉及终端平台开发技术领域，特别涉及一种移动终端平台中网页图片呈现方法和装置。

背景技术

随着智能终端技术的飞速发展，移动终端正在从简单的通话工具变为一个综合信息处理平台。目前的移动终端能够支持安卓（Android）、WindowsPhone等多种系统平台，移动终端的处理能力日益强大。

然而，现有的移动终端平台不支持GIF(Graphics Interchange Format，图像互换格式)图片，无法成功加载Gif图片并展示出来，影响了移动终端的性能，并且，当移动终端从网络中下载网页图片速度较慢时，移动终端在网页图片的显示位置显示为空，向用户提供的数据量过少，用户体验较差。

发明内容

本发明提供了一种移动终端平台中网页图片呈现方法和装置，以解决现有移动终端平台不支持Gif图片的问题以及当网页图片下载过慢，移动终端在网页图片的显示位置显示为空，导致向用户提供的数据量过少的问题等。

为达到上述目的，本发明实施例采用了如下技术方案：

本发明实施例提供了一种移动终端平台中网页图片呈现方法，所述方法包括：

建立由第一图片控件、第二图片控件和图像互换格式Gif图片控件构成的控件模板，所述第一图片控件和第二图片控件由平台中的图像控件实现，所述Gif图片控件由支持Gif图片的第三方开源控件实现；

当移动终端需要从网络中下载网页图片并显示时，启动所述控件模板；

利用所述第一图片控件加载关联的占位图片，并在需要显示网页图片的位置显示占位图片，所述第一图片控件与占位图片相关联；

建立网页图片和第二图片控件的关联，在网页图片下载完毕后，利用所述第二图片控件加载关联的网页图片，当加载成功时，利用加载的网页图片替换所述占位图片，当加载失败时，判断所述网页图片的类型；

当所述网页图片的类型为Gif图片时，利用所述Gif图片控件解析该网页图片，由解析后的网页图片替换所述占位图片并展示该网页图片。

本发明实施例还提供了一种移动终端平台中网页图片呈现装置，包括：

控件模板建立单元，用于建立由第一图片控件、第二图片控件和Gif图片控件构成的控件模板，所述第一图片控件和第二图片控件由平台中的图像控件实现，所述Gif图片控件由支持Gif图片的第三方开源控件实现；

控件模板启动单元，用于当移动终端需要从网络中下载网页图片并显示时，启动所述控件模板；

占位图片显示单元，用于利用所述第一图片控件加载关联的占位图片，并在需要显示网页图片的位置显示占位图片，所述第一图片控件与占位图片相关联；

网页图片加载单元，用于建立网页图片和第二图片控件的关联，在网页图片下载完毕后，利用所述第二图片控件加载关联的网页图片，当加载成功时，利用加载的网页图片替换所述占位图片，当加载失败时，判断所述网页图片的类型；

Gif图片处理单元，用于当所述网页图片的类型为Gif图片时，利用所述Gif图片控件解析该网页图片，由解析后的网页图片替换所述占位图片并展示该网页图片。

由上所述，本发明实施例通过在移动终端平台中设置Gif图片控件，利用Gif图片控件解析移动终端下载到的Gif网页图片，从而能够使移动终端实现对Gif图片的展示，增强了移动终端的性能。并且，本发明实施例利用第一图片控件能够在展示网页图片之前在相应位置展示包含一定信息的占位图片，从而能够向用户提供更多的信息，提高资源的利用率，增强用户体验；而利用第二图片控件则保证了移动终端对Gif类型之外的图片的正常加载和显示，保证了各种类型图片的成功展示。

附图说明

为了更清楚地说明本发明实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本发明一个实施例提供的一种移动终端平台中网页图片呈现方法流程图；

图2为本发明又一个实施例提供的一种移动终端平台中网页图片呈现装置结构示意图。

具体实施方式

为使本发明的目的、技术方案和优点更加清楚，下面将结合附图对本发明实施方式作进一步地详细描述。

本发明一个实施例提供的一种移动终端平台中网页图片呈现方法，参见图1，所述方法包括：

S100：建立由第一图片控件、第二图片控件和Gif图片控件构成的控件模板，第一图片控件和第二图片控件由平台中的图像（Image）控件实现，即第一图片控件和第二图片控件可以由移动终端操作系统中的Image控件实现，Gif图片控件由支持Gif图片的第三方开源控件实现，例如，Gif图片控件可以采用开源组件ImageTools来实现，ImageTools是Silverlight下图片处理的一个开源类库，能够把图片转换成不同格式以及具有对图片进行处理等功能。

由上可知，在控件模板中设置了三个图片控件，第一图片控件用于处理占位图片（如预定的本地图片），第二图片控件用于处理需要加载的图片，以及Gif图片控件用于处理需要加载的Gif图片。

S101：当移动终端需要从网络中下载网页图片并显示时，启动控件模板。

启动控件模板时，首先会执行控件的构造函数，在控件构造函数里加载建立的控件模版，该构造函数为控件模板的执行入口。

S102：加载占位图片。

利用所述第一图片控件加载关联的占位图片，并在需要显示网页图片的位置显示占位图片，该第一图片控件与占位图片相关联。

在下载网页图片以及该网页图片的过程中，即在网页图片能够正常显示之前，先将选取的占位图片显示在移动终端上，占位图片的显示位置可以为移动终端浏览器页面中显示网页图片的位置。

本实施例中为第一图片控件建立第一控件属性，表示为_backImage属性，第一控件属性指示第一图片控件与占位图片关联以及占位图片的地址，该属性可以赋值给控件模板里的第一图片控件，通过第一控件属性建立第一图片控件与占位图片的关联；

为第二图片控件建立第二控件属性，表示为_frontImage，第二控件属性指示第二图片控件与网页图片关联以及网页图片的地址，_frontImage属性用来定义要加载的图片，此属性会赋值给模板里的第二图片控件，通过第二控件属性建立第二图片控件与网页图片的关联；

为Gif图片控件建立第三控件属性，表示为_gifImage，第三控件属性指示该控制支持Gif图片，此属性会赋值给模板里的Gif图片控件。

S103：加载网页图片。

建立网页图片和第二图片控件的关联，在网页图片下载完毕后，利用所述第二图片控件加载关联的网页图片。

本实施例还为控件模板建立第一依赖属性，表示为SourceProperty，和第二依赖属性，表示为PlaceholderSourceProperty。本方法中的各步骤可以由运行在前台的代码结合运行在后台的代码实现，依赖属性SourceProperty提供给前台使用来设置网页图片的地址，PlaceholderSourceProperty提供给前台使用以设置占位图片的地址。

前台代码可以从移动终端下载的网页数据中得到网页图片的地址，利用前台运行代码获取的网页图片的地址设置第二依赖属性的数值，并利用第二依赖属性的数值修改第二控件属性的数值，以将第二图片控件与当前需要呈现的网页图片相关联。

利用前台运行代码获取的占位图片的地址设置第一依赖属性的数值，该占位图片的地址可以由用户通过前台交互界面预定指定。利用第一依赖属性的数值修改第一控件属性的数值，以将第一图片控件与当前使用的占位图片相关联。

在利用依赖属性的数值修改控件属性的数值时，本实施例通过继承控制（Control）父类的模板应用（OnApplyTemplate）方法,在OnApplyTemplate方法中将前台赋值给控件模板的依赖属性的数值传递给控件模板，并且对控件模板中设置的控件绑定处理的事件。此事件首先从控件模板中取出相应的控件，然后根据暴露给前台的依赖属性来获取用户设置的相应的值，并且把这些值赋值给取出的相应控件中的控件属性。

S104：是否成功加载网页图片，若是，执行步骤S105，若否执行步骤S106。

S105：当加载成功时，利用加载的网页图片替换占位图片。

对于Jpeg、png等移动终端平台本身支持的图片，利用由平台中的Image控件实现的第二图片控件能够成功实现对这些图片的加载，加载完成时会触发第二图片控件的图像打开（ImageOpened）事件，此时将控件模板中的两个Image控件的显示状态切换，将所述第一图片控件的显示状态设置为隐藏，并将所述第二图片控件的显示状态设置为展示，从而将刚加载完成的网页图片设成显示，将占位图片隐藏，实现图片的替换。

S106：当加载失败时，判断网页图片的类型是否为Gif类型，若是，执行步骤S107，若否，确认图片加载失败。

S107：利用Gif图片控件解析网页图片并显示。

由于移动终端平台自身的操作系统不支持Gif图，对于Gif图的加载会触发图片失败（ImageFailed）事件，此时判断加载的图片类型是不是Gif类型，如果是Gif类型，利用所述Gif图片控件解析该网页图片，由解析后的网页图片替换所述占位图片并展示该网页图片。将所述第一图片控件的显示状态设置为隐藏，并将所述Gif图片控件的显示状态设置为展示，从而展示Gif类型的网页图片，隐藏占位图片。

进一步的，本实施例为控件模板建立第三依赖属性，表示为PlayGifModelProperty。利用前台运行代码获取的模式设置指令修改第三依赖属性的数值，以控制所述Gif图片控件展示网页图片的模式（AnimationMode），该模式包括静止（None）模式、循环播放（Repeat）模式和单次播放（PlayOnce）模式，从而丰富了Gif图片的显示方式，提高了显示的灵活性。

本实施例中由主线程启动对网页图片的加载过程，加载启动后，主线程将加载操作交由后台线程执行，由后台线程对网页图片进行相应处理，并将处理结果返回至主线程，从而实现了一种异步加载图片的处理机制，相比于将所有操作都由主线程处理的同步记载方式，本实施例能够提高图片加载速度，使图片数据更快速地展示在移动终端上，提高了用户体验。

为了便于清楚描述本发明实施例的技术方案，在发明的实施例中，采用了“第一”、“第二”等字样对功能和作用基本相同的相同项或相似项进行区分，本领域技术人员可以理解“第一”、“第二”等字样并不对数量和执行次序进行限定。

本发明又一实施例还提供了一种移动终端平台中网页图片呈现装置，参见图2，所述装置包括：

控件模板建立单元200，用于建立由第一图片控件、第二图片控件和Gif图片控件构成的控件模板，所述第一图片控件和第二图片控件由平台中的图像控件实现，所述Gif图片控件由支持Gif图片的第三方开源控件实现；

控件模板启动单元201，用于当移动终端需要从网络中下载网页图片并显示时，启动所述控件模板；

占位图片显示单元202，用于利用所述第一图片控件加载关联的占位图片，并在需要显示网页图片的位置显示占位图片，所述第一图片控件与占位图片相关联；

网页图片加载单元203，用于建立网页图片和第二图片控件的关联，在网页图片下载完毕后，利用所述第二图片控件加载关联的网页图片，当加载成功时，利用加载的网页图片替换所述占位图片，当加载失败时，判断所述网页图片的类型；

Gif图片处理单元204，用于当所述网页图片的类型为Gif图片时，利用所述Gif图片控件解析该网页图片，由解析后的网页图片替换所述占位图片并展示该网页图片。

其中，控件模板建立单元200，还用于为第一图片控件建立第一控件属性，第一控件属性指示第一图片控件与占位图片关联以及占位图片的地址；为第二图片控件建立第二控件属性，第二控件属性指示第二图片控件与网页图片关联以及网页图片的地址；为Gif图片控件建立第三控件属性，第三控件属性指示该控制支持Gif图片；以及，占位图片显示单元202通过第一控件属性获知第一图片控件与占位图片的关联；网页图片加载单元203通过第二控件属性建立并获知第二图片控件与网页图片的关联。

进一步的，控件模板建立单元200，还用于为控件模板建立第一依赖属性和第二依赖属性，以及，占位图片显示单元202，用于利用前台运行代码获取的占位图片的地址设置第一依赖属性的数值，并利用第一依赖属性的数值修改第一控件属性的数值，以将第一图片控件与当前使用的占位图片相关联；网页图片加载单元203，用于利用前台运行代码获取的网页图片的地址设置第二依赖属性的数值，并利用第二依赖属性的数值修改第二控件属性的数值，以将第二图片控件与当前需要呈现的网页图片相关联。

进一步的，控件模板建立单元200，还用于为控件模板建立第三依赖属性；Gif图片处理单元204，用于利用前台运行代码获取的模式设置指令修改第三依赖属性的数值，以控制Gif图片控件展示网页图片的模式，模式包括静止模式、循环播放模式和单次播放模式。

进一步的，网页图片加载单元203，用于将所述第一图片控件的显示状态设置为隐藏，并将所述第二图片控件的显示状态设置为展示，以利用加载的网页图片替换所述占位图片；Gif图片处理单元204，用于将所述第一图片控件的显示状态设置为隐藏，并将所述Gif图片控件的显示状态设置为展示，以由解析后的网页图片替换所述占位图片。

本发明装置实施例中各单元的具体工作方式可以参见本发明的方法实施例，在此不再赘述。本装置可以应用在WindowsPhone等各种移动终端平台上。

以上所述仅为本发明的较佳实施例而已，并非用于限定本发明的保护范围。凡在本发明的精神和原则之内所作的任何修改、等同替换、改进等，均包含在本发明的保护范围内。

Claims

1.一种移动终端平台中网页图片呈现方法，其特征在于，所述方法包括：

2.根据权利要求1所述的方法，其特征在于，所述方法包括：

为所述第一图片控件建立第一控件属性，所述第一控件属性指示第一图片控件与占位图片关联以及占位图片的地址；

为所述第二图片控件建立第二控件属性，所述第二控件属性指示第二图片控件与网页图片关联以及网页图片的地址；

为所述Gif图片控件建立第三控件属性，所述第三控件属性指示该控制支持Gif图片；以及，

通过第一控件属性建立第一图片控件与占位图片的关联；

通过第二控件属性建立第二图片控件与网页图片的关联。

3.根据权利要求2所述的方法，其特征在于，所述方法还包括：

为所述控件模板建立第一依赖属性和第二依赖属性，以及，

利用前台运行代码获取的占位图片的地址设置所述第一依赖属性的数值，并利用第一依赖属性的数值修改第一控件属性的数值，以将第一图片控件与当前使用的占位图片相关联；

利用前台运行代码获取的网页图片的地址设置所述第二依赖属性的数值，并利用第二依赖属性的数值修改第二控件属性的数值，以将第二图片控件与当前需要呈现的网页图片相关联。

4.根据权利要求2所述的方法，其特征在于，所述方法还包括：

为所述控件模板建立第三依赖属性，以及，利用前台运行代码获取的模式设置指令修改第三依赖属性的数值，以控制所述Gif图片控件展示网页图片的模式，所述模式包括静止模式、循环播放模式和单次播放模式。

5.根据权利要求1所述的方法，其特征在于，所述方法还包括：

所述利用加载的网页图片替换所述占位图片包括：将所述第一图片控件的显示状态设置为隐藏，并将所述第二图片控件的显示状态设置为展示；

所述由解析后的网页图片替换所述占位图片包括：将所述第一图片控件的显示状态设置为隐藏，并将所述Gif图片控件的显示状态设置为展示。

6.一种移动终端平台中网页图片呈现装置，其特征在于，所述装置包括：

7.根据权利要求6所述的装置，其特征在于，所述控件模板建立单元，还用于为所述第一图片控件建立第一控件属性，所述第一控件属性指示第一图片控件与占位图片关联以及占位图片的地址；为所述第二图片控件建立第二控件属性，所述第二控件属性指示第二图片控件与网页图片关联以及网页图片的地址；为所述Gif图片控件建立第三控件属性，所述第三控件属性指示该控制支持Gif图片；以及，

所述占位图片显示单元通过第一控件属性获知第一图片控件与占位图片的关联；

所述网页图片加载单元通过第二控件属性建立并获知第二图片控件与网页图片的关联。

8.根据权利要求7所述的装置，其特征在于，所述方法还包括：

所述控件模板建立单元，还用于为所述控件模板建立第一依赖属性和第二依赖属性，以及，

所述占位图片显示单元，用于利用前台运行代码获取的占位图片的地址设置所述第一依赖属性的数值，并利用第一依赖属性的数值修改第一控件属性的数值，以将第一图片控件与当前使用的占位图片相关联；

所述网页图片加载单元，用于利用前台运行代码获取的网页图片的地址设置所述第二依赖属性的数值，并利用第二依赖属性的数值修改第二控件属性的数值，以将第二图片控件与当前需要呈现的网页图片相关联。

9.根据权利要求7所述的装置，其特征在于，所述方法还包括：

所述控件模板建立单元，还用于为所述控件模板建立第三依赖属性；

所述Gif图片处理单元，用于利用前台运行代码获取的模式设置指令修改第三依赖属性的数值，以控制所述Gif图片控件展示网页图片的模式，所述模式包括静止模式、循环播放模式和单次播放模式。

10.根据权利要求6所述的装置，其特征在于，所述方法还包括：

所述网页图片加载单元，用于将所述第一图片控件的显示状态设置为隐藏，并将所述第二图片控件的显示状态设置为展示，以利用加载的网页图片替换所述占位图片；

所述Gif图片处理单元，用于将所述第一图片控件的显示状态设置为隐藏，并将所述Gif图片控件的显示状态设置为展示，以由解析后的网页图片替换所述占位图片。