网页图片展示方法及装置的制造方法

文档序号:8502167阅读:170来源:国知局
网页图片展示方法及装置的制造方法
【技术领域】
[0001]本发明涉及浏览器技术领域,特别是涉及一种网页图片展示方法及装置。
【背景技术】
[0002]用户在使用浏览器浏览网页时,往往只会浏览网页上的部分其关注的图片。而传统技术中的浏览器在展示网页时,通常根据网页源代码的定义展示网页,因此对于包含较多图片的网页,则完全按照网页源代码的定义加载网页中的所有图片,从而浪费了网络流量。

【发明内容】

[0003]基于此,有必要提供一种能够节省网络流量的网页图片展示方法。
[0004]一种网页图片展示方法,包括:
[0005]获取输入的链接地址,获取所述链接地址对应的网页;
[0006]获取所述链接地址对应的网页浏览模式;
[0007]判断所述网页浏览模式是否为纯图片模式,若是,则执行步骤:
[0008]加载第一数量的所述网页中的图片;
[0009]通过浮层并按照预设的大小和长宽比展示已加载的图片。
[0010]此外,还有必要提供一种能够节省网络流量的网页图片展示装置。
[0011]一种网页图片展示装置,包括:
[0012]网页获取模块,用于获取输入的链接地址,获取所述链接地址对应的网页;
[0013]浏览模式获取模块,用于获取所述链接地址对应的网页浏览模式;
[0014]纯图片模式加载模块,用于在所述网页浏览模式为纯图片模式时加载第一数量的所述网页中的图片;
[0015]浮层展示模块,用于通过浮层并按照预设的大小和长宽比展示已加载的图片。
[0016]上述网页图片展示方法及装置在展示含有图片的网页时,并未将该网页中所有的图片根据其图片链接全部加载,而仅加载了一部分图片并通过浮层展示给用户,且后续可根据浏览进度再补充加载。使得用户在浏览网页图片时,在仅浏览了少量图片即退出或跳转浏览其他网页的情况下,可节省加载的图片的数量,从而节省了网络流量,提高了带宽利用率。
【附图说明】
[0017]图1为一个实施例中网页图片展示方法的流程图;
[0018]图2为一个实施例中浏览器展示网页的界面效果图;
[0019]图3为一个实施例中浏览器展示网页的界面效果图;
[0020]图4为一个实施例中浮层展示网页图片的界面效果图;
[0021]图5为一个实施例中在浮层上滑动切换图片的操作界面图;
[0022]图6为一个实施例中网页图片展示方法的流程图;
[0023]图7为一个实施例中网页图片展示装置的结构示意图;
[0024]图8为另一个实施例中网页图片展示装置的结构示意图;
[0025]图9为一个实施例中运行网页图片展示方法的硬件装置图。
【具体实施方式】
[0026]在一个实施例中,如图1所示,一种网页图片展示方法,该方法的运行可依赖于浏览器程序,该浏览器程序可运行于基于冯洛伊曼体系的计算机系统上,该计算机系统可以是个人电脑、笔记本电脑、平板电脑和智能手机等。该计算机系统可基于windows、Iinux>OS X、1s、Android 和 windows phone 等操作系统。
[0027]该方法包括:
[0028]步骤S102,获取输入的链接地址,获取链接地址对应的网页。
[0029]用户通过浏览器地址栏输入的网络地址和点击操作对应的网页上的链接均为输入的链接地址,浏览器程序可根据输入的链接地址访问相应的web服务器下载网页。而在下载的网页中,图片均以链接的形式存在。浏览器在加载该网页时,在根据图片链接加载图片。
[0030]步骤S104,获取链接地址对应的网页浏览模式。
[0031]网页浏览模式即为网页上图片排版的类型。在本实施例中,网页浏览模式可包括纯图片模式和图文混合模式两种。例如,如图2所示,对于新闻资讯等新闻文字配合新闻配图的网页,即为图文混合模式的网页;如图3所示,对于仅通过图片来表达内容的图片新闻网页即为纯图片模式。
[0032]在本实施例中,浏览器程序可由后台服务器下载链接地址与网页浏览模式的映射表,从而可根据输入的链接地址在该映射表中查找匹配的网页浏览模式。后台服务器则通过网站管理员的输入或对历史访问记录的分析生成映射表,多个终端上运行的浏览器程序均可在同一后台服务器上下载该映射表。
[0033]需要说明的是,若映射表中没有输入的链接地址或输入的链接地址在映射表中没有对应的网页浏览模式,则该链接地址对应的网页浏览模式即为正常显示模式。
[0034]步骤S106,判断网页浏览模式是否为纯图片模式,若是,则执行步骤S108。
[0035]步骤S108,加载第一数量的网页中的图片。
[0036]例如,若网页中有10个图片链接,第一数量预设为5,则浏览器程序可仅加载前5个图片链接对应的图片。由于仅加载了输入的链接地址对应的网页中的5幅图片,而并不是将网页上的所有图片均通过其图片链接下载下来加载,因此在用户仅浏览了小于5幅图片即退出的或跳转访问其他网页时,不会造成流量的浪费。
[0037]步骤S110,通过浮层并按照预设的大小和长宽比展示已加载的图片。
[0038]如图4所示,若预设的大小和长宽比为显示屏的大小和长宽比,即全屏展示已加载的图片,则可生成一个浮动的div,在已加载的图片中挑选一幅放置在该div中进行展示(优选的可将网页中的第一幅图片或是最大的一幅图片放置在该div中进行展示)。在其他实施例中,若预设的大小为显示屏大小的一半,则在全屏的浮层div中一次展示两幅图片。也就是说浮层div中展示的图片的数量可根据预先设置大小和长宽比来调节。
[0039]在本实施例中,通过浮层并按照预设的大小和长宽比展示已加载的图片的步骤之后还可获取通过浮层展示的图片上的滑动和/或缩放操作,根据滑动和/或缩放操作对已加载的图片进行切换展示和/或大小缩放。
[0040]如前例中,若已加载的图片有5张,即通过图片链接下载到本地的图片有5幅,按照其在网页中的顺序编号为1、2、3、4、5,且I号图片已以全屏的方式展示在浮层中,则如图5所示,若用户在该图片上进行滑动操作(即Drag操作或Flick操作),则依次切换到全屏展示2号、3号、4号、5号图片,用户再进行方向的滑动操作则相应的又切换回4号、3号、2号和I号图片。
[0041]相应的,若用户在I号图片上进行缩放操作(即Pinch操作和Spread操作),则将I号图片缩小和放大(Pinch操作对应缩小,Spread操作对应放大)。
[0042]在本实施例中,还可以在通过浮层div展示已加载的图片时,加入夜间模式,即调整背景色,从而突出图片。
[0043]在本实施例中,若网页浏览模式不为纯图片模式,则根据网页的定义加载网页中的图片并展示,在展示过程中,如图6所示,可执行:
[0044]步骤S112,获取网页上的图片选取事件,获取图片点击事件对应的图片。
[0045]步骤S114,判断网页浏览模式是否为图文混合模式,若是,则执行通过浮层并按照预设的大小和长宽比展示已加载的图片的步骤(步骤S110)。
[0046]也就是说,若网页的网页浏览模式(及其链接地址对应的网页浏览模式)为不为纯图片模式,则根据网页中各个标签的定义按照传统方式加载网页,但当用户对网页中的图片进行了图片选取操作(例如,鼠标点击操作、键盘按键操作、触摸Tap操作或触摸DoubleTap操作等),且网页浏览模式为图文混合模式时,则采用和纯图片模式相同的方式展示已加载的图片,即在浮动的div中展示图片而不展示或在图片上展示网页中的部分文字。
[0047]相应的,用户也可在浮动展示的图片上进行滑动和/或缩放操作来对图片进行切换和缩放。
[0048]进一步的,通过浮层并按照预设的大小和长宽比展示已加载的图片的步骤之后还包括:
[0049]检测已加载
当前第1页1 2 3 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1