瀑布流式图片动态呈现的方法及装置制造方法
【专利摘要】本发明公开了一种瀑布流式图片动态呈现的方法及装置，所述方法包括：通过用户滚动显示屏的输入操作获取浏览网页请求，基于所述浏览网页请求在瀑布流式浏览网页中为所述显示屏对应的屏幕显示区域进行图片加载；获取浏览网页中已加载图片的图片加载信息，并根据所述图片加载信息确定所述浏览网页中的目标图片；将确定的所述目标图片设置为隐藏状态。本发明技术方案，根据图片加载信息确定目标图片，以及将目标图片设置为隐藏状态，网页中显示图片量减少，降低了网页的承载量，进而提高了浏览器浏览性能，优化了瀑布流式图片浏览的方式。
【专利说明】瀑布流式图片动态呈现的方法及装置
【技术领域】
[0001]本发明属于浏览器【技术领域】，具体涉及一种瀑布流式图片动态呈现的方法及装置。
【背景技术】
[0002]互联网技术的发展，浏览器浏览网页的方式也呈现出多样性，丰富的网页浏览方式便捷了用户浏览网页的过程。浏览器浏览网页中的图片是用户浏览网页获取的主要信息资源之一，为提升浏览图片的效果及便捷浏览过程，现有技术中多数网站采用瀑布流式实现网页中图片的加载及呈现。瀑布流式图片的呈现是指图片浏览过程中无需翻页，在不断下拉滚动条过程中，网页中图片不断被加载和显示的一种浏览方式。现在包括贴吧，百度图片，旅游等网站都采用此种方式进行图片呈现。但对于瀑布流式图片呈现方式，持续的加载图片造成网页中存在大量图片，致使浏览器性能下降，浏览过程不顺畅，甚至出现浏览器假死现象。
[0003]为克服上述以瀑布流式浏览图片过程中存在的问题，现有技术中常采用两种方式:一是折中方法，既采用瀑布流式也采用分页方式，也即是当网页中加载图片达到一定量时提供分页功能，以此来减少网页中图片数量，进而提高浏览器性能；一是只在性能比较好的浏览器中采用瀑布流式，在性能较差浏览器中采用分页方式。
[0004]对于上述两种方式，折中方法虽能一定程度限制了网页中加载图片的数量，提高了浏览器性能，但此种方式在具体应用时比较复杂，而且何时终止瀑布流而选择进行分页也必须根据不同的浏览器类别而采用不同的设置方式；对于第二种根据浏览器性能优劣选择是否采用瀑布流式，使得瀑布流式浏览图片的方式只能针对特定的性能较好的浏览器，对于性能较差的浏览器却不能适用。
【发明内容】
[0005]本发明实施例提供了一种瀑布流式图片动态呈现的方法及装置，以在浏览器以瀑布流式浏览网页中图片的过程中，优化瀑布流式图片浏览方式，降低浏览器承载量，进而提升浏览器的性能。
[0006]第一方面，本发明实施例提供了一种瀑布流式图片动态呈现的方法，包括:
[0007]通过用户滚动显示屏的输入操作获取浏览网页请求，基于所述浏览网页请求在瀑布流式浏览网页中为所述显示屏对应的屏幕显示区域进行图片加载；
[0008]获取浏览网页中已加载图片的图片加载信息，并根据所述图片加载信息确定所述浏览网页中的目标图片；
[0009]将确定的所述目标图片设置为隐藏状态。
[0010]本发明实施例中提供的瀑布流式图片动态呈现的方法，在以瀑布流的方式进行图片呈现过程中，随着网页中图片的加载，获取加载图片的图片加载信息，根据图片加载信息确定目标图片，进而将目标图片设置为隐藏状态。本发明技术方案的采用，当确定目标图片后，将目标图片设置为隐藏状态，使得浏览器加载的网页中呈现图片数量降低，优化了瀑布流式图片浏览的方式，降低了浏览器的承载量，进而提升了浏览器浏览性能。
[0011]第二方面，本发明实施例还提供了一种瀑布流式图片动态呈现的装置，包括:
[0012]图片加载模块，用于通过用户滚动显示屏的输入操作获取浏览网页请求，基于所述浏览网页请求在瀑布流式浏览网页中为所述显示屏对应的屏幕显示区域进行图片加载；
[0013]目标图片确定模块，用于获取浏览网页中已加载图片的图片加载信息，并根据所述图片加载信息确定所述浏览网页中的目标图片；
[0014]隐藏状态设置模块，用于将确定的所述目标图片设置为隐藏状态。
[0015]本发明实施例中提供的瀑布流式图片动态呈现的装置，利用此装置在以瀑布流的方式进行图片呈现过程中，随着网页中图片的加载，获取加载图片的图片加载信息，根据图片加载信息确定目标图片，进而将目标图片设置为隐藏状态。本发明技术方案的采用，当确定目标图片后，将目标图片设置为隐藏状态，使得浏览器加载的网页中呈现图片数量降低，优化了瀑布流式图片浏览的方式，降低了浏览器的承载量，进而提升了浏览器浏览性能。
【专利附图】
【附图说明】
[0016]图1所示是本发明实施例一中瀑布流式图片动态呈现方法流程示意图；
[0017]图2所示是本发明实施例二中瀑布流式图片动态呈现方法流程示意图；
[0018]图3所示是本发明实施例三中瀑布流式图片动态呈现方法流程示意图；
[0019]图3a所示是本发明实施例三中预定显示区域示意图；
[0020]图3b所示是本发明实施例三中预定显示区域的一种优选实施方式示意图；
[0021]图4所示是本发明实施例四中瀑布流式图片动态呈现方法流程示意图；
[0022]图5所示是本发明实施例四中瀑布流式图片动态呈现方法流程示意图；
[0023]图6所示是本发明实施例五中瀑布流式图片动态呈现装置结构示意图。
【具体实施方式】
[0024]下面结合附图及具体实施例对本发明进行更加详细与完整的说明。可以理解的是，此处所描述的具体实施例仅用于解释本发明，而非对本发明的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与本发明相关的部分而非全部内容。
[0025]图1所示是本发明实施例一中瀑布流式图片动态呈现方法流程示意图；作为一种优选实施方式本实施例可以应用于对百度图片的浏览，并且优选的本实施例方法应用于笔记本电脑、台式电脑灯终端设备。如图1所示，本实施例中方法包括:
[0026]101、通过用户滚动显示屏的输入操作获取浏览网页请求，基于浏览网页请求在瀑布流式浏览网页中为显示屏对应的屏幕显示区域进行图片加载。
[0027]显示屏是指智能手机、平板电脑、笔记本电脑、IPAD等终端设备的显示屏。显示屏所对应的屏幕显示区域是指当进行网页浏览时显示屏所对应浏览网页中的区域，也即是所浏览网页在显示屏所在屏幕内的可视区域。
[0028]用户滚动显示屏一般通过上下拖动滚动条的操作实现，或者也可以是左右拖动滚动条来滚动显示屏。本实施例中用户进行对百度图片的浏览，用户打开百度图片通过上下滚动显示屏中网页的方式对终端设备输入一定的浏览方式，如向上浏览，缩小或放大等。终端设备接收到用户的浏览网页请求后，以瀑布流的方式在所打开的浏览网页中进行图片的加载呈现；具体的是当用户为获取图片信息向下滚动网页时，在预加载的图片进入显示屏所对应屏幕显示区域后，加载及呈现图片至用户视野内。加载的操作实际上可以是向为网页建立的dom树中逐一添加与每个图片对应的图片元素。
[0029]102、获取浏览网页中已加载图片的图片加载信息，并根据所述图片加载信息确定浏览网页中的目标图片。
[0030]图片加载信息是指网页中已加载图片的信息，包括单个图片的信息和网页中整体图片的信息；例如，图片加载信息可以为网页中已加载的每个图片的高度、宽度等，以及网页中所有已加载图片的整体高度等；或者图片的加载信息还可以为已加载图片的数量，以及每个图片在已加载图片中的次序等；或者还可以为网页中已加载图片相对于显示屏屏幕所在区域的距离等。
[0031]上述操作中，根据获取的浏览网页中加载图片的图片加载信息，确定浏览网页中的目标图片；其中，目标图片是指在浏览网页中所欲隐藏的图片。具体的，本实施例中，可以根据已加载图片相对于显示屏屏幕所在区域的距离确定目标图片。
[0032]103、将确定的目标图片设置为隐藏状态。
[0033]通过操作102确定了目标图片，进而在本操作中将确定的目标图片设置为隐藏状态。具体的，本实施例中可以采用如下方式将目标图片设置为隐藏状态:在浏览网页的dom树中隐藏目标图片所对应图片元素中的图片内容及图片背景，且保留图片元素在浏览网页的dom树中占据的位置。
[0034]对于瀑布流方 式对图片的浏览，网页相当于一个容器，也即是dom树，随着图片的加载过程不断生产一个个内部容器，每一个内部容器放一张图片，也即是在dom树中不断生产一个个mod，或称作图片元素，图片元素包括图片内容和图片背景等，其中，图片内容是指多个像素点组成的图片，图片背景是指图片的底色，图片的框架或者图片的解释说明等。下述示例性举出图片加载过程中生产的源代码:
[0035]
【权利要求】
1.一种瀑布流式图片动态呈现的方法，其特征在于，包括: 通过用户滚动显示屏的输入操作获取浏览网页请求，基于所述浏览网页请求在瀑布流式浏览网页中为所述显示屏对应的屏幕显示区域进行图片加载； 获取浏览网页中已加载图片的图片加载信息，并根据所述图片加载信息确定所述浏览网页中的目标图片； 将确定的所述目标图片设置为隐藏状态。
2.如权利要求1所述的瀑布流式图片动态呈现的方法，其特征在于，将确定的所述目标图片设置为隐藏状态包括: 在所述浏览网页的dom树中隐藏所述目标图片所对应图片元素中的图片内容及图片背景，且保留所述图片元素在所述浏览网页的dom树中占据的位置。
3.根据权利要求2所述的瀑布流式图片动态呈现的方法，其特征在于，还包括: 将所述目标图片所对应图片元素中的图片内容及图片背景保存在所述浏览网页的内部变量中。
4.如权利要求1至3中任一项所述的瀑布流式图片动态呈现的方法，其特征在于，其特征在于，获取浏览网页中已加载图片的图片加载信息， 并根据所述图片加载信息确定所述浏览网页中的目标图片包括: 统计所述浏览网页中已加载图片的数量； 如果已加载图片的数量超过预设值，按照加载顺序选择目标图片。
5.如权利要求1至3中任一项所述的瀑布流式图片动态呈现的方法，其特征在于，获取浏览网页中已加载图片的图片加载信息，并根据所述图片加载信息确定所述浏览网页中的目标图片包括: 获取所述浏览网页中已加载图片的图片位置； 如果已加载图片的图片位置超出预定显示区域，则作为目标图片。
6.如权利要求3所述的瀑布流式图片动态呈现的方法，其特征在于，还包括: 如果处于隐藏状态的图片在所述浏览网页中的位置进入预定显示区域时，将处于隐藏状态的图片更新为呈现状态。
7.如权利要求6所述的瀑布流式图片动态呈现的方法，其特征在于，将处于隐藏状态的图片更新为呈现状态包括: 从所述浏览网页的内部变量中读取处于隐藏状态的图片所对应图片元素的图片内容及图片背景，并添加到所述浏览网页的dom树的相应位置。
8.—种瀑布流式图片动态呈现的装置，其特征在于，包括: 图片加载模块，用于通过用户滚动显示屏的输入操作获取浏览网页请求，基于所述浏览网页请求在瀑布流式浏览网页中为所述显示屏对应的屏幕显示区域进行图片加载； 目标图片确定模块，用于获取浏览网页中已加载图片的图片加载信息，并根据所述图片加载信息确定所述浏览网页中的目标图片； 隐藏状态设置模块，用于将确定的所述目标图片设置为隐藏状态。
9.如权利要求8所述的瀑布流式图片动态呈现的装置，其特征在于，所述隐藏状态设置模块具体用于在所述浏览网页的dom树中隐藏所述目标图片所对应图片元素中的图片内容及图片背景，且保留所述图片元素在所述浏览网页的dom树中占据的位置。
10.根据权利要求9所述瀑布流式图片动态呈现的装置，其特征在于，还包括: 保存模块，用于将所述目标图片所对应图片元素中的图片内容及图片背景保存在所述浏览网页的内部变量中。
11.如权利要求8至10中任一项所述的瀑布流式图片动态呈现的装置，其特征在于，所述目标图片确定模块包括: 图片数量统计子模块，用于统计所述浏览网页中已加载图片的数量； 目标图片选择子模块，用 于如果已加载图片的数量超过预设值，按照加载顺序选择目标图片。
12.如权利要求8至10中任一项所述的瀑布流式图片动态呈现的装置，其特征在于，所述目标图片确定模块包括: 图片位置获取子模块，用于获取浏览网页中已加载图片的图片位置； 目标图片确定子模块，用于如果已加载图片的图片位置超出预定显示区域，则作为目标图片。
13.如权利要求10所述的瀑布流式图片动态呈现的装置，其特征在于，隐藏状态设置模块还包括: 呈现状态更新模块，用于如果处于隐藏状态的图片在所述浏览网页中的位置进入预定显示区域时，将处于隐藏状态的图片更新为呈现状态。
14.如权利要求13所述的瀑布流式图片动态呈现的装置，其特征在于，所述呈现状态更新模块具体用于从所述浏览网页的内部变量中读取处于隐藏状态的图片所对应图片元素的图片内容及图片背景，并添加到所述浏览网页的dom树的相应位置。
【文档编号】G06F17/30GK103678622SQ201310698858
【公开日】2014年3月26日 申请日期:2013年12月18日 优先权日:2013年12月18日
【发明者】梁广耀 申请人:百度在线网络技术（北京）有限公司