CN101123607B - 一种网页中图片信息动态刷新的方法和装置 - Google Patents

Abstract

本发明提供了一种网页中图片信息动态刷新的方法和装置，该方法包括：在网页中预置第一图片层和第二图片层，所述两个图片层在该网页中的大小、位置相同，所述第一图片层的属性为正常显示，所述第二图片层的属性为隐藏；接收刷新触发消息；从服务器获取新的图片信息，在第二图片层中装载和显示该图片信息；当所述第二图片层处理完毕，则将第一图片层的属性改为隐藏，将第二图片层的属性改为正常显示。本发明在针对现有技术的仔细分析的基础上，提出了采用双层显示的方式来解决“闪烁”问题，通过一层显示一层隐藏替换的方式完成。由于完全避免了网页背景数据的出现，从而能够完全的、从根本上消除“闪烁”问题。

Description

一种网页中图片信息动态刷新的方法和装置

技术领域

本发明网络信息交换领域，特别是涉及一种网页中图片信息动态刷新的方法和装置。 

背景技术

目前随着互联网技术应用的越来越广泛，人们很多的日常工作和娱乐都在网络上进行，信息对人们的重要性越来越高。当用户浏览一些含有实时数据的网页时(例如，股票信息、在线情况等等)，往往需要不断的手动刷新整个网页，才能保证所获得的是最新的信息数据。为了满足用户对实时性数据的需要，减少用户手动的工作量，现有技术提供了一种动态网页刷新的方法，即用户无需对整个网页进行刷新，网页中的数据即可实时的进行刷新。例如，针对网页中需要动态显示的地方采用iframe(浮动帧或者子窗体)技术，令iframe里的叶子动态刷新即可。当然，实际当中，还有很多其他类似的技术实现方案，在此不一一列举了。 

对于一般的文本数据而言，上述解决方案是比较完美的，但是在很多情况下，动态刷新的数据是以图片的形式展现的，例如，各种针对被监控对象的曲线图或者表格等等。而针对现有的网络传输速率而言，最新的图片信息的传输需要时间(用户不能忽略的时间)，即前后两个图片信息的动态替换存在间隔，尤其应用在无线网络中更是如此。一般情况下，如果动态刷新一图片数据，则往往产生“闪烁”现象，即触发刷新之后，向服务器端获取新的图片，清空原图片的存储空间，则原图片消失，显现该网页的背景数据，等新的图片下载完毕之后，才能正常显示新的图片；从而导致动态图表的显示很不流畅，用户需要忍受图标不断的“闪烁”。 

现有技术中，进一步的解决方案是：为了缩短前后两个图片信息的动态替换存在的时间间隔，当新图片下载完成一部分数据时，就先展示该部分的图片信息，然后边继续下载边展示，直到完成整个图片信息的下载。 

总之，上述的现有技术都无法从根本上解决“闪烁”现象，所以需要本领域技术人员迫切解决的一个技术问题就是：如何能够高效、无闪烁的完成网页 中图片信息的动态刷新。 

发明内容

本发明所要解决的技术问题是提供一种网页中图片信息的动态刷新方法和装置，能够高效、无闪烁的完成前后两个图片信息的动态替换；实现前后两个图片之间的“无缝”切换。 

为了解决上述问题，本发明公开了一种网页中图片信息动态刷新的方法，包括：在网页中预置第一图片层和第二图片层，所述两个图片层在该网页中的大小、位置相同，所述第一图片层的属性为正常显示，所述第二图片层的属性为隐藏；接收刷新触发消息；从服务器获取新的图片信息，在第二图片层中装载和显示该图片信息；当所述第二图片层处理完毕，则将第一图片层的属性改为隐藏，将第二图片层的属性改为正常显示，以向客户端显示所述第二图片层。 

优选的，所述网页中包括多组相对应的第一图片层和第二图片层。 

优选的，所述网页中的各组图片层为同步刷新或者依次刷新。 

其中，从服务器端获取图片信息的通信方式为：有线通信或者无线通信。 

依据本发明的另一实施例，公开了一种网页中图片信息动态刷新的装置，设置于网页中，包括： 

预置器，用于在网页中预置第一图片层和第二图片层，所述两个图片层在该网页中的大小、位置相同，所述第一图片层的属性为正常显示，所述第二图片层的属性为隐藏； 

触发器，用于接收刷新触发消息； 

装载器，用于从服务器获取新的图片信息，在第二图片层中装载和显示该图片信息； 

切换器，用于当所述第二图片层处理完毕，则将第一图片层的属性改为隐藏，将第二图片层的属性改为正常显示，以向客户端显示所述第二图片层。 

优选的，所述装置包括多组相对应的第一图片层和第二图片层。 

优选的，所述装置针对各组图片层进行同步刷新或者依次刷新。 

其中，所述装载器从服务器端获取图片信息的通信方式为：有线通信或者无线通信。 

与现有技术相比，本发明具有以下优点： 

由于现有技术中，为了刷新获取新的图片信息，则必须清空当前图片信息， 以接收和存储所获取的新图片信息数据，所以才出现“闪烁”现象。本发明在针对现有技术的仔细分析的基础上，提出了采用双层显示的方式来解决“闪烁”问题，通过一层显示一层隐藏替换的方式完成。因此，当该部分图片需要动态刷新时，总是在隐藏的层中装载图片，图片装载完毕后，在显示该层的新图片，隐藏另一层的旧图片即可，由于完全避免了网页背景数据的出现，从而能够完全的、从根本上消除“闪烁”问题。 

附图说明

图1是本发明一种网页中图片信息动态刷新的方法实施例的步骤流程图； 

图2a、图2b和图2c为图片层替换的示意图； 

图3是本发明一种网页中图片信息动态刷新的装置实施例的结构框图； 

图4是本发明另一网页中图片信息动态刷新的装置实施例的结构框图。 

具体实施方式

为使本发明的上述目的、特征和优点能够更加明显易懂，下面结合附图和具体实施方式对本发明作进一步详细的说明。 

本发明可用于众多通用或专用的计算系统环境或配置中。例如：个人计算机、服务器计算机、手持设备或便携式设备、平板型设备、多处理器系统、基于微处理器的系统、可编程的消费电子设备、网络PC、小型计算机、大型计算机、包括以上任何系统或设备的分布式计算环境等等。 

本发明可以在由计算机执行的计算机可执行指令的一般上下文中描述，例如程序模块。一般地，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构等等。也可以在分布式计算环境中实践本发明，在这些分布式计算环境中，由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中，程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。 

参照图1，示出了本发明一种网页中图片信息动态刷新的方法实施例，具体可以包括以下步骤： 

步骤101、在网页中预置第一图片层和第二图片层，所述两个图片层在该 网页中的大小、位置相同，所述第一图片层的属性为正常显示，所述第二图片层的属性为隐藏； 

步骤102、接收刷新触发消息； 

步骤103、从服务器获取新的图片信息，在第二图片层中装载和显示该图片信息； 

步骤104、当所述第二图片层处理完毕，则将第一图片层的属性改为隐藏，将第二图片层的属性改为正常显示。 

由于图片所能承载的信息比文本所能承载的信息量更大或者更形象，因此，在网页中很多需要动态刷新的信息都采用图片的形式展示。例如，股票信息的实时数据或曲线图、在线人数图示或者对客户端运行情况的监控图等等。但是由于图片格式所需的数据量比文本要大很多，以及现有通信方式中传输速率的影响，导致数据刷新和切换并不能瞬间完成，因此，本发明提出了备份图片层的构思以解决该问题。 

本发明所述的图片可以为各种现有技术支持的格式。例如，可以包括但不限于下述的各种格式：BMP：Windows位图，Bitmap的缩写；PNG：可移植网络图形，Portable Network Graphics的缩写；JPEG：联合摄影专家组，JointPhotographic Experts Group的缩写；GIF：图形交换格式，Graphics InterchangeFormat的缩写；TIFF：标记图像文件格式，Tagged Image File Format的缩写；DXF：AutoCAD绘图交换文件，Drawing Exchange Format的缩写；CGM：计算机图形图元文件；WMF：Windows图元文件，Microsoft Windows Metafile的缩写；EMF：增强型图元文件，Enhanced Metafile的缩写；PICT：用于Macintosh Quick Draw图片的格式，全称为QuickDraw Picture format。 

一般情况下，一个网页上可以设置有一组相对应的第一图片层和第二图片层，数据动态刷新时，仅仅刷新而部分相应的数据即可。至于具体的实现可以采用iframe技术实现，例如，首先针对需要更新部分的代码的<font>项命名id，然后插入iframe，自定义刷新的时间，读取服务器端数据库数据，然后使用Javascript(JavaScript是一种类似文件一样的描述语言，透过浏览器就可以直接执行，在此不再详述)，代码如下即可： 

<script> 

top.(id).innerHTML＝(更新的数据) 

</script> 

优选的，在本发明的另一实施例中，所述网页中包括多组相对应的第一图片层和第二图片层，即可以包含多个需要动态刷新的子窗体。而进一步，在同一网页中的所述各个动态刷新的子窗体可以采用同步刷新的方式，即接收相同的触发消息，同时刷新；当然，也可以分别响应针对该子窗体的触发消息，分别进行刷新，例如，依次按顺序分别进行。至于具体的刷新顺序，则本领域技术人员根据实际应用的情况自行设定即可，本发明无需加以限定。 

图1所示实施例中，从服务器端获取图片信息的通信方式可以采用各种可行的有线通信方式，例如，包括但不限于ADSL(Asymmetric Digital SubscriberLoop，非对称数字用户环路)、局域网宽带接入等方式等等。当然，从服务器端获取图片信息的通信方式可以采用各种可行的无线通信方式，例如，包括但不限于GSM(Global System for Mobile Communications，全球移动通讯系统)、GPRS(General Packet Radio Service，通用无线分组业务)、EDGE(EnhancedData Rate for GSM Evolution，增强型数据速率GSM演进技术)、CDMA(CodeDivision Multiple Access，码分多址)、以及近程无线传输方式(例如，红外、蓝牙)等等。 

在上述通信方式的基础上，该网页和服务器之间可以选用该通信方式支持的各种服务或者协议，例如，Internet网络方式；WAP(Wireless ApplicationProtocol，无线应用协议)方式；或者专用客户端等等。 

参照图2，示出了图片层替换的示意图，说明如下： 

(1)、在网页上准备好两个大小、位置相同的层，两个层的索引号或者ID不同，一个时刻只有一个层能被看到，另一个层隐藏。如图2a，假定在上面的层为A层，下面的层为B层； 

(2)、先在A层中显示图片1，需要更新图片2时，在B层中装载并显示图片2(注意：此时B层被隐藏，是看不到的)，如图2b； 

(3)、当B层图片2装载完毕时，把A层隐藏，这样B层上的图片2立刻能够被网页浏览者看到，如图2c； 

(4)、再次需要更新图片时，先在隐藏的A层中装载并显示图片，装载完毕后再显示A层，隐藏B层。 

参照图3，示出了一种网页中图片信息动态刷新的装置实施例，该装置3 00设置于网页中，具体可以包括： 

位于在网页中的第一图片层301和第二图片层302，所述两个图片层在该网页中的大小、位置相同，所述第一图片层的属性为正常显示，所述第二图片层的属性为隐藏； 

触发器303，产生触发消息，启动装载器304； 

装载器304，用于从服务器获取新的图片信息，在第二图片层中装载和显示该图片信息； 

切换器305，用于当所述第二图片层处理完毕，则将第一图片层的属性改为隐藏，将第二图片层的属性改为正常显示。 

其中，所述装载器从服务器端获取图片信息的通信方式可以为：有线通信或者无线通信。 

优选的，参照图4，所述装置可以包括多组(例如，图中的三组)相对应的第一图片层和第二图片层。所述装置针对各组图片层可以进行同步刷新，则得到触发消息后，装载器304可以启动多个线程同时向服务器端请求数据，当然，也可以同时启动多个装载器304分别向服务器端请求数据。 

进一步，所述装置针对各组图片层可以进行分别刷新，例如，依次刷新，则收到触发消息后，装载器304可以启动一个线程针对当前图片层组向服务器端请求数据，完成后，接收另一触发消息，针对相应的另一图片层组向服务器端请求数据即可。 

本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。对于系统实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。 

以上对本发明所提供的一种网页中图片信息动态刷新的方法和装置，进行了详细介绍，本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。 

Claims (8)

1.一种网页中图片信息动态刷新的方法，其特征在于，包括：

在网页中预置第一图片层和第二图片层，所述两个图片层在该网页中的大小、位置相同，所述第一图片层的属性为正常显示，所述第二图片层的属性为隐藏；

接收刷新触发消息；

从服务器获取新的图片信息，在第二图片层中装载和显示该图片信息；

当所述第二图片层处理完毕，则将第一图片层的属性改为隐藏，将第二图片层的属性改为正常显示，以向客户端显示所述第二图片层。

2.如权利要求1所述的方法，其特征在于，所述网页中包括多组相对应的第一图片层和第二图片层。

3.如权利要求2所述的方法，其特征在于，所述网页中的各组图片层为同步刷新或者依次刷新。

4.如权利要求1所述的方法，其特征在于，从服务器端获取图片信息的通信方式为：有线通信或者无线通信。

5.一种网页中图片信息动态刷新的装置，其特征在于，设置于网页中，包括：

预置器，用于在网页中预置第一图片层和第二图片层，所述两个图片层在该网页中的大小、位置相同，所述第一图片层的属性为正常显示，所述第二图片层的属性为隐藏；

触发器，用于接收刷新触发消息；

装载器，用于从服务器获取新的图片信息，在第二图片层中装载和显示该图片信息；

切换器，用于当所述第二图片层处理完毕，则将第一图片层的属性改为隐藏，将第二图片层的属性改为正常显示，以向客户端显示所述第二图片层。

6.如权利要求5所述的装置，其特征在于，所述装置包括多组相对应的第一图片层和第二图片层。

7.如权利要求6所述的装置，其特征在于，所述装置针对各组图片层进行同步刷新或者依次刷新。

8.如权利要求5所述的装置，其特征在于，所述装载器从服务器端获取图片信息的通信方式为：有线通信或者无线通信。

Images