图片呈现方法及设备技术

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

【技术实现步骤摘要】
图片呈现方法及设备
本专利技术涉及计算机
，具体涉及一种页面中的图片呈现方法及设备。
技术介绍
随着互联网的快速发展，网站页面使用越来越多的多媒体资源来丰富页面的显示效果，以吸引用户浏览。然而，在加载页面的过程中，会下载页面中所有的图片，即使不在页面可见区域以内的图片也会下载。由于在用户处的网络资源有限，会因为需要下载页面中所有的图片而降低页面的加载速度，从而影响用户体验。
技术实现思路
鉴于上述问题，提出了本专利技术以便提供一种克服上述问题或者至少部分地解决上述问题的页面中的图片呈现方法及设备。根据本专利技术的一个方面，提供了一种页面中的图片呈现方法，包括步骤：将页面划分为多个区块并注册；对各区块中需要延时呈现的图片进行注册；在浏览器中下载页面中未注册的图片；判断注册的区块是否要呈现，如果要呈现，则在浏览器中下载注册的区块中需要延时呈现的注册的图片；以及呈现所下载的位于浏览器的当前窗口中的图片。可选地，对各区块中需要延时呈现的图片进行注册的步骤包括：将需要延时呈现的图片的地址信息嵌入到图片标签的自定义标签属性中。可选地，判断注册的区块是否要呈现的步骤包括：判断注册的区块是否位于浏览器的当前窗口中。可选地，判断注册的区块是否需要呈现的步骤包括：判断注册的区块是否在浏览器的窗口中移动。可选地，还包括步骤：当浏览器的当前窗口中呈现的内容发生变化时，判断注册的区块是否要呈现，如果要呈现，则下载注册的区块中需要延时呈现的注册的图片。可选地，下载注册的区块中需要延时呈现的注册图片包括步骤：将图片的地址信息从图片标签的自定义标签属性复制到图片标签的源地址属性中，以便浏览器可以根据图片标签的内容去下载所述图片。根据本专利技术的另一个方面，提供了一种页面中的图片呈现设备，包括：区块划分器，被配置为将页面划分为多个区块；区块注册器，被配置为对各区块进行注册，并对各区块中需要延时呈现的图片进行注册；图片渲染器，被配置为在浏览器中下载页面中未注册的图片；区块呈现判定器，被配置为判断注册的区块是否要呈现，如果要呈现，则由图片渲染器在浏览器中下载注册的区块中需要延时呈现的注册的图片；以及图片呈现器，被配置为呈现由图片渲染器所下载的、位于浏览器的当前窗口中的图片。可选地，区块注册器将需要延时呈现的图片的地址信息嵌入到图片标签的自定义标签属性中。可选地，区块呈现判定器通过判断所注册的区块是否位于浏览器的当前窗口中来判断所注册的区块是否要呈现。可选地，区块呈现判定器通过判断所述注册的区块是否在浏览器的窗口中移动来判断是否要呈现所述注册的区块。可选地，当浏览器的当前窗口上呈现的内容发生变化时，区块呈现判定器判断注册的区块是否要呈现，如果要呈现，则由图片渲染器来下载注册的区块中需要延时呈现的注册的图片。可选地，图片渲染器将图片的地址信息从图片标签的自定义标签属性复制到图片标签的源地址属性中，以便浏览器可以根据图片标签的内容去下载图片。根据本专利技术的在页面中的图片呈现方法和页面中的图片呈现设备，通过将页面划分为多个区块，区块中可以放置注册过的、需要延时呈现的图片，当区块位于页面的可见区域之内时，才会对该区块中注册过的、需要延时呈现的图片进行下载。如果该区块一直处于页面的不可见区域时，该区块内的图片将不会被下载，此时浏览器会把网络资源分配给下载需要呈现的图片，从而能够合理运用网络资源，提高页面的加载速度。上述说明仅是本专利技术技术方案的概述，为了能够更清楚了解本专利技术的技术手段，而可依照说明书的内容予以实施，并且为了让本专利技术的上述和其它目的、特征和优点能够更明显易懂，以下特举本专利技术的具体实施方式。附图说明通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本专利技术的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：图1示出了根据本专利技术一个实施例的页面中的图片呈现方法100的流程图；图2示出了根据本专利技术一个实施例的用于浏览器的实例性的页面200；以及图3示出了根据本专利技术一个实施例的页面中的图片呈现设备300的结构框图。具体实施方式下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。Web页面运行在各种各样的浏览器当中，浏览器下载、解析和渲染Web页面内容的速度直接影响着用户体验。为此，本专利技术提出一种页面中的图片呈现方法和一种页面中的图片呈现设备。为了方便说明，在下面的描述中，设浏览器窗口的平面为XY平面。本专利技术提出的在页面中的图片呈现方法是，将页面划分为多个区块，区块中可以放置注册过的、需要延时呈现的图片，当区块位于页面的可见区域之内时，才会对该区块中注册过的、需要延时呈现的图片进行下载。如果该区块一直处于页面的不可见区域时，该区块内的图片将不会被下载，此时浏览器会把网络资源分配用于下载需要呈现的图片，从而能够合理运用网络资源，有效提高页面的加载速度。这里的“可见区域”是指网页的可视范围，具体是指整个HTML页面文档能够呈现在浏览器窗口的部分。通常一个HTML文档的整体高度都高于浏览器窗口的高度，所以会有一部分的页面处于隐藏的状态，用户可以通过移动浏览器的滚动条来查看页面的这些隐藏的区域，在整个过程中，能够看到的部分被称为页面的可见区域。下面结合图1具体说明根据本专利技术一个实施例的、适于解决上述问题的页面中的图片呈现方法100的流程图。如图1所示，根据本专利技术一实施例的页面中的图片呈现方法100始于步骤S110，在步骤S110中，将页面划分为多个区块并注册。其中，每个区块中可以放置一个或多个图片，该图片可以是静态图片或动态图片。通过对区块中的图片进行管理，可实现各图片不同的呈现方式，例如有的图片无需注册即可直接呈现，而有的图片需注册，然后再根据条件确定何时呈现。可选地，可在浏览器窗口的高度方向（即浏览器窗口的Y轴方向）上将页面划分为多个区块（block），部分实现代码如下：varmutex=$(body).getClientHeight();//浏览器窗口的高度；varblocks=newArray($(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为即时呈现的图片。这里，需要延时呈现的图片本文档来自技高网...

【技术保护点】
一种页面中的图片呈现方法，包括步骤：将页面划分为多个区块并注册；对各区块中需要延时呈现的图片进行注册；在浏览器中下载所述页面中未注册的图片；判断所述注册的区块是否要呈现，如果要呈现，则在浏览器中下载所述注册的区块中需要延时呈现的注册的图片；以及呈现所下载的位于浏览器的当前窗口中的图片。

【技术特征摘要】
1.一种页面中的图片呈现方法，包括步骤：将页面划分为多个区块并注册；其中，所述将页面划分为多个区块的步骤具体包括：将所述页面在浏览器窗口的高度方向上划分为多个区块，和/或，将所述页面在浏览器窗口的宽度方向上划分为多个区块；对各区块中需要延时呈现的图片进行注册；在浏览器中下载所述页面中未注册的图片；判断所述注册的区块是否要呈现，如果要呈现，则在浏览器中下载所述注册的区块中需要延时呈现的注册的图片；以及呈现所下载的位于浏览器的当前窗口中的图片；其中，所述判断所述注册的区块是否要呈现的步骤包括：判断所述注册的区块是否位于浏览器的当前窗口中；或者，所述判断所述注册的区块是否需要呈现的步骤包括：判断所述注册的区块在浏览器窗口的滚动条移动时是否可见。2.根据权利要求1所述的方法，其中对各区块中需要延时呈现的图片进行注册的步骤包括：将需要延时呈现的图片的地址信息嵌入到图片标签的自定义标签属性中。3.根据权利要求1或2所述的方法，还包括步骤，当浏览器的当前窗口中呈现的内容发生变化时，判断所述注册的区块是否要呈现，如果要呈现，则下载所述注册的区块中需要延时呈现的注册的图片。4.如权利要求1或2所述的方法，其中下载所述注册的区块中需要延时呈现的注册图片包括步骤：将图片的地址信息从所述图片标签的自定义标签属性复制到图片标签的源地址属性中，以便浏览器可以根据图片标签的内容去下载所述图片。5.如权利要求3所述的方法，其中下载所述注册的区块中需要延时呈现的注册图片包括步骤：将图片的地址信息从所述图片标签的自定义标签属性复制到图片标签的源地址属性中，以便浏览器可以根据图片标签的内容去下载所述图片。6.一种页面中的图片呈现设备...

【专利技术属性】
技术研发人员：黄欢，
申请(专利权)人：北京奇虎科技有限公司，奇智软件北京有限公司，
类型：发明
国别省市：