CN103678622B - 瀑布流式图片动态呈现的方法及装置 - Google Patents

Abstract

本发明公开了一种瀑布流式图片动态呈现的方法及装置，所述方法包括：通过用户滚动显示屏的输入操作获取浏览网页请求，基于所述浏览网页请求在瀑布流式浏览网页中为所述显示屏对应的屏幕显示区域进行图片加载；获取浏览网页中已加载图片的图片加载信息，并根据所述图片加载信息确定所述浏览网页中的目标图片；将确定的所述目标图片设置为隐藏状态。本发明技术方案，根据图片加载信息确定目标图片，以及将目标图片设置为隐藏状态，网页中显示图片量减少，降低了网页的承载量，进而提高了浏览器浏览性能，优化了瀑布流式图片浏览的方式。

Description

瀑布流式图片动态呈现的方法及装置

技术领域

本发明属于浏览器技术领域，具体涉及一种瀑布流式图片动态呈现的方法及装置。

背景技术

互联网技术的发展，浏览器浏览网页的方式也呈现出多样性，丰富的网页浏览方式便捷了用户浏览网页的过程。浏览器浏览网页中的图片是用户浏览网页获取的主要信息资源之一，为提升浏览图片的效果及便捷浏览过程，现有技术中多数网站采用瀑布流式实现网页中图片的加载及呈现。瀑布流式图片的呈现是指图片浏览过程中无需翻页，在不断下拉滚动条过程中，网页中图片不断被加载和显示的一种浏览方式。现在包括贴吧，百度图片，旅游等网站都采用此种方式进行图片呈现。但对于瀑布流式图片呈现方式，持续的加载图片造成网页中存在大量图片，致使浏览器性能下降，浏览过程不顺畅，甚至出现浏览器假死现象。

为克服上述以瀑布流式浏览图片过程中存在的问题，现有技术中常采用两种方式：一是折中方法，既采用瀑布流式也采用分页方式，也即是当网页中加载图片达到一定量时提供分页功能，以此来减少网页中图片数量，进而提高浏览器性能；一是只在性能比较好的浏览器中采用瀑布流式，在性能较差浏览器中采用分页方式。

对于上述两种方式，折中方法虽能一定程度限制了网页中加载图片的数量，提高了浏览器性能，但此种方式在具体应用时比较复杂，而且何时终止瀑布流而选择进行分页也必须根据不同的浏览器类别而采用不同的设置方式；对于第二种根据浏览器性能优劣选择是否采用瀑布流式，使得瀑布流式浏览图片的方式只能针对特定的性能较好的浏览器，对于性能较差的浏览器却不能适用。

发明内容

本发明实施例提供了一种瀑布流式图片动态呈现的方法及装置，以在浏览器以瀑布流式浏览网页中图片的过程中，优化瀑布流式图片浏览方式，降低浏览器承载量，进而提升浏览器的性能。

第一方面，本发明实施例提供了一种瀑布流式图片动态呈现的方法，包括：

通过用户滚动显示屏的输入操作获取浏览网页请求，基于所述浏览网页请求在瀑布流式浏览网页中为所述显示屏对应的屏幕显示区域进行图片加载；

获取浏览网页中已加载图片的图片加载信息，并根据所述图片加载信息确定所述浏览网页中的目标图片；

将确定的所述目标图片设置为隐藏状态。

本发明实施例中提供的瀑布流式图片动态呈现的方法，在以瀑布流的方式进行图片呈现过程中，随着网页中图片的加载，获取加载图片的图片加载信息，根据图片加载信息确定目标图片，进而将目标图片设置为隐藏状态。本发明技术方案的采用，当确定目标图片后，将目标图片设置为隐藏状态，使得浏览器加载的网页中呈现图片数量降低，优化了瀑布流式图片浏览的方式，降低了浏览器的承载量，进而提升了浏览器浏览性能。

第二方面，本发明实施例还提供了一种瀑布流式图片动态呈现的装置，包括：

图片加载模块，用于通过用户滚动显示屏的输入操作获取浏览网页请求，基于所述浏览网页请求在瀑布流式浏览网页中为所述显示屏对应的屏幕显示区域进行图片加载；

目标图片确定模块，用于获取浏览网页中已加载图片的图片加载信息，并根据所述图片加载信息确定所述浏览网页中的目标图片；

隐藏状态设置模块，用于将确定的所述目标图片设置为隐藏状态。

本发明实施例中提供的瀑布流式图片动态呈现的装置，利用此装置在以瀑布流的方式进行图片呈现过程中，随着网页中图片的加载，获取加载图片的图片加载信息，根据图片加载信息确定目标图片，进而将目标图片设置为隐藏状态。本发明技术方案的采用，当确定目标图片后，将目标图片设置为隐藏状态，使得浏览器加载的网页中呈现图片数量降低，优化了瀑布流式图片浏览的方式，降低了浏览器的承载量，进而提升了浏览器浏览性能。

附图说明

图1所示是本发明实施例一中瀑布流式图片动态呈现方法流程示意图；

图2所示是本发明实施例二中瀑布流式图片动态呈现方法流程示意图；

图3所示是本发明实施例三中瀑布流式图片动态呈现方法流程示意图；

图3a所示是本发明实施例三中预定显示区域示意图；

图3b所示是本发明实施例三中预定显示区域的一种优选实施方式示意图；

图4所示是本发明实施例四中瀑布流式图片动态呈现方法流程示意图；

图5所示是本发明实施例四中瀑布流式图片动态呈现方法流程示意图；

图6所示是本发明实施例五中瀑布流式图片动态呈现装置结构示意图。

具体实施方式

下面结合附图及具体实施例对本发明进行更加详细与完整的说明。可以理解的是，此处所描述的具体实施例仅用于解释本发明，而非对本发明的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与本发明相关的部分而非全部内容。

图1所示是本发明实施例一中瀑布流式图片动态呈现方法流程示意图；作为一种优选实施方式本实施例可以应用于对百度图片的浏览，并且优选的本实施例方法应用于笔记本电脑、台式电脑灯终端设备。如图1所示，本实施例中方法包括：

101、通过用户滚动显示屏的输入操作获取浏览网页请求，基于浏览网页请求在瀑布流式浏览网页中为显示屏对应的屏幕显示区域进行图片加载。

显示屏是指智能手机、平板电脑、笔记本电脑、IPAD等终端设备的显示屏。显示屏所对应的屏幕显示区域是指当进行网页浏览时显示屏所对应浏览网页中的区域，也即是所浏览网页在显示屏所在屏幕内的可视区域。

用户滚动显示屏一般通过上下拖动滚动条的操作实现，或者也可以是左右拖动滚动条来滚动显示屏。本实施例中用户进行对百度图片的浏览，用户打开百度图片通过上下滚动显示屏中网页的方式对终端设备输入一定的浏览方式，如向上浏览，缩小或放大等。终端设备接收到用户的浏览网页请求后，以瀑布流的方式在所打开的浏览网页中进行图片的加载呈现；具体的是当用户为获取图片信息向下滚动网页时，在预加载的图片进入显示屏所对应屏幕显示区域后，加载及呈现图片至用户视野内。加载的操作实际上可以是向为网页建立的dom树中逐一添加与每个图片对应的图片元素。

102、获取浏览网页中已加载图片的图片加载信息，并根据所述图片加载信息确定浏览网页中的目标图片。

图片加载信息是指网页中已加载图片的信息，包括单个图片的信息和网页中整体图片的信息；例如，图片加载信息可以为网页中已加载的每个图片的高度、宽度等，以及网页中所有已加载图片的整体高度等；或者图片的加载信息还可以为已加载图片的数量，以及每个图片在已加载图片中的次序等；或者还可以为网页中已加载图片相对于显示屏屏幕所在区域的距离等。

上述操作中，根据获取的浏览网页中加载图片的图片加载信息，确定浏览网页中的目标图片；其中，目标图片是指在浏览网页中所欲隐藏的图片。具体的，本实施例中，可以根据已加载图片相对于显示屏屏幕所在区域的距离确定目标图片。

103、将确定的目标图片设置为隐藏状态。

通过操作102确定了目标图片，进而在本操作中将确定的目标图片设置为隐藏状态。具体的，本实施例中可以采用如下方式将目标图片设置为隐藏状态：在浏览网页的dom树中隐藏目标图片所对应图片元素中的图片内容及图片背景，且保留图片元素在浏览网页的dom树中占据的位置。

对于瀑布流方式对图片的浏览，网页相当于一个容器，也即是dom树，随着图片的加载过程不断生产一个个内部容器，每一个内部容器放一张图片，也即是在dom树中不断生产一个个mod，或称作图片元素，图片元素包括图片内容和图片背景等，其中，图片内容是指多个像素点组成的图片，图片背景是指图片的底色，图片的框架或者图片的解释说明等。下述示例性举出图片加载过程中生产的源代码：

其中，container为在图片加载过程中生产的一个容器，div为每一个内部容器，mod1、mod2和mod3为图片元素，label为图片元素的图片内容或图片背景等。对于瀑布流的方式加载图片，用户滚动滚动条下拉过程中，容器内图片元素的高度不断增多，直到相关内容的所有图片加载完才结束。因此对于一些关注度较高的百度图片，网页的dom树中会出现很多的图片元素，导致页面上存储在dom树中的图片元素很多，达到一定量后，浏览器会出现假死现象。上述，设置目标图片的隐藏状态也即是将dom树中图片元素的图片内容、图片背景等设置为隐藏状态。

当将图片元素的图片内容和图片背景等从dom树中隐藏掉，由于图片元素的图片内容及图片背景等从dom树中隐藏掉，会改变整体高度，因此在本实施例还可以使用visibile:hidden的css元素，这样能够占据着该mod框架的位置，也即是占据图片元素在dom树中占据的结构位置。

本发明实施例中提供的瀑布流式图片动态呈现的方法，在以瀑布流的方式进行图片呈现过程中，随着网页中图片的加载，获取加载图片的图片加载信息，根据图片加载信息确定目标图片，进而将目标图片设置为隐藏状态。在本实施例中也即是将图片元素的图片内容或图片背景等从网页的dom树中隐藏掉，并利用css的visibile:hidden隐藏元素占据隐藏后图片元素在dom树中的位置。以此，本发明技术方案的采用，当确定目标图片后，将目标图片设置为隐藏状态，使得浏览器加载的网页中呈现图片数量降低，优化了瀑布流式图片浏览的方式，降低了浏览器的承载量，进而提升了浏览器浏览性能。

图2所示是本发明实施例二中瀑布流式图片动态呈现方法流程示意图；本实施例的具体实施以实施例一为基础，并作为一种优选实施方式本实施例中同样以对百度图片的浏览为例进行说明。如图2所示，本实施例中所述方法包括：

201、通过用户滚动显示屏的输入操作获取浏览网页请求，基于浏览网页请求在瀑布流式浏览网页中为显示屏对应的屏幕显示区域进行图片加载。

202、统计浏览网页中已加载图片的数量。

随着图片的加载dom树中的图片元素不断增多，进而可以根据统计dom树中加载的图片元素确定已加载的图片的数量。以及根据图片加载的过程，分别记录dom树中图片元素的加载顺序，并作为已加载的各个图片的序号。

203、如果已加载图片的数量超过预设值，按照加载顺序选择目标图片。

当网页中加载图片的数量达到预设值，则网页中已加载图片需要选定超出预设值数量的图片作为隐藏的目标图片；其中预设值的设定应保证用户在上拉或下拉过程中不至于影响用户对图片的正常浏览，并且预设的设定还可以根据具体的应用场景作出调整。例如，对性能较好的终端设置可以设置较高的预设值，而性能较低的终端设备设置较低的预设值。

具体的，本实例中，随着网页中图片的加载，按照浏览网页中加载图片的顺序，获取各加载图片的加载序号。如果当前加载图片对应的加载序号达到预设序号的预设值，则根据图片的加载序号，将距离当前加载图片预设值的前序图片确定为目标图片。例如，预设值为10，当当前加载图片达到10后，也即是网页中dom树中存在mod1到mod10的10个图片元素，当继续加载图片，dom树中加载了mod11，则此时将距离当前加载图片预设值10的前序图片确定为目标图片，也即是将mod1确定为目标图片。以及，当再加载mod12时，将mod2也作为目标图片。

204、将确定的目标图片设置为隐藏状态。

本发明实施例中提供的瀑布流式图片动态呈现的方法，在以瀑布流的方式进行图片呈现过程中，随着网页中图片的加载，获取加载图片的图片的数量及网页中已加载的各个图片的序号，进而根据设定的预设值，确定一定量的网页中加载图片为目标图片，进而将目标图片设置为隐藏状态。本发明技术方案的采用，当确定目标图片后，将目标图片设置为隐藏状态，使得浏览器加载的网页中呈现图片数量降低，优化了瀑布流式图片浏览的方式，降低了浏览器的承载量，进而提升了浏览器浏览性能。

图3所示是本发明实施例三中瀑布流式图片动态呈现方法流程示意图；本实施例的实施以上述实施例为基础，作为一种优选实施方式，本实施例中以对百度贴吧图片浏览为例进行说明。如图3所示，本实施例中方法包括：

301、通过用户滚动显示屏的输入操作获取浏览网页请求，基于浏览网页请求在瀑布流式浏览网页中为显示屏对应的屏幕显示区域进行图片加载。

302、获取浏览网页中已加载图片的图片位置。

加载的图片的图片位置是指加载的图片在网页中相对显示屏所在区域或其它区域的位置，也即是加载呈现的图片在网页中相对可视区域的位置。当加载图片处于可视区域时，用户能够通过显示屏实现对图片的浏览；当加载图片未处在显示屏所在区域，虽然图片已经加载，但却不能通过显示屏向用户展现出来；只有用户通过滚动网页使未处在显示屏所在网页区域的图片进入显示屏所在区域，加载的图片才能显现出来，呈现在用户的视野范围内。

本操作中获取浏览网页中加载图片的图片位置是为了确定网页中的目标图片提供一个判断基准，也即是根据网页中加载图片所处的位置判断对图片是否为目标图片。具体的，本实施例中可以通过在浏览器中植入相应插件的方式获取图片的图片位置，还有通过对网页中源代码中图片的信息通过计算分析获取图片的图片位置。

具体的，本实施例中可以通过以下方式获取图片的位置：

获取浏览网页中已加载图片的高度数据。图片的高度数据是指网页中加载图片在网页中占据的高度的信息。具体的，本实施例的本操作中首先获取单个图片的高度数据，然后根据单个图片的高度数据获取浏览网页中已加载图片的高度数据。具体的可以通过源代码中图片的高度数据信息及以下源代码获取的元素顶端到可视区域的距离和浏览器可视区域高度确定以加载图片的高度数据等获取已加载图片的高度数据。其中，浏览器的可视区域也即是显示屏的显示区域或浏览器网页在显示屏内的区域。

根据各已加载图片的高度数据，计算已加载图片相对于屏幕显示区域的距离。例如可以通过将获取各个图片的高度数据进行相加求和的方式获取已加载图片的高度数据，进而计算已加载图片相对于屏幕显示区域的距离。

根据已加载图片的距离判断已加载图片是否位于预定高度显示区域中，作为已加载图片的图片位置。通过已加载图片的距离判断已加载图片是否位于预定高度显示区域内是通过网页中已加载的图片距离显示屏屏幕所在区域的上端部或/和下端部的距离进行判定，还可以通过距离显示屏屏幕显示区域上方预设高度内的预定高度区域的端部和/或下方预设高度内的预定高度显示区域端部的进行判断。例如，当设定为距离显示屏屏幕所在区域的上端部的距离进行判定，设定显示屏屏幕显示区域上方预设高度内的预定高度区域为显示屏屏幕的2倍高度，在预定显示区域为显示屏屏幕所在区域的3倍高度，进而可以通过当距离显示屏屏幕所在区域上端部距离超出2倍显示屏屏幕区域高度时，已加载图片设置为目标图片。

302、如果已加载图片的图片位置超出预定显示区域，则作为目标图片。

预定显示区域是指根据智能终端显示屏的配置设定的加载图片的显示区域，当浏览网页中加载图超出预定显示区域时设置超出预定显示区域的图片为目标图片。预定显示区域可包括浏览网页位于在显示屏中的屏幕显示区域以及位于屏幕显示区域上方和/或下方预设高度内的预定高度显示区域。上述区域既保证了用户对显示屏滚动操作时，在屏幕显示区域及其上下部分都能及时呈现加载的图片，而非预定显示区域的图片内容实际上已经从网页中去除，并不影响用户的浏览。

图3a所示是本发明实施例一中预定显示区域示意图。如图3a所示，预定显示区域11包括显示屏屏幕所在区域12和显示屏屏幕区域上方预设高度内的预定高度显示区域13；其中，本领域技术人员应该理解的是显示屏屏幕区域上方预设高度内的预定高度显示区域13的值根据实际的需要可以不同的设定，例如可以是显示屏屏幕所在区域的2倍、3倍等。

进一步的，如图3a所示上方区域14以显示屏屏幕所在区域的上端部为基准的区域上方，隐藏区域15处于上方区域14内。

在操作302中获取浏览网页中加载图片的图片位置，结合图3a所示出的各区域的划分，也即是判断浏览网页中加载图片的图片位置是否在超出预定显示区域11、也即是是否在隐藏区域15内。

本操作中，将浏览网页中超出预定显示区域的图片目标图片，也即是将已加载的图片位于隐藏区域15时，将这些图片确定为目标图片。

图3b所示是本发明实施例一中预定显示区域的一种优选实施方式示意图。如图3所示，预定显示区域21包括：显示屏屏幕所在区域22和显示屏屏幕区域上方预设高度内的预定高度显示区域23和显示屏屏幕区域下方预设高度内的预定高度显示区域24；其中，本领域技术人员应该理解的是显示屏屏幕区域上方预设高度内的预定高度显示区域23的值和显示屏屏幕区域下方预设高度内的预定高度显示区域24的值根据实际的需要可以不同的设定，例如可以是显示屏屏幕所在区域的1倍或3倍等。

进一步的，如图3b所示上方区域25以显示屏屏幕所在区域的上端部为基准的区域上方，下方区域26以显示屏屏幕所在区域的下端部为基准的区域下方，隐藏区域27和隐藏区域28分别与处于上方区域25内和下方区域26内。

在操作302中获取浏览网页中加载图片的图片位置，结合图3所示出的各区域的划分，也即是判断浏览网页中加载图片的图片位置是否在超出预定显示区域，也即是是否在隐藏区域内；如若已加载图片处于隐藏区域内，则确定图片为目标图片。

本操作中，将浏览网页中超出预定显示区域的图片作为目标图片，也即是将已加载的图片位于隐藏区域时，将这些图片确定为目标图片。

304、将确定的目标图片设置为隐藏状态。

本发明实施例中提供的瀑布流式图片动态呈现的方法，在以瀑布流的方式进行图片呈现过程中，随着网页中图片的加载，获取加载图片的图片的位置及网页中已加载的各个图片所处的区域，当已加载图片处于隐藏区域时，将处于隐藏区域的图片确定为目标图片，进而将目标图片设置为隐藏状态。本发明技术方案的采用，当确定目标图片后，将目标图片设置为隐藏状态，使得浏览器加载的网页中呈现图片数量降低，优化了瀑布流式图片浏览的方式，降低了浏览器的承载量，进而提升了浏览器浏览性能。

图4所示是本发明实施例四中瀑布流式图片动态呈现方法流程示意图；本实施例的实施以上述实施例为基础，本实施例中以对百度图片的浏览为例进行说明。如图4所示，本实施例中方法包括：

401、通过用户滚动显示屏的输入操作获取浏览网页请求，基于浏览网页请求在瀑布流式浏览网页中为显示屏对应的屏幕显示区域进行图片加载。

402、获取浏览网页中已加载图片的图片加载信息，并根据图片加载信息确定浏览网页中的目标图片。

403、在所述浏览网页的dom树中隐藏所述目标图片所对应图片元素中的图片内容及图片背景，且保留所述图片元素在网页的dom树中占据的位置。

404、将目标图片所述对应图片元素中的图片内容及图片背景保存在所述浏览网页的内部变量中。

具体的，本实施例中在将图片元素设置为隐藏状态后，将图片的元素的图片内容和图片背景等保存在浏览网页中的内部变量中，也即是保存在一个js的内部变量中。这里需要说明的是，本实施例并不限制403和404之间的执行顺序，可以先保存再隐藏，也可以先隐藏再保存，还可以同时隐藏和保存动作。虽然以先隐藏再保存为例进行说明，但并不限制保护范围。

本发明实施例中提供的瀑布流式图片动态呈现的方法，在以瀑布流的方式进行图片呈现过程中，随着网页中图片的加载，获取加载图片的图片加载信息，根据图片加载信息确定目标图片，进而将目标图片设置为隐藏状态。在本实施例中也即是将图片元素的图片内容或图片背景等从网页的dom树中隐藏掉，同时将图片元素的图片内容和图片背景等保存在一个js内部变量中，并利用css的visibile:hidden隐藏元素占据隐藏后图片元素在dom树中的位置。以此，本发明技术方案的采用，当确定目标图片后，将目标图片设置为隐藏状态，使得浏览器加载的网页中呈现图片数量降低，优化了瀑布流式图片浏览的方式，降低了浏览器的承载量，进而提升了浏览器浏览性能。

图5所示是本发明实施例五中瀑布流式图片动态呈现方法流程示意图；本实施例的实施以上述实施例为基础，本实施例中以对百度图片的浏览为例进行说明。如图5所示，本实施例中方法包括：

501、通过用户滚动显示屏的输入操作获取浏览网页请求，基于浏览网页请求在瀑布流式浏览网页中为显示屏对应的屏幕显示区域进行图片加载。

502、获取浏览网页中已加载图片的图片加载信息，并根据图片加载信息确定所述浏览网页中的目标图片。

503、在浏览网页的dom树中隐藏所述目标图片所对应图片元素中的图片内容及图片背景，且保留图片元素在网页的dom树中占据的位置。

504、将目标图片的图片元素中所隐藏的图片内容及图片背景保存在浏览网页的内部变量中。

具体的，本实施例中在将图片元素设置为隐藏状态后，将图片的元素的图片内容和图片背景等保存在浏览网页中的内部变量中，也即是保存在一个js的内部变量中。

505、如果处于隐藏状态的图片在浏览网页中的位置进入预定显示区域时，将处于隐藏状态的图片更新为呈现状态。

当网页中图片加载到一定量后用户往往需要返回查看已经加载的图片，在用户返回浏览已加载图片的过程中则处于与隐藏区域的图片会再次进入预定显示区域，此时当处于隐藏状态的图片再次进入预定显示区域时，隐藏状态的图片更新为呈现状态。网页中的图片更新为呈现状态指网页中图片的相关隐藏的元素恢复，呈现在网页中。

具体的，本实施例中从浏览网页的内部变量中读取处于隐藏状态的图片所对应图片元素的图片内容及图片背景，并添加到所述浏览网页的dom树的相应位置；也即是从js内部变量中读取图片元素内容、图片背景等，将读取的图片内容、图片背景等添加的浏览网页的dom树中，实现图片的再次呈现。

本发明实施例中提供的瀑布流式图片动态呈现的方法，在以瀑布流的方式进行图片呈现过程中，随着网页中图片的加载，获取加载图片的图片加载信息，根据图片加载信息确定目标图片，进而将目标图片设置为隐藏状态。在本实施例中也即是将图片元素的图片内容或图片背景等从网页的dom树中隐藏掉，同时将图片元素的图片内容和图片背景等保存在一个js内部变量中，并利用css的visibile:hidden隐藏元素占据隐藏后图片元素在dom树中的位置。以此，本发明技术方案的采用，当确定目标图片后，将目标图片设置为隐藏状态，使得浏览器加载的网页中呈现图片数量降低，优化了瀑布流式图片浏览的方式，降低了浏览器的承载量，进而提升了浏览器浏览性能。

进一步的，本实施例中，如果处于隐藏状态的图片在浏览网页中的位置进入预定显示区域时，将处于隐藏状态的图片更新为呈现状态。在使得浏览器加载的网页中呈现图片数量降低，提升了浏览器浏览性能的同时，也增加了图片浏览的便捷及灵活性。

图6所示是本发明实施例六中瀑布流式图片动态呈现装置结构示意图；本实施例中相关解释及说明参照上述各实施例，如图6所示，本实施例中所述装置包括：图片加载模块601、目标图片确定模块602和隐藏状态设置模块603。其中：

图片加载模块601，用于通过用户滚动显示屏的输入操作获取浏览网页请求，基于所述浏览网页请求在瀑布流式浏览网页中为所述显示屏对应的屏幕显示区域进行图片加载。

目标图片确定模块602，用于获取浏览网页中已加载图片的图片加载信息，并根据所述图片加载信息确定所述浏览网页中的目标图片；

具体的，本实施例中目标图片确定模块602包括：

图片数量统计子模块6021，用于统计所述浏览网页中已加载图片的数量。

目标图片选择子模块602，用于如果已加载图片的数量超过预设值，按照加载顺序选择目标图片。

图片位置获取子模块6023，用于获取浏览网页中已加载图片的图片位置；

目标图片确定子模块6024，用于如果已加载图片的图片位置超出预定显示区域，则作为目标图片。

隐藏状态设置模块603，用于将确定的所述目标图片设置为隐藏状态。

具体的，本实施例中隐藏状态设置模块603具体用于在所述浏览网页的dom树中隐藏所述目标图片所对应图片元素中的图片内容及图片背景，且保留所述图片元素在所述浏览网页的dom树中占据的位置。

该装置还包括保存模块604，用于将所述目标图片所对应图片元素中的图片内容及图片背景保存在所述浏览网页的内部变量中。

呈现状态更新模块605，用于如果处于隐藏状态的图片在所述浏览网页中的位置进入预定显示区域时，将处于隐藏状态的图片更新为呈现状态。

具体的，本实施例中呈现状态更新模块605具体用于从所述浏览网页的内部变量中读取处于隐藏状态的图片所对应图片元素的图片内容及图片背景，并添加到所述浏览网页的dom树的相应位置。

本发明实施例中提供的瀑布流式图片动态呈现的装置，利用此装置在以瀑布流的方式进行图片呈现过程中，随着网页中图片的加载，获取加载图片的图片加载信息，根据图片加载信息确定目标图片，进而将目标图片设置为隐藏状态。本发明技术方案的采用，当确定目标图片后，将目标图片设置为隐藏状态，使得浏览器加载的网页中呈现图片数量降低，优化了瀑布流式图片浏览的方式，降低了浏览器的承载量，进而提升了浏览器浏览性能。

显然，本领域技术人员应该明白，上述的本发明的各模块或各操作可以用通用的计算装置来实现，它们可以集中在单个计算装置上，或者分布在多个计算装置所组成的网络上，可选地，他们可以用计算机装置可执行的程序代码来实现，从而可以将它们存储在存储装置中由计算装置来执行，或者将它们分别制作成各个集成电路模块，或者将它们中的多个模块或操作制作成单个集成电路模块来实现。这样，本发明不限制于任何特定的硬件和软件的结合。

以上所述仅为本发明的优选实施例，并不用于限制本发明，对于本领域技术人员而言，本发明可以有各种改动和变化。凡在本发明的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (12)

1.一种瀑布流式图片动态呈现的方法，其特征在于，包括：

通过用户滚动显示屏的输入操作获取浏览网页请求，基于所述浏览网页请求在瀑布流式浏览网页中为所述显示屏对应的屏幕显示区域进行图片加载；

获取浏览网页中已加载图片的图片加载信息，并根据所述图片加载信息确定所述浏览网页中的目标图片；

将确定的所述目标图片设置为隐藏状态；

其中，所述将确定的所述目标图片设置为隐藏状态包括：

在所述浏览网页的dom树中隐藏所述目标图片所对应图片元素中的图片内容及图片背景，且保留所述图片元素在所述浏览网页的dom树中占据的位置。

2.根据权利要求1所述的瀑布流式图片动态呈现的方法，其特征在于，还包括：

将所述目标图片所对应图片元素中的图片内容及图片背景保存在所述浏览网页的内部变量中。

3.如权利要求1至2中任一项所述的瀑布流式图片动态呈现的方法，其特征在于，获取浏览网页中已加载图片的图片加载信息，并根据所述图片加载信息确定所述浏览网页中的目标图片包括：

统计所述浏览网页中已加载图片的数量；

如果已加载图片的数量超过预设值，按照加载顺序选择目标图片。

4.如权利要求1至2中任一项所述的瀑布流式图片动态呈现的方法，其特征在于，获取浏览网页中已加载图片的图片加载信息，并根据所述图片加载信息确定所述浏览网页中的目标图片包括：

获取所述浏览网页中已加载图片的图片位置；

如果已加载图片的图片位置超出预定显示区域，则作为目标图片，其中，所述预定显示区域包括所述浏览网页位于所述显示屏中的屏幕显示区域以及位于屏幕显示区域上方和/或下方预设高度内的预定高度显示区域。

5.如权利要求4所述的瀑布流式图片动态呈现的方法，其特征在于，还包括：

如果处于隐藏状态的图片在所述浏览网页中的位置进入预定显示区域时，将处于隐藏状态的图片更新为呈现状态。

6.如权利要求5所述的瀑布流式图片动态呈现的方法，其特征在于，将处于隐藏状态的图片更新为呈现状态包括：

从所述浏览网页的内部变量中读取处于隐藏状态的图片所对应图片元素的图片内容及图片背景，并添加到所述浏览网页的dom树的相应位置。

7.一种瀑布流式图片动态呈现的装置，其特征在于，包括：

图片加载模块，用于通过用户滚动显示屏的输入操作获取浏览网页请求，基于所述浏览网页请求在瀑布流式浏览网页中为所述显示屏对应的屏幕显示区域进行图片加载；

目标图片确定模块，用于获取浏览网页中已加载图片的图片加载信息，并根据所述图片加载信息确定所述浏览网页中的目标图片；

隐藏状态设置模块，用于将确定的所述目标图片设置为隐藏状态；

其中，所述隐藏状态设置模块具体用于在所述浏览网页的dom树中隐藏所述目标图片所对应图片元素中的图片内容及图片背景，且保留所述图片元素在所述浏览网页的dom树中占据的位置。

8.根据权利要求7所述瀑布流式图片动态呈现的装置，其特征在于，还包括：

保存模块，用于将所述目标图片所对应图片元素中的图片内容及图片背景保存在所述浏览网页的内部变量中。

9.如权利要求7至8中任一项所述的瀑布流式图片动态呈现的装置，其特征在于，所述目标图片确定模块包括：

图片数量统计子模块，用于统计所述浏览网页中已加载图片的数量；

目标图片选择子模块，用于如果已加载图片的数量超过预设值，按照加载顺序选择目标图片。

10.如权利要求7至8中任一项所述的瀑布流式图片动态呈现的装置，其特征在于，所述目标图片确定模块包括：

图片位置获取子模块，用于获取浏览网页中已加载图片的图片位置；

目标图片确定子模块，用于如果已加载图片的图片位置超出预定显示区域，则作为目标图片，其中，所述预定显示区域包括所述浏览网页位于所述显示屏中的屏幕显示区域以及位于屏幕显示区域上方和/或下方预设高度内的预定高度显示区域。

11.如权利要求10所述的瀑布流式图片动态呈现的装置，其特征在于，隐藏状态设置模块还包括：

呈现状态更新模块，用于如果处于隐藏状态的图片在所述浏览网页中的位置进入预定显示区域时，将处于隐藏状态的图片更新为呈现状态。

12.如权利要求11所述的瀑布流式图片动态呈现的装置，其特征在于，所述呈现状态更新模块具体用于从所述浏览网页的内部变量中读取处于隐藏状态的图片所对应图片元素的图片内容及图片背景，并添加到所述浏览网页的dom树的相应位置。