CN103164541A - 图片呈现方法及设备 - Google Patents

Abstract

本发明公开了一种页面中的图片呈现方法及设备，包括步骤：将页面划分为多个区块并注册；对各区块中需要延时呈现的图片进行注册；在浏览器中下载所述页面中未注册的图片；判断注册的区块是否要呈现，如果要呈现，则在浏览器中下载注册的区块中需要延时呈现的注册的图片；以及呈现所下载的位于浏览器的当前窗口中的图片。由于浏览器会把网络资源分配给下载需要呈现的图片，从而能够合理运用网络资源，提高页面的加载速度。

Description

图片呈现方法及设备

技术领域

本发明涉及计算机技术领域，具体涉及一种页面中的图片呈现方法及设备。

背景技术

随着互联网的快速发展，网站页面使用越来越多的多媒体资源来丰富页面的显示效果，以吸引用户浏览。

然而，在加载页面的过程中，会下载页面中所有的图片，即使不在页面可见区域以内的图片也会下载。由于在用户处的网络资源有限，会因为需要下载页面中所有的图片而降低页面的加载速度，从而影响用户体验。

发明内容

鉴于上述问题，提出了本发明以便提供一种克服上述问题或者至少部分地解决上述问题的页面中的图片呈现方法及设备。

根据本发明的一个方面，提供了一种页面中的图片呈现方法，包括步骤：将页面划分为多个区块并注册；对各区块中需要延时呈现的图片进行注册；在浏览器中下载页面中未注册的图片；判断注册的区块是否要呈现，如果要呈现，则在浏览器中下载注册的区块中需要延时呈现的注册的图片；以及呈现所下载的位于浏览器的当前窗口中的图片。

可选地，对各区块中需要延时呈现的图片进行注册的步骤包括：将需要延时呈现的图片的地址信息嵌入到图片标签的自定义标签属性中。

可选地，判断注册的区块是否要呈现的步骤包括：判断注册的区块是否位于浏览器的当前窗口中。

可选地，判断注册的区块是否需要呈现的步骤包括：判断注册的区块是否在浏览器的窗口中移动。

可选地，还包括步骤：当浏览器的当前窗口中呈现的内容发生变化时，判断注册的区块是否要呈现，如果要呈现，则下载注册的区块中需要延时呈现的注册的图片。

可选地，下载注册的区块中需要延时呈现的注册图片包括步骤：将图片的地址信息从图片标签的自定义标签属性复制到图片标签的源地址属性中，以便浏览器可以根据图片标签的内容去下载所述图片。

根据本发明的另一个方面，提供了一种页面中的图片呈现设备，包括：区块划分器，被配置为将页面划分为多个区块；区块注册器，被配置为对各区块进行注册，并对各区块中需要延时呈现的图片进行注册；图片渲染器，被配置为在浏览器中下载页面中未注册的图片；区块呈现判定器，被配置为判断注册的区块是否要呈现，如果要呈现，则由图片渲染器在浏览器中下载注册的区块中需要延时呈现的注册的图片；以及图片呈现器，被配置为呈现由图片渲染器所下载的、位于浏览器的当前窗口中的图片。

可选地，区块注册器将需要延时呈现的图片的地址信息嵌入到图片标签的自定义标签属性中。

可选地，区块呈现判定器通过判断所注册的区块是否位于浏览器的当前窗口中来判断所注册的区块是否要呈现。

可选地，区块呈现判定器通过判断所述注册的区块是否在浏览器的窗口中移动来判断是否要呈现所述注册的区块。

可选地，当浏览器的当前窗口上呈现的内容发生变化时，区块呈现判定器判断注册的区块是否要呈现，如果要呈现，则由图片渲染器来下载注册的区块中需要延时呈现的注册的图片。

可选地，图片渲染器将图片的地址信息从图片标签的自定义标签属性复制到图片标签的源地址属性中，以便浏览器可以根据图片标签的内容去下载图片。

根据本发明的在页面中的图片呈现方法和页面中的图片呈现设备，通过将页面划分为多个区块，区块中可以放置注册过的、需要延时呈现的图片，当区块位于页面的可见区域之内时，才会对该区块中注册过的、需要延时呈现的图片进行下载。如果该区块一直处于页面的不可见区域时，该区块内的图片将不会被下载，此时浏览器会把网络资源分配给下载需要呈现的图片，从而能够合理运用网络资源，提高页面的加载速度。

上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。

附图说明

通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：

图1示出了根据本发明一个实施例的页面中的图片呈现方法100的流程图；

图2示出了根据本发明一个实施例的用于浏览器的实例性的页面200；以及

图3示出了根据本发明一个实施例的页面中的图片呈现设备300的结构框图。

具体实施方式

下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。

Web页面运行在各种各样的浏览器当中，浏览器下载、解析和渲染Web页面内容的速度直接影响着用户体验。为此，本发明提出一种页面中的图片呈现方法和一种页面中的图片呈现设备。为了方便说明，在下面的描述中，设浏览器窗口的平面为XY平面。

本发明提出的在页面中的图片呈现方法是，将页面划分为多个区块，区块中可以放置注册过的、需要延时呈现的图片，当区块位于页面的可见区域之内时，才会对该区块中注册过的、需要延时呈现的图片进行下载。如果该区块一直处于页面的不可见区域时，该区块内的图片将不会被下载，此时浏览器会把网络资源分配用于下载需要呈现的图片，从而能够合理运用网络资源，有效提高页面的加载速度。这里的“可见区域”是指网页的可视范围，具体是指整个HTML页面文档能够呈现在浏览器窗口的部分。通常一个HTML文档的整体高度都高于浏览器窗口的高度，所以会有一部分的页面处于隐藏的状态，用户可以通过移动浏览器的滚动条来查看页面的这些隐藏的区域，在整个过程中，能够看到的部分被称为页面的可见区域。

下面结合图1具体说明根据本发明一个实施例的、适于解决上述问题的页面中的图片呈现方法100的流程图。

如图1所示，根据本发明一实施例的页面中的图片呈现方法100始于步骤S110，在步骤S110中，将页面划分为多个区块并注册。其中，每个区块中可以放置一个或多个图片，该图片可以是静态图片或动态图片。通过对区块中的图片进行管理，可实现各图片不同的呈现方式，例如有的图片无需注册即可直接呈现，而有的图片需注册，然后再根据条件确定何时呈现。

可选地，可在浏览器窗口的高度方向（即浏览器窗口的Y轴方向）上将页面划分为多个区块（block），部分实现代码如下：

var mutex=$(body).getClientHeight();//浏览器窗口的高度；

var blocks=new Array($(body).scrollHeight()/mutex);//划分为多个区块并注册；

图2示出了根据本发明一个实施例的用于浏览器的实例性的页面200。如图2所示，一个HTML文档所形成的页面200根据浏览器窗口210的高度在浏览器的Y轴方向上被划分成多个区块，为了图示清晰起见，图2中只示出了两个区块201和202，实际上可以包括若干个区块。在呈现页面期间，可以记录划分出的多个区块，例如，可以在页面加载期间，利用在页面加载时运行的JS脚本来注册所划分的区块。在区块201中，包含三个图片2011、2012、和2013，其中图片2011为需要延时呈现的图片，而图片2012和2013为即时呈现的图片。在区块202中，包含三个图片2021、2022、和2023，其中图片2022和2023为需要延时呈现的图片，而图片2021为即时呈现的图片。这里，需要延时呈现的图片只有在需要显示时，例如当其所在的区块位于浏览器的当前窗口中时或者浏览器的滚动条滚动时其所在的区块会处于浏览器的当前窗口时才会呈现。

在图2中只示出了在Y轴方向有滚动条的例子，可选地，当页面在X轴方向上的宽度大于浏览器窗口的宽度（即浏览器窗口在X轴方向上的大小）时，在X轴方向上也可以划分出多个区块，划分方式如上面所述的在Y轴方向上的划分方式。

随后，在步骤S120中，对页面中每个区块中的需要延时呈现的图片进行注册。也就是，如果该区块中有需要延时呈现的图片时，将该需要延时呈现的图片进行注册。

可选地，注册需要延时呈现的图片是指将需要延时呈现的图片的地址信息嵌入到图片标签的自定义标签属性中，部分实现代码如下：

<img data-lazyload="图片的地址"width="90"height="64"alt=""/>

在本发明的实施例中，需要延时呈现的图片的图片标签（例如img标签）中没有图片的地址信息，例如没有“src="图片的地址"”部分或者src中没有赋值，而是将需要延时呈现的图片的地址信息嵌入到图片标签的自定义标签属性中，例如该自定义标签属性可以是延迟加载属性（data-lazyload）。因此当页面在解析需要延时呈现的图片的图片标签时，由于需要延时呈现的图片的图片标签中没有关键的图片的地址信息，使得在该页面中不会立即呈现图片，而是会根据图片标签的自定义标签属性延迟呈现该图片。

随后，在步骤S130中，在浏览器中下载该页面中未注册的图片。其中，下载该页面中未注册的图片的过程可以是页面先解析未注册的图片的图片标签，由于图片标签中有图片的地址信息时，浏览器可立即下载该图片。

例如，在图2所示的页面200中，未注册的图片2012、2013以及2021在显示页面200时就可以直接被下载，也就是说，未注册的图片所在的区块即使未处于浏览器的当前窗口中，该图片也已被下载，并随时处于被呈现的状态。

随后，在步骤S140中，判断是否要呈现所注册的区块。可选地，可通过以下两种方式判断所注册的区块是否要呈现：方式一、判断该区块是否位于浏览器的当前窗口中。方式二、判断该区块是否通过移动而位于浏览器的窗口中，例如区块在浏览器的Y轴方向上移动，或者区块在浏览器的X轴方向上移动。

其中，位于浏览器的当前窗口中的区块是指页面中在浏览器当前窗口中显示的区块。通常一个由HTML文档形成的页面的整体高度高于浏览器窗口的高度，所以一部分的页面会处于隐藏的状态，这可以通过移动浏览器的滚动条来达到查看处于隐藏状态的部分页面。

再参见图2，页面200的区块201位于浏览器的当前窗口210中，而区块202未处于浏览器的当前窗口210中，所以，区块201被判断为要呈现，而区块202被判断为不呈现。可选地，如果区块202通过浏览器的滚动条可以呈现，那么区块202也被判断为要呈现。

当在步骤S140中判断某个区块要呈现时，则进入步骤S150。在步骤S150中，在浏览器中解析、渲染并下载该区块中需要延时呈现的注册的图片。可选地，将图片的地址信息从图片标签的自定义标签属性复制到图片标签的源地址属性中，以便浏览器可以根据图片标签的内容去下载该图片。

下面结合图1和图2具体描述步骤S130至步骤S150的过程，在本发明的图片呈现方法100中，页面呈现时，在步骤S130中下载、解析和渲染未注册的图片2012和2013以及2021，然后在步骤S140中判断注册的区块201和202是否要呈现，当区块201位于浏览器的当前窗口中时，判定区块201需要立即呈现，则在步骤S150中，下载区块201中已注册的需要延迟加载的图片2011的内容，并进行解析和渲染以呈现图片；在步骤S140中，由于区块202不位于浏览器的当前窗口中，所以不需要下载区块202中已注册的需要延迟加载的图片2022和2023的图片内容，从而不进行呈现，而当浏览器的当前窗口中呈现的内容发生变化时，例如通过移动浏览器的当前窗口的滚动条使得当前窗口中呈现的区块变为202时，再返回步骤S140，判断注册的区块201和202是否要呈现，这时，判断区块202要呈现而区块201不呈现，则需要下载区块202中需要延迟加载的图片2022和2023的图片内容并进行解析和渲染。关于此部分的实现代码如下：

在步骤S150下载注册的区块中的需要延时呈现的注册的图片后，在步骤S160中，呈现所下载的位于浏览器的当前窗口中的图片，这里的图片包括所下载的未注册的图片和下载的注册的图片。

需要说明的是，图1所示的方法并不限定按所示的各步骤的顺序进行，可以根据需要调整各步骤的先后顺序，例如步骤S140～步骤S160，也可在步骤S130之前，另外，所述步骤也不限定于上述步骤划分，上述步骤可以进一步拆分成更多步骤也可以合并成更少步骤。

下面结合图3说明根据本发明一个实施例的、适于解决上述问题的一种页面中的图片呈现设备300。

如图3所示，本发明实施例的页面中的图片呈现设备300包括：区块划分器310、区块注册器320、图片渲染器340、区块呈现判定器330和图片呈现器350。

其中，区块划分器310被配置为将页面划分为多个区块。可选地，区块划分器310被配置为在浏览器窗口的高度方向上将页面划分为多个区块，其中，每个区块中可以放置一个或多个图片，该图片可以是静态图片或动态图片。通过对区块中的图片进行管理，实现各图片不同的呈现方式，例如有的图片无需注册即可直接呈现，而有的图片需注册，然后再根据条件确定何时呈现。可选地，可在浏览器窗口的高度方向（即浏览器窗口的Y轴方向）上将页面划分为多个区块（block）。例如，如图2所示，一个HTML文档所形成的页面200根据浏览器窗口210的高度在浏览器的Y轴方向上被划分成多个区块，为了图示清晰起见，图2中只示出了两个区块201和202，实际上可以包括若干个区块。在呈现页面期间，可以记录划分出的多个区块。例如，可以在页面加载期间，利用在页面加载时运行的JS脚本来注册所划分的区块。在区块201中，包含三个图片2011、2012、和2013，其中图片2011为需要延时呈现的图片，而图片2012和2013为即时呈现的图片。在区块202中，包含三个图片2021、2022、和2023，其中图片2022和2023为需要延时呈现的图片，而图片2021为即时呈现的图片。

区块注册器320对区块划分器310所划分出的各区块进行注册，并对各区块中需要延时呈现的图片进行注册。例如，对于图2所示的页面200，其中需要延时呈现的图片2011、2022和2023要进行注册。

可选地，区块注册器320将需要延时呈现的图片的地址信息嵌入到图片标签的自定义标签属性中，例如，部分实现代码如下：

<img data-lazyload="图片的地址信息"width="90"height="64"alt=""/>

在上述代码中，需要延时呈现的图片的图片标签img中没有图片的地址信息（即，没有“src="图片的地址"”部分），而是将需要延时呈现的图片的地址信息嵌入到图片标签img的自定义标签属性中，例如该自定义标签属性可以是延迟加载属性（data-lazyload）。因此，当页面在解析需要延时呈现的图片的图片标签img时，由于需要延时呈现的图片的图片标签img中没有关键的图片的地址信息，使得在该页面中不会立即呈现图片，而是会根据图片标签的自定义标签属性延迟呈现该图片。

区块呈现判定器330被配置为判断是否要呈现所注册的区块。可选地，区块呈现判定器330通过判断所注册的区块是否位于浏览器的当前窗口中来判断是否要呈现；或者，区块呈现判定器330通过判断注册的区块在浏览器窗口的滚动条移动时是否可见来判断是否要呈现。

其中，位于浏览器的当前窗口中的区块是指页面中在浏览当前窗口中显示的区块。通常一个HTML文档形成的页面的整体高度高于浏览器窗口的高度，所以只有一部分的页面会在浏览当前窗口中显示，其它的部分将处于不可见区域，即处于隐藏的状态，而处于不可见区域的部分可以通过移动浏览器的滚动条来查看。

如图2所示的页面200，区块201位于浏览器的当前窗口210中，而区块202未处于浏览器的当前窗口210中，所以，区块201被判断为要呈现，而区块202被判断为不呈现。可选地，如果区块202通过浏览器的滚动条可以呈现，那么区块202也被判断为要呈现。

图片渲染器340被配置为在浏览器中下载该页面中未注册的图片，以及在浏览器中下载区块呈现判定器330判定呈现的区块中需要延时呈现的注册的图片。其中，对于页面中未注册的图片，在浏览器中直接解析、渲染、并下载，然后进行呈现，具体过程可参照步骤S130的描述；而对于区块呈现判定器330判定呈现的区块中需要延时呈现的注册的图片，在浏览器中并不能直接下载而呈现，因为在需要延时呈现的图片的图片标签img中没有图片的地址信息或者src中没有赋值，这时，图片渲染器340可以将需要延时呈现的注册的图片的地址信息从图片标签的自定义标签属性复制到图片标签的源地址属性中，以便浏览器可以根据图片标签的地址信息去下载该图片。这里，页面的解析、渲染和下载可以是浏览器将图片根据HTML规范定义的规则而准备要显示在浏览器窗口中的页面内容的过程。

可选地，当浏览器的当前窗口上呈现的内容发生变化时，区块呈现判定器330判断上述注册的区块是否要呈现，如果要呈现，则由图片渲染器340来下载该注册的区块中需要延时呈现的注册的图片。

图片呈现器350被配置为呈现由图片渲染器340所下载的、位于浏览器的当前窗口中的图片，这里的图片包括所下载的未注册的图片和下载的注册的图片。

根据本发明的设备，其中当浏览器的当前窗口上呈现的内容发生变化时，所述区块呈现判定器判断所述注册的区块是否要呈现，如果要呈现，则由所述图片渲染器来下载所述注册的区块中需要延时呈现的注册的图片。

根据本发明的设备，其中所述图片渲染器将图片的地址信息从所述图片标签的自定义标签属性复制到图片标签的源地址属性中，以便浏览器可以根据图片标签的内容去下载所述图片。

在此提供的算法和显示不与任何特定计算机、虚拟***或者其它设备固有相关。各种通用***也可以与基于在此的示教一起使用。根据上面的描述，构造这类***所要求的结构是显而易见的。此外，本发明也不针对任何特定编程语言。应当明白，可以利用各种编程语言实现在此描述的本发明的内容，并且上面对特定语言所做的描述是为了披露本发明的最佳实施方式。

在此处所提供的说明书中，说明了大量具体细节。然而，能够理解，本发明的实施例可以在没有这些具体细节的情况下实践。在一些实例中，并未详细示出公知的方法、结构和技术，以便不模糊对本说明书的理解。

类似地，应当理解，为了精简本公开并帮助理解各个发明方面中的一个或多个，在上面对本发明的示例性实施例的描述中，本发明的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。然而，并不应将该公开的方法解释成反映如下意图：即所要求保护的本发明要求比在每个权利要求中所明确记载的特征更多的特征。更确切地说，如下面的权利要求书所反映的那样，发明方面在于少于前面公开的单个实施例的所有特征。因此，遵循具体实施方式的权利要求书由此明确地并入该具体实施方式，其中每个权利要求本身都作为本发明的单独实施例。

本领域那些技术人员可以理解，可以对实施例中的设备中的模块进行自适应性地改变并且把它们设置在与该实施例不同的一个或多个设备中。可以把实施例中的模块或单元或组件组合成一个模块或单元或组件，以及此外可以把它们分成多个子模块或子单元或子组件。除了这样的特征和/或过程或者单元中的至少一些是相互排斥之外，可以采用任何组合对本说明书（包括伴随的权利要求、摘要和附图）中公开的所有特征以及如此公开的任何方法或者设备的所有过程或单元进行组合。除非另外明确陈述，本说明书（包括伴随的权利要求、摘要和附图）中公开的每个特征可以由提供相同、等同或相似目的的替代特征来代替。

此外，本领域的技术人员能够理解，尽管在此所述的一些实施例包括其它实施例中所包括的某些特征而不是其它特征，但是不同实施例的特征的组合意味着处于本发明的范围之内并且形成不同的实施例。例如，在下面的权利要求书中，所要求保护的实施例的任意之一都可以以任意的组合方式来使用。

本发明的各个部件实施例可以以硬件实现，或者以在一个或者多个处理器上运行的软件模块实现，或者以它们的组合实现。本领域的技术人员应当理解，可以在实践中使用微处理器或者数字信号处理器（DSP）来实现根据本发明实施例的页面中的图片呈现设备中的一些或者全部部件的一些或者全部功能。本发明还可以实现为用于执行这里所描述的方法的一部分或者全部的设备或者装置程序（例如，计算机程序和计算机程序产品）。这样的实现本发明的程序可以存储在计算机可读介质上，或者可以具有一个或者多个信号的形式。这样的信号可以从因特网网站上下载得到，或者在载体信号上提供，或者以任何其他形式提供。

应该注意的是上述实施例对本发明进行说明而不是对本发明进行限制，并且本领域技术人员在不脱离所附权利要求的范围的情况下可设计出替换实施例。在权利要求中，不应将位于括号之间的任何参考符号构造成对权利要求的限制。单词“包含”不排除存在未列在权利要求中的元件或步骤。位于元件之前的单词“一”或“一个”不排除存在多个这样的元件。本发明可以借助于包括有若干不同元件的硬件以及借助于适当编程的计算机来实现。在列举了若干装置的单元权利要求中，这些装置中的多个可以是通过同一个硬件项来具体体现。单词第一、第二、以及第三等的使用不表示任何顺序。可将这些单词解释为名称。

Claims (10)

1.一种页面中的图片呈现方法，包括步骤：

将页面划分为多个区块并注册；

对各区块中需要延时呈现的图片进行注册；

在浏览器中下载所述页面中未注册的图片；

判断所述注册的区块是否要呈现，如果要呈现，则在浏览器中下载所述注册的区块中需要延时呈现的注册的图片；以及

呈现所下载的位于浏览器的当前窗口中的图片。

2.根据权利要求1所述的方法，其中对各区块中需要延时呈现的图片进行注册的步骤包括：

将需要延时呈现的图片的地址信息嵌入到图片标签的自定义标签属性中。

3.根据权利要求1或者2所述的方法，其中，所述判断所述注册的区块是否要呈现的步骤包括：

判断所述注册的区块是否位于浏览器的当前窗口中。

4.根据权利要求1或者2所述的方法，其中所述判断所述注册的区块是否需要呈现的步骤包括：

判断所述注册的区块在浏览器窗口的滚动条移动时是否可见。

5.根据权利要求1-4中任一所述的方法，还包括步骤，

当浏览器的当前窗口中呈现的内容发生变化时，判断所述注册的区块是否要呈现，如果要呈现，则下载所述注册的区块中需要延时呈现的注册的图片。

6.如权利要求1-5中任一所述的方法，其中下载所述注册的区块中需要延时呈现的注册图片包括步骤：

将图片的地址信息从所述图片标签的自定义标签属性复制到图片标签的源地址属性中，以便浏览器可以根据图片标签的内容去下载所述图片。

7.一种页面中的图片呈现设备，包括：

区块划分器，被配置为将页面划分为多个区块；

区块注册器，被配置为对各区块进行注册，并对各区块中需要延时呈现的图片进行注册；

图片渲染器，被配置为在浏览器中下载所述页面中未注册的图片；

区块呈现判定器，被配置为判断所述注册的区块是否要呈现，如果要呈现，则由所述图片渲染器在浏览器中下载所述注册的区块中需要延时呈现的注册的图片；以及

图片呈现器，被配置为呈现由图片渲染器所下载的、位于浏览器的当前窗口中的图片。

8.如权利要求7所述的设备，其中所述区块注册器将需要延时呈现的图片的地址信息嵌入到图片标签的自定义标签属性中。

9.如权利要求7或者8所述的设备，其中所述区块呈现判定器通过判断所注册的区块是否位于浏览器的当前窗口中来判断所注册的区块是否要呈现。

10.如权利要求7或者8所述的设备，其中所述区块呈现判定器通过判断所述注册的区块在浏览器窗口的滚动条移动时是否可见来判断是否要呈现所述注册的区块。

Images