CN105335419A - 网页图片加载方法和装置 - Google Patents

Abstract

本发明公开了一种网页图片加载方法和装置。在加载网页时，可以阻止对网页中至少部分图片的加载以节省流量。而在用户浏览过程中，响应于网页首次排版完成或响应于屏幕显示范围移动指令，确定图片加载范围内的待加载图片，并且加载所述图片加载范围内的待加载图片。该图片加载范围包括当前屏幕显示范围或当前屏幕显示范围以外预定距离内的预定距离范围。通过使用本发明的网页图片加载方法和装置，在初始加载网页时没有加载全部图片以节省流量的情况下，在浏览过程中适应性地自动加载了部分图片，以备用户浏览，实现了在流畅地浏览含有图片的网页与节省流量之间的良好平衡。

Description

网页图片加载方法和装置

技术领域

本发明涉及互联网领域，特别涉及网页图片加载方法和装置。

背景技术

目前，很多网页上都添加了各种图片，以便更加直观地向用户传递各种信息。而众所周知，图片文件往往较大。下载较多的图片会占用较多的流量，特别是在按流量计费的情形下，往往可能会耗费更多的费用。特别是在使用智能手机等移动终端，通过移动通信网络访问网页时，客户对流量更加敏感。

通常，在网页浏览器加载并显示网页时，一般的流程如下：

首先，在浏览器地址栏中输入地址后开始加载网页。

浏览器从网络接收到页面的超文本标记语言(HTML)数据，然后开始解析，并生成文件对象模型(DOM)树，然后根据DOM树对网页进行排版，渲染显示。

在解析的过程中，每当发现有图片标签(img标签)，就发起网络请求来加载图片资源，以便后续在用户滚动网页到该图片所在位置时能显示该图片。

在上述一般流程中，无论图片位于网页的什么位置，都会被加载。但是如果图片位于一个很长页面的靠后的位置，用户并没有进行向下滚动的操作位于靠后的位置的图片照样被加载。

这样就存在一个问题：当用户没有向下滚动页面以浏览下面的网页内容的时候，已经加载不需要被显示的图片，导致流量的浪费。

另外，目前还有一种加载并显示网页的方式，其中，在使用移动通信网络访问网页时，一律不加载图片，直到用户通过点击等方式选择查看图片时，才开始下载该图片。

这样，可以节省加载不必要的图片所耗费的流量，但是当用户想要查看图片时，需要额外的操作和额外的等待时间，用户体验较差。

如上所述，在流畅地浏览含有图片的网页与节省下载不必要的图片将耗费的流量之间存在矛盾。

需要一种网页图片加载方法和装置，使得能够在流畅地浏览含有图片的网页与节省流量之间取得某种平衡。

发明内容

本发明所要解决的一个技术问题是提供一种网页图片加载方法和装置，使得既能够流畅地浏览含有图片的网页，又能够节省下载部分不必要的图片将耗费的流量。

根据本发明的一个方面，提供了一种网页图片加载方法，包括：响应于网页首次排版完成或响应于屏幕显示范围移动指令，确定图片加载范围内的待加载图片，图片加载范围包括当前屏幕显示范围或当前屏幕显示范围以外预定距离内的预定距离范围；以及加载图片加载范围内的待加载图片。

优选地，该网页图片加载方法还可以包括：解析所获取的网页源文件以生成网页的DOM(文件对象模型)树；当在解析过程中发现有图片标签时，在记录表中记录与图片标签对应的DOM节点；以及根据图片标签的CSS(层叠样式表)属性进行图片排版。

优选地，确定图片加载范围内的待加载图片的步骤可以包括：查询记录表中记录的每个DOM节点的排版结果；根据排版结果，判断与DOM节点对应的图片标签所对应的图片的位置是否在图片加载范围内；如果在图片加载范围内，则确定图片为图片加载范围内的待加载图片。

优选地，确定图片加载范围内的待加载图片的步骤还可以包括：在记录表中删除对图片加载范围内的待加载图片所对应的DOM节点的记录。

优选地，预定距离可以是基于一次屏幕显示范围移动指令将使屏幕显示范围移动的距离。

根据本发明的另一个方面，提供了一种网页图片加载装置，包括：图片确定装置，用于响应于网页首次排版完成或响应于屏幕显示范围移动指令，确定图片加载范围内的待加载图片，图片加载范围包括当前屏幕显示范围或当前屏幕显示范围以外预定距离内的预定距离范围；以及图片加载装置，用于加载图片加载范围内的待加载图片。

优选地，该网页图片加载装置还可以包括：解析装置，用于解析所获取的网页源文件以生成网页的DOM树；记录装置，用于当在解析过程中发现有图片标签时，在记录表中记录与图片标签对应的DOM节点；以及排版装置，用于根据图片标签的CSS属性进行图片排版。

优选地，图片确定装置可以包括：查询装置，用于查询记录表中记录的每个DOM节点的排版结果；判断装置，用于根据排版结果，判断与DOM节点对应的图片标签所对应的图片的位置是否在图片加载范围内；确定装置，用于在判断装置判定位置在图片加载范围内的情况下，确定图片为图片加载范围内的待加载图片。

优选地，图片确定装置还可以包括：删除装置，用于在记录表中删除对图片加载范围内的待加载图片所对应的DOM节点的记录。

优选地，预定距离可以是基于一次屏幕显示范围移动指令将使屏幕显示范围移动的距离。

通过使用本发明的网页图片加载方法和装置，在初始加载网页时没有加载全部图片以节省流量的情况下，在浏览过程中适应性地自动加载了部分图片，以备用户浏览，实现了在流畅地浏览含有图片的网页与节省流量之间的良好平衡。

附图说明

图1是根据本发明的网页图片加载方法的示意性流程图。

图2是在根据本发明的网页图片加载方法中可以采用的对网页源文件进行解析和排版的流程图。

图3是可以用来确定图片加载范围内的待加载图片的一种方式的流程图。

图4是根据本发明一个实施例的网页图片加载装置的示意性方框图。

图5是根据本发明另一个实施例的网页图片加载装置的示意性方框图。

图6是图片确定装置的示意性方框图。

具体实施方式

下面参考附图1-6来详细描述根据本发明的网页图片加载方法和装置。

为避免掩蔽本发明的主要技术构思，这里没有描述一些细节，也没有描述一些网页图片加载方法和装置以及一般的网页加载方法和装置中常用的常规步骤和装置。

图1的示意性流程图示出了本发明的网页图片加载方法。

用户在浏览器地址栏中输入地址，或者通过在别的页面点击超链接，开始请求访问网页。特别是在使用手机等移动通信终端访问网页时，很多网页的内容往往多于屏幕一次能够显示的内容。

在加载网页源文件(例如html)文件时，网页中至少部分图片并没有立即加载，以便避免下载不必要的图片，节省流量。

这里，有可能完全没有下载任何图片，也有可能只下载了网页的首屏的图片即第一屏要显示的图片，或者也有可能只下载了字节数小于预定数值的图片。

文字的字节数较少，因此，可以下载全部的文字内容。或者，也可以根据需要或设置而下载预定部分的文字内容。

在步骤S200，响应于网页首次排版完成，或者响应于屏幕显示范围移动指令，确定图片加载范围内的待加载图片。图片加载范围包括当前屏幕显示范围或当前屏幕显示范围以外预定距离内的预定距离范围。

然后，在步骤S300，加载图片加载范围内的待加载图片。

下面对上述步骤进行说明。

当下载了网页源文件之后，网页浏览器，特别是智能手机的网页浏览器会对网页内容重新排版，以适应例如智能手机的屏幕。

一方面，当网页首次排版完成时，屏幕上将显示第一屏的内容。如果在第一屏的内容中有待加载的图片，则可以认为需要加载该图片以供用户浏览。这些图片一般都会被用户浏览，能够发挥图片的意义。此时不需要等待用户的指令，就开始加载图片，以便在屏幕上显示。

或者，如果在第一屏之后预定距离的范围内有待加载的图片，则可以认为用户接下来很有可能要浏览这些图片，所以可以提前加载这些图片以便在用户发出屏幕显示范围移动指令时可以直接显示这些图片。此时，图片尚不需要在屏幕上显示。但是用户接下来继续浏览这些图片的可能性较大。提前加载这些图片可以减少用户的等待时间，改善用户的上网体验。

另一方面，当用户通过按压进度条的下拉按钮、点击进度条、点击翻页指令或者通过滑屏操作等方式发出屏幕显示范围移动指令时，屏幕上将显示新的内容，如果这些新显示的内容中有尚未加载的图片，则需要加载该图片。另外，如果新显示的内容之后预定距离的预定距离范围内有待加载的图片，也可以提前加载这些图片，以便在用户下一次发出屏幕显示范围移动指令时可以直接显示这些图片。

在本发明的上下文中，屏幕显示范围是指屏幕一次显示的网页内容的范围。屏幕显示范围移动指令则是使得屏幕上显示的网页内容的范围上下左右移动的指令，例如翻页指令、下拉指令、滑屏指令等。当前屏幕显示范围则是当前在屏幕上显示的网页内容的范围。

在本发明中，定义了图片加载范围。这是网页内容中的一个范围。在该范围中的待加载图片(或者说，未加载图片)可以被认为是需要加载的图片。在本发明中，图片加载范围可以是当前屏幕显示范围，也可以是当前屏幕显示范围以外预定距离内的预定距离范围，也可以既包括当前屏幕显示范围，又包括当前屏幕显示范围以外预定距离内的预定距离范围。

这个预定距离可以基于图片的顶端、中间、末端或其它位置计算。不论以何为基准计算，意义都可以是一样的，只是对于同样的范围所设定的数值会有所不同而已。

另一方面，这个预定距离可以相对于当前屏幕显示范围的边缘(例如上边缘(向上移动时)、下边缘(向下移动时)、左边缘(向左移动时)、右边缘(向右移动时))计算。

这个预定距离可以根据需要，例如浏览习惯、用户对流量的敏感程度等，提前设置。还可以为用户提供设置工具，以便于设置该预定距离。

作为示例，预定距离可以对应于屏幕一次能够显示的网页内容范围，或者说，对应于一屏(一个屏幕显示范围)内容。即，提前加载下一屏的网页内容中的图片。

当然，预定距离也可以设置为对应于两屏或三屏或更多，即提前下载下两屏、下三屏甚至更多的网页内容中的图片。

作为另一个示例，预定距离还可以对应于基于一次屏幕显示范围移动指令将在屏幕上新增加的网页内容范围。例如，通过按压进度条下的下拉按钮、点击进度条或者通过滑屏操作等方式发出屏幕显示范围移动指令时，屏幕上原来显示的网页内容向上移动，使得将新增进入屏幕显示的那部分网页内容范围。即，提前加载通过一次屏幕显示范围移动指令将新增进入屏幕显示的网页内容中的图片。

同样地，预定距离也可以设置为对应于基于多次屏幕显示范围移动指令将在屏幕上新增加的网页内容范围。

在例如使用智能手机等访问网页时往往需要对网页内容进行排版，当前屏幕显示范围和预定距离范围可以基于排版结果来确定。而图片的位置则可以在解析过程中得知的。

图2示出了在根据本发明的网页图片加载方法中可以采用的对网页源文件进行解析和排版的流程图。

解析和排版的操作可以在图1中确定图片加载范围内的待加载图片的步骤S200之前执行。更具体地，这些操作可以是在加载网页源文件之后或在加载网页源文件的过程中执行的。

在步骤S110，解析所获取网页源文件以生成DOM树。这一步骤可以按与现有技术中相同的方式来执行。

在步骤S120，判断DOM树中是否有图片标签。

如果在步骤S120中判定没有图片标签，则在步骤S150继续进行常规的加载显示流程。

如果在步骤S120中判定有图片标签，则在步骤S130中，在记录表中记录与该图片标签对应的DOM节点。并且在步骤S140中，在对网页排版的过程中，根据该图片标签的层叠样式表(CSS)属性对该图片进行排版。

在上面的描述和图2中，步骤S130在前，步骤S140在后。然而，本领域技术人员应该明白，这两个步骤的顺序完全可以颠倒过来，即步骤S130在前，而步骤S140在后。或者，这两个步骤也可以同时执行。

在图2所示的操作结束之后，已下载了网页中的文字内容(或者至少部分文字内容)，记录了有图片的DOM节点，并且根据图片标签的CSS属性进行了图片排版。之后，可以渲染显示已经下载的网页的文字内容和已经下载的当前屏幕显示范围内的图片(如果已经下载了部分图片的话)了。

另一方面，也做好了对待加载图片的加载准备工作。换句话说，为步骤200中确定图片加载范围内的待加载图片提供了依据。

下面参考图3来详细描述本发明可以用来确定图片加载范围内的待加载图片的一种方式的示例性流程。

首先，在步骤S210，查询记录表中DOM节点的排版结果。

在步骤S220，根据排版结果，判断与该DOM节点对应的图片标签所对应的图片(也可以称为“该DOM节点对应的图片”)的位置是否在图片加载范围内。

如果在步骤S220中判定位置不在图片加载范围内，则在步骤S230中选择记录表中下一个DOM节点，然后返回步骤S210重新查询排版结果。

如果在步骤S220中判定位置在图片加载范围内，则在步骤S240确定该DOM节点对应的图片是图片加载范围内的待加载图片。

另外，可以在步骤S250，在记录表中删除对该DOM节点的记录，以避免重复加载。

图3中示出在步骤S240之后执行步骤S250。然而，本领域技术人员应该明白，步骤S250与步骤S240之间可以没有先后关系。步骤S250可以在步骤S240之后、之前或同时执行。

然后，在步骤S260中，查看记录表中是否还有尚未经步骤S220判断过的DOM节点。

如果有，则进入步骤S230，选择记录表中下一个DOM节点，，然后返回步骤S220重新进行判断。由此，对记录表中每一个DOM节点进行上述判断和相应处理。

如果没有，即已经对记录表中所有DOM节点进行判断，则本次图片加载过程结束。

图3的流程可以在图2所示步骤S140的首次排版完成后，即刚开始访问网页时执行，以便基于在屏幕上初始显示的网页内容范围选择性地加载图片。

另外，图3的流程也可以响应于用户的屏幕显示范围移动指令(例如翻页或下拉指令)而执行，以便随时更新以加载可能需要的图片。

图3的流程图给出了一种确定图片加载范围内的待加载图片的方式。然而本领域技术人员应当明白，完全有可能有其它方式来实现这一目的。

例如，可以在解析排版完成之后，或者在用户发出屏幕显示范围移动指令之后，遍历DOM树上的所有节点以判断是否有图片标签，是否在图片加载范围之内，即不需要如步骤S130所述在记录表中记录有图片标签的DOM节点。

另外，也可以基于图片加载范围，对图片加载范围内的DOM节点判断是否有图片标签，而不是如步骤S210和S220那样基于记录表中的DOM节点进行判断。

通过使用本发明的网页图片加载方法，在初始加载网页时没有加载全部图片以节省流量的情况下，在浏览过程中适应性地自动加载了部分图片，以备用户浏览，实现了在流畅地浏览含有图片的网页与节省流量之间的良好平衡。

下面简要描述以下根据本发明的网页图片加载装置。

图4是根据本发明一个实施例的网页图片加载装置的示意性方框图。

如图4所示，根据本发明的网页图片加载装置包括图片确定装置440和图片加载装置450。

图片确定装置440响应于网页首次排版完成或响应于屏幕显示范围移动指令，确定图片加载范围内的待加载图片。图片加载范围包括当前屏幕显示范围或当前屏幕显示范围以外预定距离内的预定距离范围。

图片加载装置450则加载图片加载范围内的待加载图片。

图片确定装置440的操作可以与上文中参考图1对步骤S200的描述相同，在此不再赘述。

同样地，图片加载装置450的操作可以与上文中参考图1对步骤S300的描述相同，在此也不再赘述。

图5是根据本发明另一个实施例的网页图片加载装置的示意性方框图。

如图5所述，根据本发明另一个实施例的网页图片加载装置除了包括图4所示的图片确定装置440和图片加载装置450之外，还可以包括解析装置410、记录装置420和排版装置430。

解析装置410解析所获取的网页源文件以生成网页的DOM树。

记录装置420当在解析过程中发现有图片标签时，在记录表中记录与图片标签对应的DOM节点。

排版装置430根据图片标签的CSS属性进行图片排版。

解析装置410、记录装置420和排版装置430的操作可以分别对应于上文中参考图2描述的步骤S110、S130和S140，在此不再赘述。

图片确定装置440响应于网页首次排版完成或响应于屏幕显示范围移动指令，参考记录表和排版结果，确定图片加载范围内的待加载图片。

图片加载装置450加载图片加载范围内的待加载图片。

图6是图片确定装置440的示意性方框图。

如图6所示，图片确定装置440可以包括查询装置442、判断装置444、确定装置446和删除装置448。

查询装置442查询记录表中记录的每个DOM节点的排版结果。

判断装置444根据排版结果，判断与DOM节点对应的图片标签所对应的图片的位置是否在图片加载范围内；

确定装置446在判断装置判定位置在图片加载范围内的情况下，确定图片为图片加载范围内的待加载图片。

删除装置448在记录表中删除对图片加载范围内的待加载图片所对应的DOM节点的记录。

查询装置442、判断装置444、确定装置446和删除装置448的操作可以分别对应于上文中参考图3描述的步骤S210、S220、S240和S250，在此不再赘述。

通过使用本发明的网页图片加载装置，在初始加载网页时没有加载全部图片以节省了流量的情况下，在浏览过程中适应性地自动加载了部分图片，以备用户浏览，实现了在流畅地浏览含有图片的网页与节省流量之间的良好平衡。

至此，已详细描述了根据本发明网页图片加载方法和装置的具体实施例。然而本领域技术人员应该明白，本发明不限于这里描述的各种细节，而是可以做出适当的修改。本发明的保护范围由所附权利要求书限定。

Claims (10)

1.一种网页图片加载方法，包括：

响应于网页首次排版完成或响应于屏幕显示范围移动指令，确定图片加载范围内的待加载图片，所述图片加载范围包括当前屏幕显示范围或当前屏幕显示范围以外预定距离内的预定距离范围；以及

加载所述图片加载范围内的待加载图片。

2.根据权利要求1所述的网页图片加载方法，还包括：

解析所获取的网页源文件以生成网页的DOM树；

当在解析过程中发现有图片标签时，在记录表中记录与所述图片标签对应的DOM节点；以及

根据所述图片标签的CSS属性进行图片排版。

3.根据权利要求2所述的网页图片加载方法，其中，所述确定图片加载范围内的待加载图片的步骤包括：

查询所述记录表中记录的每个DOM节点的排版结果；

根据所述排版结果，判断与所述DOM节点对应的图片标签所对应的图片的位置是否在所述图片加载范围内；

如果在所述图片加载范围内，则确定所述图片为所述图片加载范围内的待加载图片。

4.根据权利要求3所述的网页图片加载方法，所述确定图片加载范围内的待加载图片的步骤还包括：

在所述记录表中删除对所述图片加载范围内的待加载图片所对应的DOM节点的记录。

5.根据权利要求1至4中任何一项所述的网页图片加载方法，其中，所述预定距离是基于一次屏幕显示范围移动指令将使屏幕显示范围移动的距离。

6.一种网页图片加载装置，包括：

图片确定装置，用于响应于网页首次排版完成或响应于屏幕显示范围移动指令，确定图片加载范围内的待加载图片，所述图片加载范围包括当前屏幕显示范围或当前屏幕显示范围以外预定距离内的预定距离范围；以及

图片加载装置，用于加载所述图片加载范围内的待加载图片。

7.根据权利要求6所述的网页图片加载装置，还包括：

解析装置，用于解析所获取的网页源文件以生成网页的DOM树；

记录装置，用于当在解析过程中发现有图片标签时，在记录表中记录与所述图片标签对应的DOM节点；以及

排版装置，用于根据所述图片标签的CSS属性进行图片排版。

8.根据权利要求7所述的网页图片加载装置，其中，所述图片确定装置包括：

查询装置，用于查询所述记录表中记录的每个DOM节点的排版结果；

判断装置，用于根据所述排版结果，判断与所述DOM节点对应的图片标签所对应的图片的位置是否在所述图片加载范围内；

确定装置，用于在所述判断装置判定所述位置在所述图片加载范围内的情况下，确定所述图片为所述图片加载范围内的待加载图片。

9.根据权利要求8所述的网页图片加载装置，所述图片确定装置还包括：

删除装置，用于在所述记录表中删除对所述图片加载范围内的待加载图片所对应的DOM节点的记录。

10.根据权利要求6至9中任何一项所述的网页图片加载装置，其中，所述预定距离是基于一次屏幕显示范围移动指令将使屏幕显示范围移动的距离。