CN103853417A - 网络动态图片的滚动分页显示方法和装置 - Google Patents
网络动态图片的滚动分页显示方法和装置 Download PDFInfo
- Publication number
- CN103853417A CN103853417A CN201210504533.4A CN201210504533A CN103853417A CN 103853417 A CN103853417 A CN 103853417A CN 201210504533 A CN201210504533 A CN 201210504533A CN 103853417 A CN103853417 A CN 103853417A
- Authority
- CN
- China
- Prior art keywords
- picture
- dynamic picture
- label
- dynamic
- display
- 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.)
- Granted
Links
Images
Landscapes
- Information Transfer Between Computers (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本申请公开了一种网络动态图片的滚动分页显示方法和装置,包括:图片访问下载模块从服务器下载网络动态图片到本地;可视区域确定模块根据滚动条的滚动值实时确定当前网页可视区域的取值范围;遍历处理模块遍历所述下载到本地的动态图片;针对每一动态图片,判断该动态图片的预定位置是否在所述可视区域的取值范围内;如果在则创建显示标签来显示对应的图片;否则不创建对应的显示标签,并在已经创建对应显示标签的情况下删除该显示标签;之后显示模块刷新网页,执行所述显示标签以加载显示对应的图片。本发明既可以实现利用滚动条的滚动操作来实现滚动分页显示动态图片,又可以降低对内存和GDI对象的占用,提高客户端的处理效率。
Description
技术领域
本申请涉及网络信息显示处理技术领域,尤其涉及一种网络动态图片的滚动分页显示方法和装置。
背景技术
目前的互联网络上出现了大量的动态图片。最常见的动态图片为图像互换格式(GIF,Graphics Interchange Format)图片。动态图片的一个重要特点是其在一个文件中可以存多幅图像,并可以把存于一个文件中的多幅图像数据逐幅读出并显示到屏幕上,从而加载显示一种最简单的动画,构成了动态的效果。
客户端,例如浏览器或其他可以浏览网页的客户端,在有些场景下需要访问浏览大量的动态图片,例如在动态图片搜索引擎的搜索结果页面,需要加载显示大量符合搜索条件的动态图片。在这种场景下,现有的动态图片展示技术通常采用点击分页技术来分页显示动态图片。其缺点是:
在显示页面中显示分页文字链接或者按钮,当用户希望查看下一页的动态图片时,需要寻找下一页对应的文字链接或按钮,并点击该文字链接或按钮,才能显示出下一分页的动态图片。因此这种现有技术操作繁琐:用户首先需要在当前页面中查找下一页对应的文字链接或按钮的位置,查找到后需要点击该文字链接或按钮才能触发显示下一分页的动态图片,不但查找操作费时费力,而且需要用户进行点击操作,用户的操作量较大,操作繁琐。
目前,在显示网页中的静态图片的技术中,为了解决分页显示静态图片的上述类似问题,出现了一种根据滚动条的滚动,在一个页面中滚动分页显示静态图片的技术,即:首先默认下载第一分页的静态图片,并在当前页面内加载显示第一分页的静态图片;当滚动条向下滚动时,则再下载下一分页的静态图片,并在当前页面中加载显示下一分页的静态图片。通过滚动滚动条这种简单操作就可实现在同一页面中逐次滚动加载显示所有分页的静态图片,省去用户查找、点击文字链接或按钮的繁琐操作。当用户需要返回查看上一分页的静态图片时,同样不需要查找、点击文字链接或按钮,而是向上滚动滚动条即可。
但是,上述现有技术在现实静态图片的加载显示时有效,但是如果直接应用于动态图片的加载显示,则会出现以下技术问题:
上述现有技术采用滚动分页显示图片,当加载显示完所有分页的图片后,所有的图片会加载显示在同一个网页上,每加载显示一个图片会占用本地设备的相应量的内存和图形设备接口(GDI,Graphics Device Interface)对象。对于静态图片的加载显示来讲,一个静态图片通常只会占用少量的内存和GDI对象,例如一个静态图片通常占用一个GDI对象。而对加载显示动态图片来讲,则其占用的内存量和GDI对象的数量会急剧增长。例如通常加载显示一个动态图片占用的GDI对象的数量为20至30个。采用上述现有的滚动分页显示动态图片的技术,在加载完多个分页的时候,当前网页上加载显示的动态图片所占用的内存和GDI对象的数量会急剧增高。例如假设每个分页包括18张动态图片,加载12个分页后就会在当前网页上加载显示198张动态图片,所占用的GDI对象可达4000多个,而通常的客户端软件仅仅支持几千个GDI对象,因此会导致用于浏览该网页的客户端的处理效率的降低,在本地设备性能相对落后的情况下,还可能会直接导致该客户端崩溃。
发明内容
有鉴于此,本发明的主要目的在于提供一种动态图片的分页显示方法和装置,以降低对内存和GDI对象的占用,提高客户端的处理效率。
本发明的技术方案是这样实现的:
一种网络动态图片的滚动分页显示方法,包括:
从服务器下载网络动态图片到本地;
根据滚动条的滚动值实时确定当前网页可视区域的取值范围;
遍历所述下载到本地的动态图片;针对每一动态图片,判断该动态图片在当前网页的预定位置是否在所述当前网页可视区域的取值范围内;如果是则在未创建该动态图片对应的显示标签的情况下在该预定位置创建显示标签来显示对应的图片;否则不创建对应的显示标签,并在已经创建对应显示标签的情况下删除该显示标签;
刷新网页,执行所述显示标签以加载显示对应的图片。
一种网络动态图片的滚动分页显示装置,包括:
图片访问下载模块,用于从服务器下载网络动态图片到本地;
可视区域确定模块,用于根据滚动条的滚动值实时确定当前网页可视区域的取值范围;
遍历处理模块,用于遍历所述下载到本地的动态图片;针对每一动态图片,判断该动态图片在当前网页的预定位置是否在所述当前网页可视区域的取值范围内;如果是则在未创建该动态图片对应的显示标签的情况下创建显示标签来显示对应的图片;否则不创建对应的显示标签,并在已经创建对应显示标签的情况下删除该显示标签;
第一显示模块,用于刷新网页,执行所述显示标签以加载显示对应的图片。
与现有技术相比,本发明先将网络上的动态图片下载到本地,然后确定当前网页可视区域的取值范围,判断每一下载到本地的动态图片在当前网页中的预定位置是否在当前网页可视区域内,如果在可视区域内则创建显示标签来显示对应的图片(可以直接显示对应的动态图片,也可以先显示该动态图片的静态化图片,在鼠标触发后再显示该动态图片),否则不创建对应的显示标签来显示对应的图片,并且在已经创建对应显示标签的情况下需要删除该显示标签,从而使当前网页的可视区域内只加载显示预定位置在该可视区域内的动态图片。采用本发明,既可以实现利用滚动条的滚动操作来实现滚动分页显示动态图片的目的,同时由于可以实现只实时加载显示可视区域内的动态图片,同时加载显示的动态图片的数量大大减少,降低了对本地设备的内存和GDI对象的占用,提高了客户端的处理效率,降低了由于对内存和GDI对象的大量占用导致客户端崩溃的几率。
附图说明
图1为本发明所述网络动态图片的滚动分页显示方法的一种流程图;
图2为一种可视区域、滚动条和整体内容的对比示意图;
图3为本发明所述方法的进一步实施例的一种流程图;
图4为本发明所述网络动态图片的滚动分页显示装置的一种实施例组成示意图;
图5为一种实施例中所述图片访问下载模块的组成示意图;
图6为本发明所述网络动态图片的滚动分页显示装置的又一种实施例组成示意图。
具体实施方式
下面结合附图及具体实施例对本发明再作进一步详细的说明。
本发明的方法由具有网络信息浏览功能的客户端执行,所述客户端例如可以是浏览器,也可以是其它具有网页浏览器内核的客户端。具体可以由网页脚本语言(如javascript)实现所述步骤。本发明可以适用于任何需要显示多个动态图片的网页,尤其可以适用于网络动态图片搜索引擎中的搜索结果页面的显示。
图1为本发明所述网络动态图片的滚动分页显示方法的一种流程图。参见图1,该方法主要包括:
步骤101、从服务器下载网络动态图片到本地。
步骤102、根据滚动条的滚动值实时确定当前网页可视区域的取值范围。
步骤103、一旦可视区域的取值范围发生改变后,则遍历所述下载到本地的动态图片;针对每一动态图片,判断该动态图片在当前网页的预定位置是否在所述当前网页可视区域的取值范围内;如果是则在未创建该动态图片对应的显示标签的情况下在该预定位置创建显示标签来显示对应的图片;否则不创建对应的显示标签,并在已经创建对应显示标签的情况下删除该显示标签。
本步骤中,一种更为具体的遍历处理实现方式是:如果当前动态图片在当前网页的预定位置在所述当前网页可视区域的取值范围内,则判断该动态图片是否已经创建了对应的显示标签,如果是则遍历下一动态图片,否则在该动态图片的所述预定位置处创建对应的显示标签,在该显示标签内标记需对应显示的图片,接着遍历下一动态图片;如果该动态图片在当前网页的预定位置不在当前网页可视区域的取值范围内,则判断该动态图片是否已经创建了对应的显示标签,如果是则删除该显示标签,接着遍历下一动态图片,否则遍历下一动态图片。
步骤104、刷新网页(通常是在遍历结束后),执行所述显示标签以加载显示对应的图片。
在所述步骤101中,所述从服务器下载网络动态图片到本地的具体方式可以为:
一种方式是:向服务器发起获取当前网页所有动态图片的请求,并根据服务器返回的动态图片的地址下载所述动态图片到本地。
或者,另一种方式是:先向服务器发起获取第一分页的动态图片的请求,并根据服务器返回的动态图片的地址下载所述动态图片到本地;接着监听当前网页滚动条的滚动值,根据滚动条的滚动分批次(例如在滚动值第一次超过当前网页可视区域高度值的整数倍,即1倍、2倍、3倍……以此类推)向服务器发起获取下一分页的动态图片的请求,并根据服务器返回的动态图片的地址下载所述动态图片到本地。
通过上述第二种方式的处理步骤,可以达到分页请求下载动态图片的效果,进一步缩短由于下载动态图片造成的网页显示的延迟。
在所述步骤102中,所述根据滚动条的滚动值实时确定当前网页可视区域的取值范围的具体方式可以有多种。例如图2为一种可视区域、滚动条和整体内容的对比示意图。参见图2,在一种实施例中,所述根据滚动条的滚动值实时确定当前网页可视区域的取值范围的具体方式包括:确定所述可视区域的高度h、以及各排动态图片的高度m;实时监听当前网页滚动条的滚动值p,根据该滚动值p实时确定所述可视区域顶部到网页整体内容顶部的实时距离d(本领域的技术人员都知晓,所述根据所述滚动值p确定所述d的具体方法与所述滚动值d的定义相关,例如如果所述滚动值d直接定义为可视区域顶部到网页整体内容顶部的实时距离,则d=p;如果所述滚动值d定义为可视区域底部到网页整体内容顶部的实时距离,则d=p—h);将d/m的整数部分加1作为可视区域的起始排号c,将(d+h)/m的整数部分作为可视区域的终止排号z,则所述可视区域的取值范围为:[c,z];
对应的,在所述步骤103中,所述判断动态图片在当前网页的预定位置是否在所述当前网页可视区域的取值范围内,具体包括:根据该动态图片的编号和当前网页的预定排列规则(例如每排要显示几张图片)确定该动态图片所在的排号;然后判断该排号是否在所述可视区域的取值范围[c,z]之内,如果是则判定该动态图片在当前网页的预定位置在所述可视区域的取值范围内,否则判定该动态图片在当前网页的预定位置不在所述可视区域的取值范围内。
当然,在另一种实施例中,所述可视区域的取值范围也可以直接使用:[d,d+h];对应的,所述判断动态图片在当前网页的预定位置是否在所述当前网页可视区域的取值范围内,具体为:根据该动态图片的编号和当前网页的预定排列规则确定该动态图片所在的排号i,判断i×h是否在所述[d,d+h]之内,如果是则判定该动态图片在当前网页的预定位置在所述可视区域的取值范围内,否则判定该动态图片在当前网页的预定位置不在所述可视区域的取值范围内。当然这种处理方式的计算量稍大些,处理效率不如上一实施例高。
在所述步骤103中,如果当前遍历的动态图片在当前网页的预定位置在所述可视区域的取值范围内、且还没有建立对应的显示标签,则在一种实施例中,可以直接在所述可视区域内加载显示动态图片。即所述在预定位置未创建对应显示标签的情况下创建显示标签来显示对应的图片的具体方法为:新建图片标签,设置该图片标签的地址为所述动态图片在本地的缓存地址,将该图片标签***到所述动态图片在当前网页的预定位置;之后刷新网页后执行所述图片标签,在该图片标签对应的网页位置加载显示所述动态图片。
如果当前遍历的动态图片在当前网页的预定位置在所述可视区域的取值范围内、且还没有建立对应的显示标签,则在另一种实施例中,可以先在所述可视区域内加载显示该动态图片的静态图片,当检测到预览该静态图片对应的动态图片的指令后再加载显示对应的动态图片。即:所述在未创建该动态图片对应的显示标签的情况下创建显示标签来显示对应的图片,具体包括:创建文本标签作为显示标签,在该文本标签中设置本地操作***图片处理滤镜的调用命令,将该调用命令的处理地址设置为所述动态图片在本地的缓存地址,相当于在该文本标签内标记的需对应显示的图片是该图片处理滤镜输出的静态图片,然后在所述预定位置上***该文本标签。当后续刷新网页时,所述执行所述显示标签以加载显示对应的图片具体包括:执行所述文本标签,调用本地操作***图片处理滤镜从所述动态图片中提取一帧图片,将提取出的该一帧图片作为静态图片加载显示在所述文本标签对应的网页位置。
本发明的一个具体实施例中,所述本地操作***图片处理滤镜为可以从所述动态图片中提取一帧的图片处理滤镜。不同的操作***中对应的具体图片处理滤镜可以不同。例如,在windows操作***中的IE浏览器中的图片处理滤镜,是一种独特的级联样式表(CSS,Cascading Style Sheet)样式,这些图片处理滤镜主要是用来实现图像的各种特殊效果。其中有一种图片处理滤镜为AlphaImageLoader滤镜,这个AlphaImageLoader滤镜可以在对象容器边界内,在对象的背景和内容之间显示一张图片,并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG格式,则也可以对该PNG图片进行0%-100%的透明度处理。通过该AlphaImageLoader滤镜处理显示动态gif图片,则该AlphaImageLoader滤镜会自动进行图片的裁剪,只显示gif图片的第一帧,即显示的是一张静态图片。
在本实施例中,步骤103中利用脚本语言设置文本标签的CSS的滤镜为AlphaImageLoader滤镜,在这种情况下所述客户端需要采用IE浏览器内核。在所述步骤103中,客户端调用所述文本标签,通过文本标签中的调用命令可以调用操作***中的AlphaImageLoader滤镜从所述缓存地址中读取所述动态图片,该AlphaImageLoader滤镜再将所述动态图片的第一帧图片提取出来,将该第一帧图片加载显示到所文本标签在网页中的对应的位置。从而可以实现网络动态图片的静态化显示。当然对于其它滤镜来讲,也有可能是从动态图片中提取其它帧的图片作为静态图片加载显示。
此后,当用户需要预览所述静态图片对应的动态图片时,会向客户端发出预览动态图片的指令,例如该指令一般是鼠标移动到网页中的已经静态化的图片上发出的,客户端需要将静态图片再动态化。然后,当用户不需要预览动态图片时,会向客户端发出停止预览所述动态图片的指令,例如该指令一般是鼠标移出所述预览的动态图片到网页其它位置所发出的,客户端需要将所述预览的动态图片再静态化。
图3为本发明所述方法的进一步实施例的一种流程图。参见图3,在该进一步的实施例中,进一步包括:
步骤105、客户端检测鼠标是否移动到经过上述静态化处理后加载显示的所述某一个静态图片上,如果是则针对该静态图片执行后续处理。
步骤106、客户端利用脚本语言调用删除文本标签的命令,删除所述静态图片对应的文本标签。
步骤107、利用脚本语言新建图片标签,设置该图片标签的地址为所删除的所述文本标签对应的所述动态图片在本地的缓存地址,将该图片标签***到所删除的所述文本标签对应的网页位置。
步骤108、执行所述图片标签,在该图片标签对应的网页位置加载显示所述动态图片。
现有技术中,为了实现动态图片的静态化以及在收到指令后再切换到动态图片,通常需要向服务器发起两次http请求并下载两张图片,一次为请求下载静态图片,一次为请求下载动态图片,不但浪费了网络的带宽资源,而且在将静态图片切换成动态图片的时候,需要再次等待动态图片的下载,操作延时较长,客户端浏览显示动态图片的流畅度差,用户体验不好。
而本发明中,通过图3的上述操作,由于所述动态图片已经下载到本地了,客户端会直接读取本地缓存的该动态图片,不需要重新下载,然后脚本语言调用***命令,将该动态图片***到原文本标签的位置,这样网页就能正常显示动态图片,从而实现了静态化图片切换到动态图片的显示过程,而对应的HTTP请求却缩小为一次,即所述的一次下载动态图片的请求,因此可以节省客户端设备发起多余请求的计算资源,以及节省由于多余下载所占用的网络的带宽资源,并可以提升静态图片重新动态化的处理效率,减少延迟时间,提升浏览动态图片的流畅度,进而提升用户体验。
步骤109、客户端检测鼠标是否移出所述预览的动态图片,如果是则针对该动态图片执行后续处理。
步骤110、客户端利用脚本语言调用删除图片标签的命令,删除所述动态图片对应的图片标签。
步骤111、利用脚本语言新建文本标签,在该文本标签中设置本地操作***图片处理滤镜如所述AlphaImageLoader滤镜的调用命令,将该调用命令的处理地址设置为所述动态图片在本地的缓存地址,将该文本标签***到所删除的所述图片标签的网页位置。
步骤112、执行所述文本标签,调用本地操作***的AlphaImageLoader滤镜从所述动态图片中提取一帧图片(例如此处为第一帧图片),将提取出的该一帧图片作为静态图片加载显示在所述文本标签对应的网页位置。
从而通过上述操作,可以在不需要预览动态图片的时候,将所述动态图片重新恢复到静态图片,从而可以实现动态图片的再次静态化。之后,还可以返回步骤104,如果检测到鼠标移动到静态图片上后,再次显示动态图片,如此循环。
另外,本发明采用调用本地操作***图片处理滤镜对所述动态图片的第一帧图片进行提取处理,而不是由客户端进行提取处理。这样,可以节省客户端的计算资源,提高图片提取处理的处理效率,不会导致由于客户端进行图片提取处理导致客户端处理速度降低进而卡住整个网页,也可以避免由于客户端同时提取处理多张动态图片所导致的客户端崩溃的问题。
同时,由于本发明采用上述默认静态显示所述动态图片,之后鼠标触发后才显示动态图片的方式,可以在同一个网页显示多张动态图片时,用户看起来,就不会看到多张动态图片一起动,减少对用户的视觉干扰,不会有眼花缭乱的感觉。
与本发明的所述方法对应,本发明还公开了一种网络动态图片的滚动分页显示装置。图4为本发明所述网络动态图片的滚动分页显示装置的一种实施例组成示意图。参见图4,该装置包括::
图片访问下载模块401,用于从服务器下载网络动态图片到本地.
可视区域确定模块402,用于根据滚动条的滚动值实时确定当前网页可视区域的取值范围。
遍历处理模块403,用于在所述可视区域的取值范围发生改变后,遍历所述下载到本地的动态图片;针对每一动态图片,判断该动态图片在当前网页的预定位置是否在所述当前网页可视区域的取值范围内;如果在则在未创建该动态图片对应的显示标签的情况下创建显示标签来显示对应的图片;否则不创建对应的显示标签,并在已经创建对应显示标签的情况下删除该显示标签。
第一显示模块404,用于刷新网页,执行所述显示标签以加载显示对应的图片。
所述遍历处理模块403中,更为具体的处理方式为:如果在所述取值范围内,则判断该动态图片是否已经创建了对应的显示标签,如果是则遍历下一动态图片,否则在该动态图片的所述预定位置处创建对应的显示标签,在该显示标签内标记需对应显示的图片,接着遍历下一动态图片;如果该动态图片在当前网页的预定位置不在当前网页可视区域的取值范围内,则判断该动态图片是否已经创建了对应的显示标签,如果是则删除该显示标签,接着遍历下一动态图片,否则遍历下一动态图片;
在一种实施例中,所述图片访问下载模块401可以具体用于:向服务器发起获取当前网页所有动态图片的请求,并根据服务器返回的动态图片的地址下载所述动态图片到本地。在另一种实施例中,所述图片访问下载模块可以分批次请求下载动态图片,如图5所示为一种实施例中所述图片访问下载模块的组成示意图。参见图5,所述图片访问下载模块401具体包括:
默认下载模块411,用于先向服务器发起获取第一分页的动态图片的请求,并根据服务器返回的动态图片的地址下载所述动态图片到本地。
批次下载模块412,用于监听当前网页滚动条的滚动值,根据滚动条的滚动分批次(例如在滚动值第一次超过当前网页可视区域高度值的整数倍,即1倍、2倍、3倍……以此类推)向服务器发起获取下一分页的动态图片的请求,并根据服务器返回的动态图片的地址下载所述动态图片到本地。
为了实现动态图片默认的静态化显示,所述遍历处理模块403中具体包括第一标签建立模块,用于所述动态图片在当前网页的预定位置在所述当前网页可视区域的取值范围内、且在未创建该动态图片对应的显示标签的情况下,创建文本标签作为显示标签,在该文本标签中设置本地操作***图片处理滤镜的调用命令,将该调用命令的处理地址设置为所述动态图片在本地的缓存地址,在所述预定位置上***该文本标签;
所述第一显示模块404具体用于:刷新网页,执行所述文本标签,调用本地操作***图片处理滤镜从所述动态图片中提取一帧图片,将提取出的该一帧图片作为静态图片加载显示在所述文本标签对应的网页位置。
图6为本发明所述网络动态图片的滚动分页显示装置的又一种实施例组成示意图。参见图6,该实施例中,所述装置进一步包括:
第一检测模块405,用于检测是否收到预览所述静态图片对应的动态图片的指令(例如检测检测鼠标是否移动到所述静态图片之上),如果是则触发所述第二标签建立模块406。
第二标签建立模块406,用于删除所述被预览的静态图片对应的文本标签,新建图片标签,设置该图片标签的地址为所述动态图片在本地的缓存地址,将该图片标签***到所删除的所述文本标签对应的网页位置。
第二显示模块407,用于执行所述第二标签建立模块406建立的图片标签,在该图片标签对应的网页位置加载显示所述动态图片。
通过图6的实施例,不但可以实现网络动态图片的静态化输出,在需要预览动态图片时,还可以显示动态图片,完成静态图片到动态图片的切换。
在该实施例中,所述装置还可以进一步包括:
第二检测模块408,用于检测是否收到停止预览所述第二显示模块加载显示的动态图片的指令(例如检测鼠标是否移出所述第二显示模块加载显示的动态图片),如果是则触发所述第三标签建立模块409。
第三标签建立模块409,用于删除所述预览的动态图片对应的图片标签,新建文本标签,在该文本标签中设置本地操作***图片处理滤镜的调用命令,将该调用命令的处理地址设置为所述动态图片在本地的缓存地址,将该文本标签***到所删除的所述图片标签的网页位置。
第三显示模块410,用于执行所述第三标签建立模块409建立的文本标签,调用本地操作***图片处理滤镜从所述动态图片中提取一帧图片,将提取出的该一帧图片作为静态图片加载显示在所述文本标签对应的网页位置。
通过图6所述的实施例,所述预览的动态图片还可以重新静态化。从而实现动态图片和静态图片的随意切换。
在本发明所述装置的一种实施例中,所述本地操作***图片处理滤镜为windows操作***中IE浏览器的AlphaImageLoader滤镜。所述客户端为采用IE浏览器内核的客户端。
在本申请所提供的几个实施例中,应该理解到,所揭露的装置和方法,可以通过其它的方式实现。例如,以上所描述的装置实施例仅仅是示意性的,例如,所述模块的划分,仅仅为一种逻辑功能划分,实际实现时可以有另外的划分方式,例如多个模块或组件可以结合或者可以集成到另一个***或装置,或一些特征可以忽略,或不执行。
本发明的每一个实施例可以通过由数据处理设备如计算机执行的数据处理程序来实现。显然,数据处理程序构成了本发明。此外,通常存储在一个存储介质中的数据处理程序通过直接将程序读取出存储介质或者通过将程序安装或复制到数据处理设备的存储设备(如硬盘和或内存)中执行。因此,这样的存储介质也构成了本发明。存储介质可以使用任何类型的记录方式,例如纸张存储介质(如纸带等)、磁存储介质(如软盘、硬盘、闪存等)、光存储介质(如CD-ROM等)、磁光存储介质(如MO等)等。
以上所述仅为本发明的较佳实施例而已,并不用以限制本发明,凡在本发明的精神和原则之内,所做的任何修改、等同替换、改进等,均应包含在本发明保护的范围之内。
Claims (11)
1.一种网络动态图片的滚动分页显示方法,其特征在于,包括:
从服务器下载网络动态图片到本地;
根据滚动条的滚动值实时确定当前网页可视区域的取值范围;
遍历所述下载到本地的动态图片;针对每一动态图片,判断该动态图片在当前网页的预定位置是否在所述当前网页可视区域的取值范围内;如果是则在未创建该动态图片对应的显示标签的情况下在该预定位置创建显示标签来显示对应的图片;否则不创建对应的显示标签,并在已经创建对应显示标签的情况下删除该显示标签;
刷新网页,执行所述显示标签以加载显示对应的图片。
2.根据权利要求1所述的方法,其特征在于,所述从服务器下载网络动态图片到本地,具体包括:
向服务器发起获取当前网页所有动态图片的请求,并根据服务器返回的动态图片的地址下载所述动态图片到本地;
或者,先向服务器发起获取第一分页的动态图片的请求,并根据服务器返回的动态图片的地址下载所述动态图片到本地;接着监听当前网页滚动条的滚动值,根据滚动条的滚动分批次向服务器发起获取下一分页的动态图片的请求,并根据服务器返回的动态图片的地址下载所述动态图片到本地。
3.根据权利要求1所述的方法,其特征在于,
所述根据滚动条的滚动值实时确定当前网页可视区域的取值范围,具体包括:确定所述可视区域的高度h、以及各排动态图片的高度m;实时监听当前网页滚动条的滚动值p,根据该滚动值p实时确定所述可视区域顶部到网页整体内容顶部的实时距离d;将d/m的整数部分加1作为可视区域的起始排号c,将(d+h)/m的整数部分作为可视区域的终止排号z,则所述可视区域的取值范围为:[c,z];
对应的,所述判断动态图片在当前网页的预定位置是否在所述当前网页可视区域的取值范围内,具体包括:根据该动态图片的编号和当前网页的预定排列规则确定该动态图片所在的排号;然后判断该排号是否在所述可视区域的取值范围[c,z]之内,如果是则判定该动态图片在当前网页的预定位置在所述可视区域的取值范围内,否则判定该动态图片在当前网页的预定位置不在所述可视区域的取值范围内。
4.根据权利要求1所述的方法,其特征在于,所述在未创建该动态图片对应的显示标签的情况下创建显示标签来显示对应的图片,具体包括:
创建文本标签作为显示标签,在该文本标签中设置本地操作***图片处理滤镜的调用命令,将该调用命令的处理地址设置为所述动态图片在本地的缓存地址,在所述预定位置上***该文本标签;
所述执行所述显示标签以加载显示对应的图片,具体包括:执行所述文本标签,调用本地操作***图片处理滤镜从所述动态图片中提取一帧图片,将提取出的该一帧图片作为静态图片加载显示在所述文本标签对应的网页位置。
5.根据权利要求4所述的方法,其特征在于,该方法在检测到预览所述静态图片对应的动态图片的指令后,进一步包括:
删除所述静态图片对应的文本标签;
新建图片标签,设置该图片标签的地址为所述动态图片在本地的缓存地址,将该图片标签***到所删除的所述文本标签对应的网页位置;
执行所述图片标签,在该图片标签对应的网页位置加载显示所述动态图片。
6.根据权利要求5所述的方法,其特征在于,该方法在检测到停止预览所述动态图片的指令后,进一步包括:
删除所述动态图片对应的图片标签;
新建文本标签,在该文本标签中设置本地操作***图片处理滤镜的调用命令,将该调用命令的处理地址设置为所述动态图片在本地的缓存地址,将该文本标签***到所删除的所述图片标签的网页位置;
执行所述文本标签,调用本地操作***图片处理滤镜从所述动态图片中提取一帧图片,将提取出的该一帧图片作为静态图片加载显示在所述文本标签对应的网页位置。
7.一种网络动态图片的滚动分页显示装置,其特征在于,包括:
图片访问下载模块,用于从服务器下载网络动态图片到本地;
可视区域确定模块,用于根据滚动条的滚动值实时确定当前网页可视区域的取值范围;
遍历处理模块,用于遍历所述下载到本地的动态图片;针对每一动态图片,判断该动态图片在当前网页的预定位置是否在所述当前网页可视区域的取值范围内;如果是则在未创建该动态图片对应的显示标签的情况下创建显示标签来显示对应的图片;否则不创建对应的显示标签,并在已经创建对应显示标签的情况下删除该显示标签;
第一显示模块,用于刷新网页,执行所述显示标签以加载显示对应的图片。
8.根据权利要求7所述的装置,其特征在于,所述图片访问下载模块具体包括:
默认下载模块,用于先向服务器发起获取第一分页的动态图片的请求,并根据服务器返回的动态图片的地址下载所述动态图片到本地;
批次下载模块,用于监听当前网页滚动条的滚动值,根据滚动条的滚动分批次向服务器发起获取下一分页的动态图片的请求,并根据服务器返回的动态图片的地址下载所述动态图片到本地。
9.根据权利要求7所述的装置,其特征在于,
所述遍历处理模块中具体包括第一标签建立模块,用于所述动态图片在当前网页的预定位置在所述当前网页可视区域的取值范围内、且在未创建该动态图片对应的显示标签的情况下,创建文本标签作为显示标签,在该文本标签中设置本地操作***图片处理滤镜的调用命令,将该调用命令的处理地址设置为所述动态图片在本地的缓存地址,在所述预定位置上***该文本标签;
所述第一显示模块具体用于:刷新网页,执行所述文本标签,调用本地操作***图片处理滤镜从所述动态图片中提取一帧图片,将提取出的该一帧图片作为静态图片加载显示在所述文本标签对应的网页位置。
10.根据权利要求9述的装置,其特征在于,该装置进一步包括:
第一检测模块,用于检测是否收到预览所述静态图片对应的动态图片的指令,如果是则触发所述第二标签建立模块;
第二标签建立模块,用于删除所述静态图片对应的文本标签,新建图片标签,设置该图片标签的地址为所述动态图片在本地的缓存地址,将该图片标签***到所删除的所述文本标签对应的网页位置;
第二显示模块,用于刷新页面,执行所述第二标签建立模块建立的图片标签,在该图片标签对应的网页位置加载显示所述动态图片。
11.根据权利要求10所述的装置,其特征在于,该装置进一步包括:
第二检测模块,用于检测是否收到停止预览所述第二显示模块加载显示的动态图片的指令,如果是则触发所述第三标签建立模块;
第三标签建立模块,用于删除所述动态图片对应的图片标签,新建文本标签,在该文本标签中设置本地操作***图片处理滤镜的调用命令,将该调用命令的处理地址设置为所述动态图片在本地的缓存地址,将该文本标签***到所删除的所述图片标签的网页位置;
第三显示模块,用于刷新页面,执行所述第三标签建立模块建立的文本标签,调用本地操作***图片处理滤镜从所述动态图片中提取一帧图片,将提取出的该一帧图片作为静态图片加载显示在所述文本标签对应的网页位置。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201210504533.4A CN103853417B (zh) | 2012-11-30 | 2012-11-30 | 网络动态图片的滚动分页显示方法和装置 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201210504533.4A CN103853417B (zh) | 2012-11-30 | 2012-11-30 | 网络动态图片的滚动分页显示方法和装置 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN103853417A true CN103853417A (zh) | 2014-06-11 |
CN103853417B CN103853417B (zh) | 2017-08-04 |
Family
ID=50861155
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201210504533.4A Active CN103853417B (zh) | 2012-11-30 | 2012-11-30 | 网络动态图片的滚动分页显示方法和装置 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN103853417B (zh) |
Cited By (23)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN104267918A (zh) * | 2014-09-17 | 2015-01-07 | 深圳市九洲电器有限公司 | 一种图片显示方法及*** |
CN104267961A (zh) * | 2014-09-30 | 2015-01-07 | 腾讯科技(深圳)有限公司 | 滚动条的生成方法及装置 |
CN104392410A (zh) * | 2014-11-28 | 2015-03-04 | 北京搜狗科技发展有限公司 | 皮肤***中的图片整合方法、皮肤绘制方法及设备 |
CN104484235A (zh) * | 2014-11-24 | 2015-04-01 | 北京奇虎科技有限公司 | 一种基于瀑布流技术的内存优化方法及装置 |
CN104699805A (zh) * | 2015-03-20 | 2015-06-10 | 努比亚技术有限公司 | 音乐搜索方法及装置 |
CN105045592A (zh) * | 2015-07-24 | 2015-11-11 | 北京金山安全软件有限公司 | 一种图片显示方法以及装置 |
CN105549926A (zh) * | 2015-09-25 | 2016-05-04 | 深圳市美贝壳科技有限公司 | 一种移动终端解决滑块跳动的方法 |
CN105677678A (zh) * | 2014-11-20 | 2016-06-15 | 腾讯科技(武汉)有限公司 | 网页的首屏位置确定、网页信息显示方法和*** |
CN106095995A (zh) * | 2016-06-21 | 2016-11-09 | 武汉斗鱼网络科技有限公司 | 一种基于可视区域的图片加载方法及装置 |
CN106156153A (zh) * | 2015-04-14 | 2016-11-23 | 腾讯科技(深圳)有限公司 | 一种加载图片的方法和装置 |
WO2016202215A1 (zh) * | 2015-06-19 | 2016-12-22 | 阿里巴巴集团控股有限公司 | 实现动态图片预览的方法和装置、表情包展示方法和装置 |
CN106407227A (zh) * | 2015-08-03 | 2017-02-15 | 天脉聚源(北京)科技有限公司 | 一种动态网页显示方法和*** |
CN106682016A (zh) * | 2015-11-10 | 2017-05-17 | 腾讯科技(深圳)有限公司 | 一种基于移动终端浏览器的图片加载方法及装置 |
CN107016088A (zh) * | 2017-04-05 | 2017-08-04 | 福建中金在线信息科技有限公司 | 一种网页文章中图片处理的方法及装置 |
CN107239566A (zh) * | 2017-06-14 | 2017-10-10 | 掌阅科技股份有限公司 | 用户日志生成方法、电子设备及计算机存储介质 |
CN107678863A (zh) * | 2016-08-01 | 2018-02-09 | 北京国双科技有限公司 | 页面组件通讯方法及装置 |
WO2018076795A1 (zh) * | 2016-10-31 | 2018-05-03 | 华为技术有限公司 | 页面刷新的方法及装置 |
WO2018133651A1 (zh) * | 2017-01-18 | 2018-07-26 | 腾讯科技(深圳)有限公司 | 数据加载方法及装置、存储介质以及电子装置 |
CN109684573A (zh) * | 2017-10-18 | 2019-04-26 | 北京京东尚科信息技术有限公司 | 目标图片显示方法及装置、存储介质、电子设备 |
CN109948101A (zh) * | 2019-03-21 | 2019-06-28 | Oppo广东移动通信有限公司 | 页面切换方法、装置、存储介质及电子设备 |
CN105183846B (zh) * | 2015-09-07 | 2019-08-02 | 百度在线网络技术(北京)有限公司 | 网页信息的推送方法及装置 |
CN111221600A (zh) * | 2018-11-26 | 2020-06-02 | 福建省天奕网络科技有限公司 | 一种LayaAir引擎滚动的管理方法及终端 |
CN111782995A (zh) * | 2020-05-29 | 2020-10-16 | 北京沃东天骏信息技术有限公司 | 一种图形分页加载方法和装置 |
Citations (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN101794567A (zh) * | 2010-02-10 | 2010-08-04 | 中兴通讯股份有限公司 | 图片加载的方法及终端 |
CN102279854A (zh) * | 2010-06-08 | 2011-12-14 | 腾讯科技(北京)有限公司 | 显示网页内容的方法和装置 |
US20120011430A1 (en) * | 2010-07-09 | 2012-01-12 | Stefan Parker | Infinite Scrolling |
CN102760133A (zh) * | 2011-04-28 | 2012-10-31 | 腾讯科技(深圳)有限公司 | 网页加载方法、***、浏览器、终端及服务器 |
-
2012
- 2012-11-30 CN CN201210504533.4A patent/CN103853417B/zh active Active
Patent Citations (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN101794567A (zh) * | 2010-02-10 | 2010-08-04 | 中兴通讯股份有限公司 | 图片加载的方法及终端 |
CN102279854A (zh) * | 2010-06-08 | 2011-12-14 | 腾讯科技(北京)有限公司 | 显示网页内容的方法和装置 |
US20120011430A1 (en) * | 2010-07-09 | 2012-01-12 | Stefan Parker | Infinite Scrolling |
CN102760133A (zh) * | 2011-04-28 | 2012-10-31 | 腾讯科技(深圳)有限公司 | 网页加载方法、***、浏览器、终端及服务器 |
Non-Patent Citations (1)
Title |
---|
月藏锋: "js延迟加载页面图片(当图片出现在窗口可视区域的时候加载)", 《HTTP://WWW.CNBLOGS.COM/SOFTLIVE/ARCHIVE/2012/06/18/2553694.HTML》 * |
Cited By (33)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN104267918B (zh) * | 2014-09-17 | 2017-09-29 | 深圳市九洲电器有限公司 | 一种图片显示方法及*** |
CN104267918A (zh) * | 2014-09-17 | 2015-01-07 | 深圳市九洲电器有限公司 | 一种图片显示方法及*** |
CN104267961B (zh) * | 2014-09-30 | 2017-08-01 | 腾讯科技(深圳)有限公司 | 滚动条的生成方法及装置 |
CN104267961A (zh) * | 2014-09-30 | 2015-01-07 | 腾讯科技(深圳)有限公司 | 滚动条的生成方法及装置 |
CN105677678A (zh) * | 2014-11-20 | 2016-06-15 | 腾讯科技(武汉)有限公司 | 网页的首屏位置确定、网页信息显示方法和*** |
CN104484235A (zh) * | 2014-11-24 | 2015-04-01 | 北京奇虎科技有限公司 | 一种基于瀑布流技术的内存优化方法及装置 |
CN104484235B (zh) * | 2014-11-24 | 2017-12-05 | 北京奇安信科技有限公司 | 一种基于瀑布流技术的内存优化方法及装置 |
CN104392410A (zh) * | 2014-11-28 | 2015-03-04 | 北京搜狗科技发展有限公司 | 皮肤***中的图片整合方法、皮肤绘制方法及设备 |
CN104392410B (zh) * | 2014-11-28 | 2018-04-27 | 北京搜狗科技发展有限公司 | 皮肤***中的图片整合方法、皮肤绘制方法及设备 |
CN104699805A (zh) * | 2015-03-20 | 2015-06-10 | 努比亚技术有限公司 | 音乐搜索方法及装置 |
CN106156153A (zh) * | 2015-04-14 | 2016-11-23 | 腾讯科技(深圳)有限公司 | 一种加载图片的方法和装置 |
CN106156153B (zh) * | 2015-04-14 | 2022-05-27 | 腾讯科技(深圳)有限公司 | 一种加载图片的方法和装置 |
WO2016202215A1 (zh) * | 2015-06-19 | 2016-12-22 | 阿里巴巴集团控股有限公司 | 实现动态图片预览的方法和装置、表情包展示方法和装置 |
CN106257415A (zh) * | 2015-06-19 | 2016-12-28 | 阿里巴巴集团控股有限公司 | 实现动态图片预览的方法和装置、表情包展示方法和装置 |
US10650486B2 (en) | 2015-06-19 | 2020-05-12 | Alibaba Group Holding Limited | Previewing dynamic images and expressions |
CN105045592A (zh) * | 2015-07-24 | 2015-11-11 | 北京金山安全软件有限公司 | 一种图片显示方法以及装置 |
CN106407227A (zh) * | 2015-08-03 | 2017-02-15 | 天脉聚源(北京)科技有限公司 | 一种动态网页显示方法和*** |
CN105183846B (zh) * | 2015-09-07 | 2019-08-02 | 百度在线网络技术(北京)有限公司 | 网页信息的推送方法及装置 |
CN105549926A (zh) * | 2015-09-25 | 2016-05-04 | 深圳市美贝壳科技有限公司 | 一种移动终端解决滑块跳动的方法 |
CN106682016A (zh) * | 2015-11-10 | 2017-05-17 | 腾讯科技(深圳)有限公司 | 一种基于移动终端浏览器的图片加载方法及装置 |
CN106095995A (zh) * | 2016-06-21 | 2016-11-09 | 武汉斗鱼网络科技有限公司 | 一种基于可视区域的图片加载方法及装置 |
CN107678863A (zh) * | 2016-08-01 | 2018-02-09 | 北京国双科技有限公司 | 页面组件通讯方法及装置 |
WO2018076795A1 (zh) * | 2016-10-31 | 2018-05-03 | 华为技术有限公司 | 页面刷新的方法及装置 |
WO2018133651A1 (zh) * | 2017-01-18 | 2018-07-26 | 腾讯科技(深圳)有限公司 | 数据加载方法及装置、存储介质以及电子装置 |
CN107016088A (zh) * | 2017-04-05 | 2017-08-04 | 福建中金在线信息科技有限公司 | 一种网页文章中图片处理的方法及装置 |
CN107239566A (zh) * | 2017-06-14 | 2017-10-10 | 掌阅科技股份有限公司 | 用户日志生成方法、电子设备及计算机存储介质 |
CN109684573A (zh) * | 2017-10-18 | 2019-04-26 | 北京京东尚科信息技术有限公司 | 目标图片显示方法及装置、存储介质、电子设备 |
CN109684573B (zh) * | 2017-10-18 | 2021-10-15 | 北京京东尚科信息技术有限公司 | 目标图片显示方法及装置、存储介质、电子设备 |
CN111221600A (zh) * | 2018-11-26 | 2020-06-02 | 福建省天奕网络科技有限公司 | 一种LayaAir引擎滚动的管理方法及终端 |
CN111221600B (zh) * | 2018-11-26 | 2023-05-23 | 福建省天奕网络科技有限公司 | 一种LayaAir引擎滚动的管理方法及终端 |
CN109948101A (zh) * | 2019-03-21 | 2019-06-28 | Oppo广东移动通信有限公司 | 页面切换方法、装置、存储介质及电子设备 |
CN111782995A (zh) * | 2020-05-29 | 2020-10-16 | 北京沃东天骏信息技术有限公司 | 一种图形分页加载方法和装置 |
CN111782995B (zh) * | 2020-05-29 | 2024-05-17 | 北京沃东天骏信息技术有限公司 | 一种图形分页加载方法和装置 |
Also Published As
Publication number | Publication date |
---|---|
CN103853417B (zh) | 2017-08-04 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN103853417A (zh) | 网络动态图片的滚动分页显示方法和装置 | |
CN106570098B (zh) | 页面刷新的方法及装置 | |
CN107992301B (zh) | 用户界面实现方法、客户端及存储介质 | |
US9286390B2 (en) | Presentation of rich search results in delineated areas | |
AU2011101579A4 (en) | Selective rendering of off-screen content | |
CN103856507A (zh) | 网络动态图片的静态显示方法和装置 | |
EP2573751A1 (en) | Display control program, recording medium whereupon display program is recorded, display control device, and display control method | |
KR20140012664A (ko) | 웹페이지 재배치 방법 | |
CN109683978B (zh) | 一种流式布局界面渲染的方法、装置以及电子设备 | |
CN105242817A (zh) | 页面元素实时突出显示的方法及装置 | |
US9679075B1 (en) | Efficient delivery of animated image files | |
WO2023284442A1 (zh) | 一种页面处理方法、装置、电子设备及可读存储介质 | |
CN103164541A (zh) | 图片呈现方法及设备 | |
US11501054B2 (en) | Layout generation for an electronic document that includes a web object | |
US9754391B2 (en) | Webpage display method and apparatus | |
CN103942202A (zh) | 网页文本域高度自适应缩放方法及装置 | |
US20120089899A1 (en) | Method and system for redisplaying a web page | |
CN106874387B (zh) | 一种自适应html滚屏展示实时信息的方法 | |
CN111427637B (zh) | 页面渲染方法和装置 | |
US20140337709A1 (en) | Method and apparatus for displaying web page | |
CN104679767A (zh) | 依据可视区域在网页中显示图片的***及其方法 | |
CN105589883B (zh) | 网页的页面元素的显示方法和装置 | |
CN103514203A (zh) | 以阅读模式浏览网页的方法及*** | |
CN115630241A (zh) | 页面显示方法、装置、电子设备及存储介质 | |
WO2014068340A1 (en) | Sytem and method for processing content of a web resource for display |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
C06 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
GR01 | Patent grant | ||
GR01 | Patent grant |