CN107436879A - 一种动态图片的加载方法和加载系统 - Google Patents

一种动态图片的加载方法和加载系统 Download PDF

Info

Publication number
CN107436879A
CN107436879A CN201610356542.1A CN201610356542A CN107436879A CN 107436879 A CN107436879 A CN 107436879A CN 201610356542 A CN201610356542 A CN 201610356542A CN 107436879 A CN107436879 A CN 107436879A
Authority
CN
China
Prior art keywords
data
static images
dynamic picture
dynamic
picture
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN201610356542.1A
Other languages
English (en)
Inventor
吴伟勇
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Alibaba China Co Ltd
Original Assignee
Guangzhou Dongjing Computer Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Guangzhou Dongjing Computer Technology Co Ltd filed Critical Guangzhou Dongjing Computer Technology Co Ltd
Priority to CN201610356542.1A priority Critical patent/CN107436879A/zh
Publication of CN107436879A publication Critical patent/CN107436879A/zh
Pending legal-status Critical Current

Links

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/957Browsing optimisation, e.g. caching or content distillation
    • G06F16/9574Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching

Landscapes

  • Engineering & Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Data Mining & Analysis (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

本发明提供了一种动态图片的加载方法,其包括:根据网页浏览请求获取网页上的每个动态图片数据,该每个动态图片数据包括第一帧静态图片数据和剩余帧静态图片数据的差量数据;将每个动态图片的所述第一帧静态图片数据发送给浏览器客户端进行图片显示并提示该图片为动态图片的一部分;浏览器客户端发出需要加载一个或多个动态图片的请求,服务器响应该请求将所述一个或多个动态图片的剩余帧静态图片数据的差量数据发送给浏览器客户端;浏览器客户端基于所接收的第一帧静态图片数据和剩余帧静态图片数据的差量数据显示相应的一个或多个动态图片。

Description

一种动态图片的加载方法和加载系统
技术领域
本发明涉及网络信息显示技术领域,具体而言,涉及一种动态图片的加载方法和加载系统。
背景技术
随着例如智能手机、平板电脑等智能终端的普及,使用移动浏览器登录移动互联网浏览网页的用户也越来越多。用户上移动互联网浏览的目的也是多种多样的,例如学习、工作、娱乐等。目前比较流行的娱乐网站上有专门提供娱乐性的动态图片,这是相当部分用户喜闻乐见的。针对动态图片这种娱乐形式,很多站点(比如动态图专题站,看图论坛)都运营了大量动态图片页面,以方便用户浏览。
除此之外,一些不以娱乐性为主的网站也会提供大量的动态图片,以满足部分用户的浏览需要,或是便于信息的发布。最常见的动态图片为图像互换格式(GIF,GraphicsInterchange Format)图片。动态图片的一个重要特点是其在一个文件中可以存多幅图像,并可以把存于一个文件中的多幅图像数据逐幅读出并显示到屏幕上,从而加载显示一种最简单的动画,构成了动态的效果。由于在一些网络网页中,一个网页会含有大量的动态图片,用户使用智能终端上的移动浏览器登录含有大量动态图片的网页时,这些动态图片通常会同时加载显示。
但是,用户使用智能终端上的移动浏览器浏览含有大量动态图片的网页时,当此时用户使用移动运营商的例如2G、3G或4G无线网络而非免费WiFi网络上网时,加载每个动态图片会损失不少网络流量;当一个网页上的大量动态图片同时动态加载显示时,用户为此损失的网络流量会更多。然而,用户不一定对一个网页上的所有动态图片都感兴趣,加载所有动态图片实质上并不必要的。
为此,需要一种新的动态图片的加载方法以减少用户使用2G、3G或4G无线网络浏览含有大量动态图片的网页时的网络流量损失。
发明内容
本发明的目的在于提供一种动态图片的加载方法和加载系统,以改善上述的问题。
本发明实施例提供了一种动态图片的加载方法,其包括:
根据网页浏览请求获取网页上的每个动态图片数据,该每个动态图片数据包括第一帧静态图片数据和剩余帧静态图片数据的差量数据;
将每个动态图片的所述第一帧静态图片数据发送给浏览器客户端进行图片显示并提示该图片为动态图片的一部分;
浏览器客户端发出需要加载一个或多个动态图片的请求,服务器响应该请求将所述一个或多个动态图片的剩余帧静态图片数据的差量数据发送给浏览器客户端;
浏览器客户端基于所接收的第一帧静态图片数据和剩余帧静态图片数据的差量数据显示相应的一个或多个动态图片。
优选的,在根据网页浏览请求获取网页上的每个动态图片数据的步骤中,服务器首先通过解析出的动态图片资源地址查询该动态图片数据是否已存储在缓存系统中,如果已缓存则通过缓存数据中的自定义信息识别和提取动态图片的第一帧静态图片数据;如果未缓存则从目标网站加载和保存该动态图片数据并且提取第一帧静态图片数据。
优选的,缓存系统中保存加载的动态图片数据的内容如下:
1)动态图片的URL地址,2)标识缓存的图片数据是动态图片数据的第一帧静态图片数据或者剩余帧静态图片数据的差量数据的自定义信息,3)第一帧静态图片数据,和4)剩余帧静态图片数据的差量数据。
优选的,在将每个动态图片的所述第一帧静态图片数据发送给浏览器客户端进行图片显示并提示该图片为动态图片的一部分的步骤中,还包括发送协定的私有协议声明,通过协定的私有协议声明告知浏览器客户端所发送的所述图片数据仅是动态图片的第一帧静态图片数据。
优选的,浏览器客户端在根据接收的协定的私有协议声明知道所接收的图片数据是动态图片的第一帧静态图片数据时,在显示的静态图片上提供用于提示该显示的图片为动态图片的图标。
优选的,在浏览器客户端发出需要加载一个或多个动态图片的请求,服务器响应该请求将所述一个或多个动态图片的剩余帧静态图片数据的差量数据发送给浏览器客户端的步骤中,浏览器客户端发出的请求包含协定的私有协议声明,在该私有协议声明中声明请求加载指定动态图片的剩余帧静态图片数据的差量数据;服务器还发送协定的私有协议声明,在该私有协议声明中声明所发送的数据是动态图片的剩余帧静态图片数据的差量数据。
本发明实施例提供了一种动态图片的加载系统,其包括:
所述浏览器客户端用于向服务器发出网页浏览请求;
所述服务器用于根据接收的网页浏览请求获取网页上的每个动态图片数据,该每个动态图片数据包括第一帧静态图片数据和剩余帧静态图片数据的差量数据,并且将每个动态图片的所述第一帧静态图片数据发送给所述浏览器客户端进行图片显示并提示该图片为动态图片的一部分;
所述浏览器客户端还用于向所述服务器发出需要加载一个或多个动态图片的请求;
所述服务器还用于响应该请求将所述一个或多个动态图片的剩余帧静态图片数据的差量数据发送给所述浏览器客户端;
所述浏览器客户端还用于基于所接收的第一帧静态图片数据和剩余帧静态图片数据的差量数据显示相应的一个或多个动态图片。
优选的,所述服务器用于在根据接收的网页浏览请求获取网页上的每个动态图片数据的过程中,首先通过解析出的动态图片资源地址查询该动态图片数据是否已存储在缓存系统中,如果已缓存则通过缓存数据中的自定义信息识别和提取动态图片的第一帧静态图片数据;如果未缓存则从目标网站加载和保存该动态图片数据并且提取第一帧静态图片数据。
优选的,缓存系统中保存加载的动态图片数据的内容如下:
1)动态图片的URL地址,2)标识缓存的图片数据是动态图片数据的第一帧静态图片数据或者剩余帧静态图片数据的差量数据的自定义信息,3)第一帧静态图片数据,和4)剩余帧静态图片数据的差量数据。
优选的,所述服务器用于在向浏览器客户端发送动态图片的所述第一帧静态图片数据的同时,还发送协定的私有协议声明,通过协定的私有协议声明告知浏览器客户端所发送的所述图片数据仅是动态图片的第一帧静态图片数据。
优选的,所述浏览器客户端用于在根据接收的协定的私有协议声明知道所接收的图片数据是动态图片的第一帧静态图片数据时,在显示的静态图片上提供用于提示该显示的图片为动态图片的图标。
优选的,所述浏览器客户端还用于在向所述服务器发出需要加载一个或多个动态图片的请求时,该请求包含协定的私有协议声明,在该私有协议声明中声明请求加载指定动态图片的剩余帧静态图片数据的差量数据;所述服务器还用于在响应该请求将所述一个或多个动态图片的剩余帧静态图片数据的差量数据发送给所述浏览器客户端时,还发送协定的私有协议声明,在该私有协议声明中声明所发送的数据是动态图片的剩余帧静态图片数据的差量数据。
根据本发明的动态图片的加载方法和加载系统,尤其适用于gif格式的动态图片,该加载方法和加载系统提出一种按需求加载动态图片数据的思路,将动态图片数据分离成第一帧静态图片数据、和剩余帧静态图片数据的差量数据来分别保存在缓存系统中,先显示第一帧静态图片数据,由用户选择是否需要显示该动态图片,从而实现按需求加载动态图片,并且在传输动态图片的剩余帧静态图片数据时使用传输差量数据的方式,可以有效地利用已传送到浏览器客户端的第一帧静态图片数据,减少不必要的图片数据传输,针对动态图片的加载显示节省了网络流量,改善了用户使用2G、3G或4G无线网络浏览含有大量动态图片的网页时网络流量损失过多的问题,而且还加快了页面的整体显示速度。
附图说明
图1是本发明的动态图片的加载方法的流程图;
图2是本发明的动态图片的加载系统的方框图。
具体实施方式
下面将结合本发明实施例和附图,对本发明实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅是本发明一部分实施例,而不是全部的实施例。通常在此处附图中描述和示出的本发明实施例的组件可以以各种不同的配置来布置和设计。因此,以下对在附图中提供的本发明的实施例的详细描述并非旨在限制要求保护的本发明的范围,而是仅仅表示本发明的选定实施例。基于本发明的实施例,本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例,都属于本发明保护的范围。
下面将结合本发明的附图和具体实施例,对本发明的技术方案进行清楚、完整地描述。
图1是本发明的动态图片的加载方法的流程图。如图1所示,本发明实施例所提供的动态图片的加载方法包括:
第一步:根据网页浏览请求获取网页上的每个动态图片数据,该每个动态图片数据包括第一帧静态图片数据和剩余帧静态图片数据的差量数据。
用户通过浏览器客户端登录某一网页时,浏览器客户端会向服务器发出网页浏览请求,该请求一般是GET命令。服务器接收到这个请求后,根据网页浏览请求按照既定逻辑加载相关网页以及该页面引用的外联资源,例如Javascript,CSS,图片等。本发明实施例的目的是讲述如何加载动态图片,在此将不赘述不相关的外联资源内容,对其省略。具体举例来说,当用户浏览器客户端登录某一提供大量动态图片的网页时,浏览器客户端会向服务器发出网页浏览请求,服务器解析该网页浏览请求,根据每个动态图片的URL地址去获取图片数据。在本步骤里。服务器首先通过解析出的动态图片资源地址查询该动态图片数据是否已存储在缓存系统中,如果已缓存则通过缓存数据中的自定义信息识别和提取该动态图片的第一帧静态图片数据;如果未缓存则从目标网站加载和保存该动态图片数据并且提取第一帧静态图片数据,其中无论是缓存系统已经保存的动态图片数据还是刚从目标网站加载和保存的动态图片数据,其都包括第一帧静态图片数据、和剩余帧静态图片数据的差量数据,其中所述剩余帧静态图片数据的差量数据是所述剩余帧静态图片数据相对于所述第一帧静态图片数据的差量数据。关于查询,下面将会讲到缓存系统保存动态图片数据时会保存该动态图片的URL地址,因此服务器在解析该网页浏览请求得到动态图片的URL地址时就能够通过解析出的动态图片资源地址查询出该动态图片数据是否已存储在缓存系统中。另外,这里再解释一下,缓存系统中保存动态图片数据时是将第一帧静态图片数据和剩余帧静态图片数据的差量数据分开保存,其中该差量数据是剩余帧静态图片数据相对于第一帧静态图片数据的差量数据。关于差量数据的获得,可以使用本领域公知技术来实现,这里不再赘述。
通常,存储图片数据的缓存系统使用key-value缓存服务(非关系型数据库nosql),memcache就是这一类缓存服务的典型代表。
图片数据在key-value缓存服务系统存储时,key值使用图片资源地址,value则是图片资源的http头部信息及body数据。现针对缓存自定义信息的简单实现,举例如下:
key:
http://ww1.sinaimg.cn/mw1024/64a97821gw1eedgoldpy6g20ca06p4lf.gif
value:
1)自定义信息:k1:v1;k2:v2,其固定在第1行,基于”;”分割的字段对分别是标识名称及标识值,比如k1和k2是标识名称,v1和v2是相应的标识值,都使用文本格式。
2)http头部长度标识字段:行数,其固定在第2行。比如http头部信息共有8行,则“行数”设定为“8”。
3)图片资源的http头部信息,从第3行开始,以换行符分隔。
4)body数据。
本发明实施例方案所述的“自定义信息”则是存在于上述的“自定义信息”的其中一个字段对,k1:v1或k2:v2。
关于标识图片缓存数据是动态图片的第一帧静态图片数据还是剩余帧静态图片数据,其标识名称及字段值如下:
标识字段名称:motion_pic(动态图片)
标识字段值:first(标识该图片缓存数据是动态图片的第一帧静态图片数据)
delta_rest(标识该图片缓存数据是动态图片的剩余帧静态图片的差量数据)
intact(标识该动态图片缓存数据是完整数据)。
需要说明的是,上述的图片缓存自定义信息的格式还可以有多种实现方式,这里只是其中一种相对简单的实现示例。
因此,概要的说,缓存系统中保存加载的动态图片数据的内容如下:
1)动态图片的URL地址,2)标识缓存的图片数据是动态图片数据的第一帧静态图片数据或者剩余帧静态图片数据的差量数据的自定义信息,3)第一帧静态图片数据,和4)剩余帧静态图片数据的差量数据。
第二步:将每个动态图片的所述第一帧静态图片数据发送给浏览器客户端进行图片显示并提示该图片为动态图片的一部分。
服务器将获取的每个动态图片的所述第一帧静态图片数据发送给浏览器客户端上,以便显示出图片信息,并且向浏览器客户端提示所发送的第一帧静态图片是动态图片的一部分。
通常在浏览器后台服务和浏览器客户端之间都是使用私有协议进行请求及数据应答的,其目的是保证安全性,同时在请求中携带有效的客户端信息。
例如,可以在应答数据的协议区域中使用以下方式来声明应答的动态图片内容:
协议字段名称:动态图片应答标识
协议字段标识:0x28(十六进制数)
协议字段值:1字节(byte类型),其取值区间是:
0:表示返回的图片数据是第一帧静态图片数据
1:表示返回的图片数据是剩余帧静态图片数据的差量数据
2:表示返回的图片数据是动态图片的完整数据。
浏览器客户端在解析应答数据的协议区域时,检测到“0x28”值,识别出这个是“动态图片应答标识”字段,则把紧随的1个字节的协议字段值转换为byte类型,并按照协议字段值的取值区间的定义来识别该动态图片数据是哪种类型:第一帧静态图片数据或剩余帧静态图片数据的差量数据。
因此,服务器向浏览器客户端发送动态图片的所述第一帧静态图片数据的同时,还发送协定的私有协议声明,通过协定的私有协议声明告知浏览器客户端所发送的所述图片数据仅是动态图片的第一帧静态图片数据,以此向浏览器客户端提示所发送的第一帧静态图片是动态图片的一部分。
浏览器客户端接到服务器发送的数据包,解析之后根据接收的协定的私有协议声明知道所接收的图片数据是动态图片的第一帧静态图片数据,则在显示的静态图片上提供用于提示该显示的图片为动态图片的图标。这种提示图标的方式有多种,常见的提示图标是在显示的图片上(常在图片下方)显示一个播放按钮图标,例如内含一个三角形的圆圈图标。
第三步:浏览器客户端发出需要加载一个或多个动态图片的请求,服务器响应该请求将所述一个或多个动态图片的剩余帧静态图片数据的差量数据发送给浏览器客户端。
浏览器客户端发出的需要加载一个或多个动态图片的请求还包含协定的私有协议声明,在该私有协议声明中声明请求加载指定动态图片的剩余帧静态图片数据的差量数据;服务器在发送所述一个或多个动态图片的剩余帧静态图片数据的差量数据的过程中,还发送协定的私有协议声明,在该私有协议声明中声明所发送的数据是动态图片的剩余帧静态图片数据的差量数据。
举例来说,浏览器客户端在请求数据的协议区域中使用以下方式来声明请求哪种类型的动态图片数据。
协议字段名称:动态图片请求标识
协议字段标识:0x18(十六进制数)
协议字段值:1字节(byte类型),其取值区间是:
0:请求动态图片的完整数据
1:请求动态图片的剩余帧静态图片数据的差量数据。
服务器在解析请求数据的协议区域时,检测到“0x18”值,识别出这个是“动态图片请求标识”字段,则把紧随的1个字节的协议字段值转换为byte类型,并按照协议字段值的取值区间的定义来识别客户端请求的动态图片数据的剩余帧静态图片数据的差量数据。
在一个优选实施例中,用户点击通过在显示的静态图片上提供的用于提示该显示的图片为动态图片的图标,来使浏览器客户端发出需要加载一个或多个动态图片的请求。
而服务器响应该请求将所述一个或多个动态图片的剩余帧静态图片数据的差量数据发送给浏览器客户端的过程中,还要发送协定的私有协议声明,该私有协议声明如上所述,可以在应答数据的协议区域中使用以下方式来声明应答的动态图片内容:
协议字段名称:动态图片应答标识
协议字段标识:0x28(十六进制数)
协议字段值:1字节(byte类型),其取值区间是:
0:表示返回的图片数据是第一帧静态图片数据
1:表示返回的图片数据是剩余帧静态图片数据的差量数据
2:表示返回的图片数据是动态图片的完整数据。
第四步:浏览器客户端基于所接收的第一帧静态图片数据和剩余帧静态图片数据的差量数据显示相应的一个或多个动态图片。
浏览器客户端在解析应答数据的协议区域时,检测到“0x28”值,识别出这个是“动态图片应答标识”字段,则把紧随的1个字节的协议字段值转换为byte类型,并按照协议字段值的取值区间的定义来识别该动态图片数据是哪种类型:第一帧静态图片数据和剩余帧静态图片数据的差量数据。
浏览器客户端接收到相应图片数据后,将所接收的第一帧静态图片数据和剩余帧静态图片的差量数据还原为完整的动态图片并显示。
以上所述实施例,使用了剩余帧静态图片数据相对于第一帧静态图片数据的差量数据。但除了使用差量数据,其还可以是剩余帧静态图片的完整的图片数据,但是由于当剩余帧静态图片数据是完整的图片数据时,这在实现动态图片显示时会有一些难度,主要在于重组图片数据方面,增加了装载有浏览器客户端的智能终端的运算量,并且数据传输过程中需要传送的数据量更多,会浪费网络流量,所以该实例不是优选的。
以上所述实施例,还有一个术语“动态图片的完整数据”,该动态图片的完整数据是应用于非本发明的技术方案被使用的场景,这里不再赘述。
根据本发明实施例提供的动态图片的加载方法,尤其适用于gif格式的动态图片,该方法提出一种按需求加载动态图片数据的思路,将动态图片数据分离成第一帧静态图片数据、和剩余帧静态图片数据的差量数据来分别保存在缓存系统中,先显示第一帧静态图片数据,由用户选择是否需要显示该动态图片,从而实现按需求加载动态图片,并且在传输动态图片的剩余帧静态图片数据时使用传输差量数据的方式,可以有效地利用已传送到浏览器客户端的第一帧静态图片数据,减少不必要的图片数据传输,针对动态图片的加载显示节省了网络流量,改善了用户使用2G、3G或4G无线网络浏览含有大量动态图片的网页时网络流量损失过多的问题,而且还加快了页面的整体显示速度。另外,从技术方案的实施方而言,不需要站点方在页面上实现原生的技术方案,直接可以在浏览器层面进行实施。
图2是本发明的动态图片的加载系统的方框图。如图2所示,本发明实施例所提供的动态图片的加载系统包括:服务器和浏览器客户端,其中:
所述浏览器客户端用于向服务器发出网页浏览请求;
所述服务器用于根据接收的网页浏览请求获取网页上的每个动态图片数据,该每个动态图片数据包括第一帧静态图片数据和剩余帧静态图片数据的差量数据,并且将每个动态图片的所述第一帧静态图片数据发送给所述浏览器客户端进行图片显示并提示该图片为动态图片的一部分;
所述浏览器客户端还用于向所述服务器发出需要加载一个或多个动态图片的请求;
所述服务器还用于响应该请求将所述一个或多个动态图片的剩余帧静态图片数据的差量数据发送给所述浏览器客户端;
所述浏览器客户端还用于基于所接收的第一帧静态图片数据和剩余帧静态图片数据的差量数据显示相应的一个或多个动态图片。
另外,所述服务器还用于在根据接收的网页浏览请求获取网页上的每个动态图片数据的过程中,首先通过解析出的动态图片资源地址查询该动态图片数据是否已存储在缓存系统中,如果已缓存则通过缓存数据中的自定义信息识别和提取动态图片的第一帧静态图片数据;如果未缓存则从目标网站加载和保存该动态图片数据并且提取第一帧静态图片数据。
另外,缓存系统中保存加载的动态图片数据的内容如下:
1)动态图片的URL地址,2)标识缓存的图片数据是动态图片数据的第一帧静态图片数据或者剩余帧静态图片数据的差量数据的自定义信息,3)第一帧静态图片数据,和4)剩余帧静态图片数据的差量数据。
另外,所述服务器用于在向浏览器客户端发送动态图片的所述第一帧静态图片数据的同时,还发送协定的私有协议声明,通过协定的私有协议声明告知浏览器客户端所发送的所述图片数据仅是动态图片的第一帧静态图片数据。
另外,所述浏览器客户端用于在根据接收的协定的私有协议声明知道所接收的图片数据是动态图片的第一帧静态图片数据时,在显示的静态图片上提供用于提示该显示的图片为动态图片的图标。
另外,所述浏览器客户端还用于在向所述服务器发出需要加载一个或多个动态图片的请求时,该请求包含协定的私有协议声明,在该私有协议声明中声明请求加载指定动态图片的剩余帧静态图片数据的差量数据;所述服务器还用于在响应该请求将所述一个或多个动态图片的剩余帧静态图片数据的差量数据发送给所述浏览器客户端时,还发送协定的私有协议声明,在该私有协议声明中声明所发送的数据是动态图片的剩余帧静态图片数据的差量数据。
所述动态图片的加载系统包含的浏览器客户端和服务器所执行的具体功能和交互方式可参见结合图1描述的方法实施例的相关记载,尤其是各个功能实现的详细过程和原理,这里不过多重复。
根据本发明的动态图片的加载系统,尤其适用于gif格式的动态图片,该加载系统提出一种按需求加载动态图片数据的思路,将动态图片数据分离成第一帧静态图片数据、和剩余帧静态图片数据的差量数据来分别保存在缓存系统中,先显示第一帧静态图片数据,由用户选择是否需要显示该动态图片,从而实现按需求加载动态图片,并且在传输动态图片的剩余帧静态图片数据时使用传输差量数据的方式,可以有效地利用已传送到浏览器客户端的第一帧静态图片数据,减少不必要的图片数据传输,针对动态图片的加载显示节省了网络流量,改善了用户使用2G、3G或4G无线网络浏览含有大量动态图片的网页时网络流量损失过多的问题,而且还加快了页面的整体显示速度。
本发明实施例所提供的动态图片的加载方法的计算机程序产品,包括存储了程序代码的计算机可读存储介质,所述程序代码包括的指令可用于执行前面方法实施例中所述的方法,具体实现可参见方法实施例,在此不再赘述。
所属领域的技术人员可以清楚地了解到,为描述的方便和简洁,上述描述的装置的具体工作过程,可以参考前述方法实施例中的对应过程,在此不再赘述。
所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时,可以存储在一个计算机可读取存储介质中。基于这样的理解,本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来,该计算机软件产品存储在一个存储介质中,包括若干指令用以使得一台计算机设备(可以是个人计算机,服务器,或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括:U盘、移动硬盘、只读存储器(ROM,Read-Only Memory)、随机存取存储器(RAM,Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。
以上所述,仅为本发明的具体实施方式,但本发明的保护范围并不局限于此,任何熟悉本技术领域的技术人员在本发明揭露的技术范围内,可轻易想到变化或替换,都应涵盖在本发明的保护范围之内。因此,本发明的保护范围应以所述权利要求的保护范围为准。

Claims (12)

1.一种动态图片的加载方法,其包括:
根据网页浏览请求获取网页上的每个动态图片数据,该每个动态图片数据包括第一帧静态图片数据和剩余帧静态图片数据的差量数据;
将每个动态图片的所述第一帧静态图片数据发送给浏览器客户端进行图片显示并提示该图片为动态图片的一部分;
浏览器客户端发出需要加载一个或多个动态图片的请求,服务器响应该请求将所述一个或多个动态图片的剩余帧静态图片数据的差量数据发送给浏览器客户端;
浏览器客户端基于所接收的第一帧静态图片数据和剩余帧静态图片数据的差量数据显示相应的一个或多个动态图片。
2.根据权利要求1所述的动态图片的加载方法,其特征在于,在根据网页浏览请求获取网页上的每个动态图片数据的步骤中,服务器首先通过解析出的动态图片资源地址查询该动态图片数据是否已存储在缓存系统中,如果已缓存则通过缓存数据中的自定义信息识别和提取动态图片的第一帧静态图片数据;如果未缓存则从目标网站加载和保存该动态图片数据并且提取第一帧静态图片数据。
3.根据权利要求2所述的动态图片的加载方法,其特征在于,缓存系统中保存加载的动态图片数据的内容如下:
1)动态图片的URL地址,2)标识缓存的图片数据是动态图片数据的第一帧静态图片数据或者剩余帧静态图片数据的差量数据的自定义信息,3)第一帧静态图片数据,和4)剩余帧静态图片数据的差量数据。
4.根据权利要求1所述的动态图片的加载方法,其特征在于,在将每个动态图片的所述第一帧静态图片数据发送给浏览器客户端进行图片显示并提示该图片为动态图片的一部分的步骤中,还包括发送协定的私有协议声明,通过协定的私有协议声明告知浏览器客户端所发送的所述图片数据仅是动态图片的第一帧静态图片数据。
5.根据权利要求4所述的动态图片的加载方法,其特征在于,浏览器客户端在根据接收的协定的私有协议声明知道所接收的图片数据是动态图片的第一帧静态图片数据时,在显示的静态图片上提供用于提示该显示的图片为动态图片的图标。
6.根据权利要求1-5之一所述的动态图片的加载方法,其特征在于,在浏览器客户端发出需要加载一个或多个动态图片的请求,服务器响应该请求将所述一个或多个动态图片的剩余帧静态图片数据的差量数据发送给浏览器客户端的步骤中,浏览器客户端发出的请求包含协定的私有协议声明,在该私有协议声明中声明请求加载指定动态图片的剩余帧静态图片数据的差量数据;服务器还发送协定的私有协议声明,在该私有协议声明中声明所发送的数据是动态图片的剩余帧静态图片数据的差量数据。
7.一种动态图片的加载系统,包括服务器和浏览器客户端,其特征在于:
所述浏览器客户端用于向服务器发出网页浏览请求;
所述服务器用于根据接收的网页浏览请求获取网页上的每个动态图片数据,该每个动态图片数据包括第一帧静态图片数据和剩余帧静态图片数据的差量数据,并且将每个动态图片的所述第一帧静态图片数据发送给所述浏览器客户端进行图片显示并提示该图片为动态图片的一部分;
所述浏览器客户端还用于向所述服务器发出需要加载一个或多个动态图片的请求;
所述服务器还用于响应该请求将所述一个或多个动态图片的剩余帧静态图片数据的差量数据发送给所述浏览器客户端;
所述浏览器客户端还用于基于所接收的第一帧静态图片数据和剩余帧静态图片数据的差量数据显示相应的一个或多个动态图片。
8.根据权利要求7所述的动态图片的加载系统,其特征在于,所述服务器用于在根据接收的网页浏览请求获取网页上的每个动态图片数据的过程中,首先通过解析出的动态图片资源地址查询该动态图片数据是否已存储在缓存系统中,如果已缓存则通过缓存数据中的自定义信息识别和提取动态图片的第一帧静态图片数据;如果未缓存则从目标网站加载和保存该动态图片数据并且提取第一帧静态图片数据。
9.根据权利要求8所述的动态图片的加载系统,其特征在于,缓存系统中保存加载的动态图片数据的内容如下:
1)动态图片的URL地址,2)标识缓存的图片数据是动态图片数据的第一帧静态图片数据或者剩余帧静态图片数据的差量数据的自定义信息,3)第一帧静态图片数据,和4)剩余帧静态图片数据的差量数据。
10.根据权利要求7所述的动态图片的加载系统,其特征在于,所述服务器用于在向浏览器客户端发送动态图片的所述第一帧静态图片数据的同时,还发送协定的私有协议声明,通过协定的私有协议声明告知浏览器客户端所发送的所述图片数据仅是动态图片的第一帧静态图片数据。
11.根据权利要求10所述的动态图片的加载系统,其特征在于,所述浏览器客户端用于在根据接收的协定的私有协议声明知道所接收的图片数据是动态图片的第一帧静态图片数据时,在显示的静态图片上提供用于提示该显示的图片为动态图片的图标。
12.根据权利要求7-11之一所述的动态图片的加载系统,其特征在于,所述浏览器客户端还用于在向所述服务器发出需要加载一个或多个动态图片的请求时,该请求包含协定的私有协议声明,在该私有协议声明中声明请求加载指定动态图片的剩余帧静态图片数据的差量数据;所述服务器还用于在响应该请求将所述一个或多个动态图片的剩余帧静态图片数据的差量数据发送给所述浏览器客户端时,还发送协定的私有协议声明,在该私有协议声明中声明所发送的数据是动态图片的剩余帧静态图片数据的差量数据。
CN201610356542.1A 2016-05-25 2016-05-25 一种动态图片的加载方法和加载系统 Pending CN107436879A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201610356542.1A CN107436879A (zh) 2016-05-25 2016-05-25 一种动态图片的加载方法和加载系统

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201610356542.1A CN107436879A (zh) 2016-05-25 2016-05-25 一种动态图片的加载方法和加载系统

Publications (1)

Publication Number Publication Date
CN107436879A true CN107436879A (zh) 2017-12-05

Family

ID=60453409

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201610356542.1A Pending CN107436879A (zh) 2016-05-25 2016-05-25 一种动态图片的加载方法和加载系统

Country Status (1)

Country Link
CN (1) CN107436879A (zh)

Cited By (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109284183A (zh) * 2018-10-17 2019-01-29 广州市百果园信息技术有限公司 动图播放方法、装置、计算机存储介质和终端
CN109710359A (zh) * 2018-12-25 2019-05-03 广州市百果园信息技术有限公司 动图显示方法、装置、计算机可读存储介质和终端
CN109739607A (zh) * 2018-12-29 2019-05-10 深圳乐信软件技术有限公司 动态图像加载方法、装置、设备及存储介质
CN110351599A (zh) * 2019-07-29 2019-10-18 阿里巴巴集团控股有限公司 动画文件播放方法、装置及终端设备
CN112363778A (zh) * 2020-11-19 2021-02-12 微医云(杭州)控股有限公司 一种动态图片加载方法、装置、电子设备以及存储介质
CN113688341A (zh) * 2021-10-25 2021-11-23 深圳市明源云空间电子商务有限公司 动态图片分解方法、装置、电子设备及可读存储介质
CN113849142A (zh) * 2021-09-26 2021-12-28 深圳市火乐科技发展有限公司 图像展示方法、装置、电子设备及计算机可读存储介质
WO2023061073A1 (zh) * 2021-10-12 2023-04-20 Oppo广东移动通信有限公司 动画播放方法、装置、存储介质及电子设备

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
EP1598827A1 (en) * 2004-05-07 2005-11-23 InterVideo Inc. Video editing system and method
CN103002026A (zh) * 2012-11-26 2013-03-27 北京奇虎科技有限公司 向计算终端提供图片数据的方法及服务器
CN103139292A (zh) * 2013-01-22 2013-06-05 深圳市深信服电子科技有限公司 在http代理中处理图片的方法、代理服务器及系统
CN103856507A (zh) * 2012-11-30 2014-06-11 腾讯科技(深圳)有限公司 网络动态图片的静态显示方法和装置
CN103942307A (zh) * 2014-04-18 2014-07-23 网宿科技股份有限公司 一种基于图片流的前端加速方法
CN104915437A (zh) * 2015-06-24 2015-09-16 上海二三四五网络科技有限公司 一种对多帧图像文件进行分割处理的控制方法及控制装置

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
EP1598827A1 (en) * 2004-05-07 2005-11-23 InterVideo Inc. Video editing system and method
CN103002026A (zh) * 2012-11-26 2013-03-27 北京奇虎科技有限公司 向计算终端提供图片数据的方法及服务器
CN103856507A (zh) * 2012-11-30 2014-06-11 腾讯科技(深圳)有限公司 网络动态图片的静态显示方法和装置
CN103139292A (zh) * 2013-01-22 2013-06-05 深圳市深信服电子科技有限公司 在http代理中处理图片的方法、代理服务器及系统
CN103942307A (zh) * 2014-04-18 2014-07-23 网宿科技股份有限公司 一种基于图片流的前端加速方法
CN104915437A (zh) * 2015-06-24 2015-09-16 上海二三四五网络科技有限公司 一种对多帧图像文件进行分割处理的控制方法及控制装置

Non-Patent Citations (2)

* Cited by examiner, † Cited by third party
Title
杨帆编著: "《数字图像处理与分析(第3版)》", 31 May 2015, 北京航空航天大学出版社 *
王婷婷: "视频拍摄时帧内压缩和帧间压缩的区别", 《HTTPS://WWW.ZHIHU.COM/QUESTION/20237091/ANSWER/15795367》 *

Cited By (13)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109284183A (zh) * 2018-10-17 2019-01-29 广州市百果园信息技术有限公司 动图播放方法、装置、计算机存储介质和终端
CN109710359A (zh) * 2018-12-25 2019-05-03 广州市百果园信息技术有限公司 动图显示方法、装置、计算机可读存储介质和终端
CN109710359B (zh) * 2018-12-25 2022-03-01 广州市百果园信息技术有限公司 动图显示方法、装置、计算机可读存储介质和终端
CN109739607B (zh) * 2018-12-29 2021-11-09 深圳乐信软件技术有限公司 动态图像加载方法、装置、设备及存储介质
CN109739607A (zh) * 2018-12-29 2019-05-10 深圳乐信软件技术有限公司 动态图像加载方法、装置、设备及存储介质
CN110351599A (zh) * 2019-07-29 2019-10-18 阿里巴巴集团控股有限公司 动画文件播放方法、装置及终端设备
CN110351599B (zh) * 2019-07-29 2021-12-21 创新先进技术有限公司 动画文件播放方法、装置及终端设备
CN112363778A (zh) * 2020-11-19 2021-02-12 微医云(杭州)控股有限公司 一种动态图片加载方法、装置、电子设备以及存储介质
CN112363778B (zh) * 2020-11-19 2023-03-24 微医云(杭州)控股有限公司 一种动态图片加载方法、装置、电子设备以及存储介质
CN113849142A (zh) * 2021-09-26 2021-12-28 深圳市火乐科技发展有限公司 图像展示方法、装置、电子设备及计算机可读存储介质
CN113849142B (zh) * 2021-09-26 2024-05-28 深圳市火乐科技发展有限公司 图像展示方法、装置、电子设备及计算机可读存储介质
WO2023061073A1 (zh) * 2021-10-12 2023-04-20 Oppo广东移动通信有限公司 动画播放方法、装置、存储介质及电子设备
CN113688341A (zh) * 2021-10-25 2021-11-23 深圳市明源云空间电子商务有限公司 动态图片分解方法、装置、电子设备及可读存储介质

Similar Documents

Publication Publication Date Title
CN107436879A (zh) 一种动态图片的加载方法和加载系统
CN109863527B (zh) 用于展现的本地内容的服务器侧渲染的方法和系统
CN103365695B (zh) 加快子资源加载速度的方法和装置
CN101446983B (zh) 一种实现移动终端获取网页的方法、系统和设备
JP5040030B2 (ja) サーバサイドアバタープリレンダリングのシステム及び方法
US7509397B1 (en) Web portholes: using web proxies to capture and enhance display real estate
CN104216695B (zh) 提供页面待展现信息及展现页面信息的方法及系统
CN101295302B (zh) 广告投放系统及方法
JP2018504705A (ja) ページ読み込み速度を増大させるための方法及びシステム
CN104426985B (zh) 显示网页的方法、装置及系统
CN102387125B (zh) 访问微博的方法和系统及微博网站图片发送方法和系统
CN103412928A (zh) 一种在移动终端实现浏览器页面智能响应式布局的方法与装置
CN103353886A (zh) 预览网页的方法及系统
US20180373736A1 (en) Method and apparatus for storing resource and electronic device
CN103425699A (zh) 获取网页的方法、设备和系统
CN112764795B (zh) 一种面向服务的跨平台跨终端信息发布系统和方法
CN108076157A (zh) 消息内容推送控制方法、系统及计算机设备
CN103092834A (zh) 浏览网页图片的方法及客户端装置
CN104809116A (zh) 一种收藏内容的方法、装置及终端
CN105955714A (zh) 混合开发前端mvc框架实现方法和系统
CN102340523B (zh) 移动终端及下载方法、服务器及数据发送方法
CN103856543B (zh) 一种视频处理方法、移动终端及服务器
CN106658064A (zh) 虚拟礼物展示方法及装置
CN102402514A (zh) 展示微博客人页的方法和装置
CN105095220B (zh) 一种浏览器实现方法、终端和虚拟化代理装置

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
TA01 Transfer of patent application right

Effective date of registration: 20200527

Address after: 310052 room 508, floor 5, building 4, No. 699, Wangshang Road, Changhe street, Binjiang District, Hangzhou City, Zhejiang Province

Applicant after: Alibaba (China) Co.,Ltd.

Address before: 510627 Guangdong city of Guangzhou province Whampoa Tianhe District Road No. 163 Xiping Yun Lu Yun Ping B radio square 14 storey tower

Applicant before: GUANGZHOU UCWEB COMPUTER TECHNOLOGY Co.,Ltd.

TA01 Transfer of patent application right
RJ01 Rejection of invention patent application after publication

Application publication date: 20171205

RJ01 Rejection of invention patent application after publication