CN111125581B - 图片加载方法以及装置 - Google Patents

Abstract

本公开是关于一种图片加载方法、装置、电子设备以及存储介质。其中，该方法包括：获取与用户访问页面信息对应的预先配置的所有图片展示容器；对所述用户访问页面进行结构树解析并生成待加载网页；将所有图片展示容器与对应的图片配置参数存储为图片展示容器数组；按照预设读取规则读取图片展示容器数组中的图片展示容器，并判断读取的图片展示容器是否处于所述待加载网页的结构树展示范围；若是，将读取的图片展示容器放入加载队列中加载展示。本公开通过建立基于图片展示容器的图片加载机制，实现了网页中图片的有序按需加载，提高了网页加载速度。

Description

图片加载方法以及装置

技术领域

本公开涉及互联网领域，具体而言，涉及一种图片加载方法、装置、电子设备以及计算机可读存储介质。

背景技术

当用户在网站上检索信息并进入对应展示网页时，通常会涉及较多图片的展示，特别是访问一些包含较大信息量的网页时，由于涉及多达几十个维度信息的展示，每个维度涉及条目少则几条，多则上万条，由此可能会有上千张图片需要展示。

目前在用户浏览网页时，通常默认展示网页所有维度的图片，用户每访问一次，就可初览所有条目，然而，目前将网页图片同时加载展示的方式，相应会产生大量的图片加载请求，进而加重网络资源负载，降低网页浏览加载速度，导致用户打开页面等待时间加长。

因此，需要一种或多种方法解决上述问题。

需要说明的是，在上述背景技术部分公开的信息仅用于加强对本公开的背景的理解，因此可以包括不构成对本领域普通技术人员已知的现有技术的信息。

发明内容

本公开的目的在于提供一种图片加载方法、装置、电子设备以及计算机可读存储介质，进而至少在一定程度上克服由于相关技术的限制和缺陷而导致的一个或者多个问题。

根据本公开的一个方面，提供一种图片加载方法，包括：

获取与用户访问页面信息对应的预先配置的所有图片展示容器；

对所述用户访问页面进行结构树解析并生成待加载网页；

将所有图片展示容器与对应的图片配置参数存储为图片展示容器数组；

按照预设读取规则读取图片展示容器数组中的图片展示容器，并判断读取的图片展示容器是否处于所述待加载网页的结构树展示范围；

若是，将读取的图片展示容器放入加载队列中加载展示。

在本公开的一种示例性实施例中，所述方法还包括：

采集所有待展示图片，为所述所有待展示图片的设置对应的图片参数；

根据所有待展示图片的图片参数配置对应的图片展示容器。

在本公开的一种示例性实施例中，根据所有待展示图片的图片参数配置对应的图片展示容器包括：

当图片参数包含图片类参数时，将图片展示容器配置为用来展示图片元素的图片容器；

当图片参数包含图片类参数以及文字内容时，将图片展示容器配置为由外层展示容器包含两个内部展示子容器，其中，两个内部展示子容器一个为用来展示图片元素的图片子容器，另一个为放置文字的文字子容器；

当图片参数包含图片类参数以及图片加载状态时，将图片展示容器配置为由一个外层展示容器包含两个内部展示子容器，其中，两个内部展示子容器一个为用来展示图片元素的图片子容器，另一个为非图片内容的加载状态子容器。

在本公开的一种示例性实施例中，根据所有图片的图片参数配置对应的图片展示容器，还包括：

将图片容器及图片子容器设置为默认不显示状态，将所述文字子容器设置为默认显示状态，将非图片内容的加载状态子容器设置为默认显示状态。

在本公开的一种示例性实施例中，对所述用户访问页面进行结构树解析并生成待加载网页，包括：

获取用户访问页面对应的图片展示容器的展示参数信息，并将所述展示参数信息转换为展示结构式字符串；

将所述结构式字符串与其他关联页面的结构式字符串拼接并解析；

根据解析后的结构树生成待加载网页并展示；

根据解析后的结构树生成待加载网页之后，所述方法还包括：

加载待加载网页中的非图片元素。

在本公开的一种示例性实施例中，按照预设读取规则读取数组集中的图片展示容器，判断读取的图片展示容器是否处于所述待加载网页的结构树展示范围，包括：

获取用户访问页面的显示区域参数，根据所述显示区域参数确定待加载网页的结构树展示范围；

依次读取所述数组集中的未加载状态的图片展示容器，根据未加载状态的图片展示容器的规格参数判断未加载状态的图片展示容器是否处于所述待加载网页的结构树展示范围。

在本公开的一种示例性实施例中，所述图片配置参数包括图片地址参数和/或图片加载异常地址参数，将读取的图片展示容器放入加载队列中加载展示，包括：

将图片展示容器的图片地址设置为所述图片地址参数，监听图片展示容器的加载函数，当加载函数正常执行时，展示所述图片展示容器对应的图片，并更新图片展示容器的图片显示状态；

当加载函数执行失败时，判断图片展示容器是否设定图片加载异常地址参数，如果有，则将图片展示容器地址设置为图片加载失败地址参数，展示所述图片展示容器对应的图片，并更新图片展示容器的图片显示状态。

在本公开的一种示例性实施例中，将图片展示容器的图片地址设置为所述图片地址参数之前，所述方法还包括：

创建一个新的图片展示容器，并将所述新的图片展示容器的图片地址设置为待执行加载的图片展示容器；

监听所述新的图片展示容器的加载函数，当加载完成后，将所述新的图片展示容器的图片地址设置为下一个待执行加载的图片展示容器。

在本公开的一种示例性实施例中，展示所述图片展示容器对应的图片之后，所述方法还包括：

若图片展示容器中包含文字子容器，隐藏所述文字子容器；

若图片展示容器中包含加载状态子容器，将图片展示容器地址设置在图片地址前，隐藏加载状态子容器。

在本公开的一种示例性实施例中，将读取的图片展示容器放入加载队列中加载展示，包括：

监听用户交互动作，若根据用户触发的交互动作确定用户访问页面结构树发生改变，更新所述图片展示容器数组中的图片展示容器。

在本公开的一个方面，还提供一种图片加载装置，包括：

信息获取模块，用于获取与用户访问页面信息对应的预先配置的所有图片展示容器；

页面解析模块，用于对所述用户访问页面进行结构树解析并生成待加载网页；

数组设置模块，用于将所有图片展示容器与对应的图片配置参数存储为图片展示容器数组；

范围判断模块，用于按照预设读取规则读取图片展示容器数组中的图片展示容器，判断读取的图片展示容器是否处于所述待加载网页的结构树展示范围；

信息加载模块，用于在读取的图片展示容器处于所述待加载网页的结构树展示范围时，将读取的图片展示容器放入加载队列中加载展示。

在本公开的一个方面，提供一种电子设备，包括：

处理器；以及

存储器，所述存储器上存储有计算机可读指令，所述计算机可读指令被所述处理器执行时实现根据上述任意一项所述的方法。

在本公开的一个方面，提供一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现根据上述任意一项所述的方法。

本公开的示例性实施例中的图片加载方法，通过获取与用户访问页面信息对应的预先配置的所有图片展示容器；对所述用户访问页面进行结构树解析并生成待加载网页；将所有图片展示容器与对应的图片配置参数存储为图片展示容器数组；按照预设读取规则读取图片展示容器数组中的图片展示容器，并判断读取的图片展示容器处于所述待加载网页的结构树展示范围时，将读取的图片展示容器放入加载队列中加载展示。本公开通过建立基于图片展示容器的图片加载机制，实现了网页中图片的有序按需加载，大幅提高了网页加载速度，提升用户体验。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。

附图说明

通过参照附图来详细描述其示例实施例，本公开的上述和其它特征及优点将变得更加明显。

图1示出了根据本公开一示例性实施例的图片加载方法的流程图；

图2示出了根据本公开一示例性实施例的图片加载装置的示意框图；

图3示意性示出了根据本公开一示例性实施例的电子设备的框图；以及

图4示意性示出了根据本公开一示例性实施例的计算机可读存储介质的示意图。

具体实施方式

现在将参考附图更全面地描述示例实施例。然而，示例实施例能够以多种形式实施，且不应被理解为限于在此阐述的实施例；相反，提供这些实施例使得本公开将全面和完整，并将示例实施例的构思全面地传达给本领域的技术人员。在图中相同的附图标记表示相同或类似的部分，因而将省略对它们的重复描述。

此外，所描述的特征、结构或特性可以以任何合适的方式结合在一个或更多实施例中。在下面的描述中，提供许多具体细节从而给出对本公开的实施例的充分理解。然而，本领域技术人员将意识到，可以实践本公开的技术方案而没有所述特定细节中的一个或更多，或者可以采用其它的方法、组元、材料、装置、步骤等。在其它情况下，不详细示出或描述公知结构、方法、装置、实现、材料或者操作以避免模糊本公开的各方面。

附图中所示的方框图仅仅是功能实体，不一定必须与物理上独立的实体相对应。即，可以采用软件形式来实现这些功能实体，或在一个或多个软件硬化的模块中实现这些功能实体或功能实体的一部分，或在不同网络和/或处理器装置和/或微控制器装置中实现这些功能实体。

在本示例实施例中，首先提供了一种图片加载方法；参考图1中所示，该图片加载方法可以包括以下步骤：

步骤S110，获取与用户访问页面信息对应的预先配置的所有图片展示容器；

步骤S120，对所述用户访问页面进行结构树解析并生成待加载网页；

步骤S130，将所有图片展示容器与对应的图片配置参数存储为图片展示容器数组；

步骤S140，按照预设读取规则读取图片展示容器数组中的图片展示容器，判断读取的图片展示容器是否处于所述待加载网页的结构树展示范围；

步骤S150，在读取的图片展示容器处于所述待加载网页的结构树展示范围时，将读取的图片展示容器放入加载队列中加载展示。

本公开的示例性实施例中的图片加载方法，获取与用户访问页面信息对应的预先配置的所有图片展示容器；对所述用户访问页面进行结构树解析并生成待加载网页；将所有图片展示容器与对应的图片配置参数存储为图片展示容器数组；按照预设读取规则读取图片展示容器数组中的图片展示容器，并判断读取的图片展示容器是否处于所述待加载网页的结构树展示范围；若是，将读取的图片展示容器放入加载队列中加载展示。本公开通过建立基于图片展示容器的图片加载机制，实现网页中图片的有序按需加载，大幅提高了网页加载速度，进而提升用户体验。

下面，将对本示例实施例中的图片加载方法进行进一步的说明。

在步骤S110中，可以获取与用户访问页面信息对应的预先配置的所有图片展示容器。

在本示例的实施例中，可以预先对网页图片配置图片展示容器，具体包括：

采集所有待展示图片，为所述所有待展示图片的设置对应的图片参数；根据所有待展示图片的图片参数配置对应的图片展示容器。

在本示例的实施例中，可以预先收集所有图片，设置对应的图片参数，该图片参数可以包括图片地址、图片加载失败后图片显示的图片地址、图片加载失败后显示的文字内容、图片的大小、图片是否放大、图片是否有等待加载状态等拓展参数，进而根据不同的参数属性，为所有待展示图片的图片参数配置对应的图片展示容器，之后为每个参数分配一个存储空间，并存储至对应的存储空间中。

进一步地，还可以预设图片的默认参数，当图片参数传递过少时，将所述图片的属性设定为默认参数。

在本示例的实施例中，根据所有待展示图片的图片参数配置对应的图片展示容器包括：

当图片参数包含图片类参数时，将图片展示容器配置为用来展示图片元素的图片容器；

当图片参数包含图片类参数以及文字内容时，将图片展示容器配置为由外层展示容器包含两个内部展示子容器，其中，两个内部展示子容器一个为用来展示图片元素的图片子容器，另一个为放置文字的文字子容器；

当图片参数包含图片类参数以及图片加载状态时，将图片展示容器配置为由一个外层展示容器包含两个内部展示子容器，其中，两个内部展示子容器一个为用来展示图片元素的图片子容器，另一个为非图片内容的加载状态子容器。

在本示例的实施例中，根据图片配置参数，配置图片展示容器包括：

当图片参数包含图片类参数时，将图片展示容器配置为用来展示图片元素的图片容器；其中，可以是配至为HTML中用来展示图片元素的图片容器；

当图片参数包含图片类参数以及文字内容时，将图片展示容器配置为由外层展示容器包含两个内部展示子容器，两个内部展示子容器一个为用来展示图片元素的图片子容器，其中，可以是配至为HTML中用来展示图片元素的图片子容器；另一个为放置文字的文字子容器；

当图片参数包含图片类参数以及图片加载状态时，将图片展示容器配置为由一个外层展示容器包含两个内部展示子容器，两个内部展示子容器一个为用来展示图片元素的图片子容器，其中，可以是配至为HTML中用来展示图片元素的图片子容器；另一个为非图片内容的加载状态子容器。当图片元素过多时，如含图片、文字或加载状态中的多个时，本公开通过设置对应的多个子容器(图片子容器、文字子容器、加载状态子容器中的多个)，并封装为一个图片展示容器的方式来提高后续的匹配效率。

在本示例的实施例中，还可以将图片容器及图片子容器设置为默认不显示状态，将所述文字子容器设置为默认显示状态，将非图片内容的加载状态子容器设置为默认显示状态。具体地，如果图片展示容器包含文字容器，则将图片子容器先隐藏，不直接显示，默认展示文字容器；如果图片展示容器仅仅包含图片容器，可以将图片容器的透明度置为100％，默认不显示图片；如果图片展示容器包含图片加载状态时，将图片子容器与文字子容器全部隐藏，只展示图片加载状态展示容器。另外，当图片尺寸为固定尺寸时，将图片加载容器的尺寸与图片尺寸一致，并居中显示。

在本示例的实施例中所述的图片展示容器，为用来展示图片的图片展示容器，为方便后期监听和将所述图片容易纳入展示队列，可以先将图片容器的图片请求地址设置为空。

在本示例的实施例中，常有大量的图片的属性信息不全的情况，这时就需要预设图片属性的默认值，并将所述属性信息不全的图片按照所述默认属性进行属性信息补全，同时，根据配置好的图片容器，将容器与配置参数绑定，另外还方便统一管理图片展示容器样式，且可根据目前网页状态，实时订制未加载图片前状态，参数改变即可全局修改，大幅提升开发效率。

在步骤S120中，可以对所述用户访问页面进行结构树解析并生成待加载网页。

具体地，对所述用户访问页面进行结构树解析并生成待加载网页，包括：获取用户访问页面对应的图片展示容器的展示参数信息，并将所述展示参数信息转换为展示结构式字符串；将所述结构式字符串与其他关联页面的结构式字符串拼接并解析；根据解析后的结构树生成待加载网页并展示。

在本示例的实施例中，根据用户访问的页面，可以将图片展示容器的全部图片展示容器预处理，将需要展示的图片展示容器的样式与内容，转为html结构式字符串，与其余页面的需要展示的html结构式字符串拼接，并将整个html结构返回，网页解析器解析html结构式字符串，生成待加载的网页，将整个内容解析后展示在用户访问的界面中。

根据解析后的结构树生成待加载网页之后，还包括加载待加载网页中的非图片元素。在本示例的实施例中，当所述待加载的网页需要加载的时候，首先通过网页解析器解析html结构式字符串的待加载网页，然后先只加载所述待加载网页中的非图片元素，包含图片元素的图片展示容器不随网页一起展示。

在步骤S130中，可以将所有图片展示容器与对应的图片配置参数存储为图片展示容器数组。

在本示例的实施例中，在通过网页解析器解析html结构式字符串的待加载网页后，可以将所有的图片展示容器解析出来，同时可以读取到所述图片展示容器的图片配置参数，将所述图片展示容器和其对应的图片配置参数对应并存储为图片展示容器数组，以供下述步骤调用。

在本示例的实施例中，网页默认除图片外元素正常加载，当监听到网页dom结构树解析完成时，即对用户访问页面进行结构树解析后，获取到所有图片展示容器，将所有的图片展示容器的位置结构与配置参数存储为一个存储空间，并依次将图片展示容器存储为一个大的数组；并将每个图片展示容器初始化为未加载状态。

在步骤S140中，可以按照预设读取规则读取图片展示容器数组中的图片展示容器，判断读取的图片展示容器是否处于所述待加载网页的结构树展示范围。

在本示例的实施例中，一般包含较大信息量的待展示网页，都会有较大的展示页面，或者有多级层次结构，并不是在首次点击加载的时候就需要展示全部图片以供用户使用，所以可以根据用户的使用界面及用户操作动作等来实时判断需要展示的图片，并逐步展示，而无论是用户的使用界面还是通过用户的操作动作进一步需要展示的图片，都可以通过所述待加载网页的结构树来确定地址范围，也就可以容易的定位到所述地址范围内的待展示的图片展示容器。

在本示例的实施例中，按照预设读取规则读取数组集中的图片展示容器，判断读取的图片展示容器是否处于所述待加载网页的结构树展示范围，包括：获取用户访问页面的显示区域参数，根据所述显示区域参数确定待加载网页的结构树展示范围；依次读取所述数组集中的未加载状态的图片展示容器，根据未加载状态的图片展示容器的规格参数判断未加载状态的图片展示容器是否处于所述待加载网页的结构树展示范围。

在本示例的实施例中，获取当时用户访问页面时，页面可见区域大小，确认用户可见区域的宽高，以及可见区域距离页面底部的高度，划入一个矩形范围。

依次取出图片加载装置数组中处于未加载状态的图片展示容器，获取当前图片展示容器的宽高与距离页面底部的高度，判断是否处于矩形范围，将处于矩形范围的图片展示容器放入加载队列。

在本示例的实施例中，需要创建一个空的加载队列，将所述通过结构树判断需要展示的图片展示容器依次添加到所述加载队列中，并将所述图片展示容器标记为已加载状态。

在步骤S150中，可以在读取的图片展示容器处于所述待加载网页的结构树展示范围时，将读取的图片展示容器放入加载队列中加载展示。

在本示例的实施例中，将需要展示的图片展示容器加载的所述待加载网页的结构树中后，依次将所述图片展示容器展示。图片配置参数包括图片地址参数和/或图片加载异常地址参数，将读取的图片展示容器放入加载队列中加载展示，包括：

将图片展示容器的图片地址设置为所述图片地址参数，监听图片展示容器的加载函数，当加载函数正常执行时，展示所述图片展示容器对应的图片，并更新图片展示容器的图片显示状态；当加载函数执行失败时，判断图片展示容器是否设定图片加载异常地址参数，如果有，则将图片展示容器地址设置为图片加载失败地址参数，展示所述图片展示容器对应的图片，并更新图片展示容器的图片显示状态。

在本示例的实施例中，当监听到图片容器的加载函数执行时，将图片展示容器中的图片容器地址置为图片展示容器中的图片地址参数，并将图片元素透明度置为0，图片元素显示。当监听到图片容器的加载失败函数执行时，判断图片展示容器是否设定图片加载异常地址参数，如果有，则将图片展示容器地址置为图片加载失败地址参数，并将图片元素透明度置为0，图片元素显示。本公开可避免网页与图片同时加载，通过图片加载滞后于网页加载，图片区域后的页面优先渲染的方式，避免由于图片请求阻塞后续页面渲染，进而减少用户等待时间，提高处理效率。

在本示例的实施例中，将图片展示容器的图片地址设置为所述图片地址参数之前，所述方法还包括：创建一个新的数列中加载展示，具体地，监听用户交互动作，若根据用户触发的交互动作确定用户访问页面结构树发生改变，更新所述图片展示容器数组中的图片展示容器。

在本示例的实施例中，设置一个监听队列，随着用户每一次的交互操作，监听网页页面结构的改变，时时更新总的图片展示容器数组，如果有图片展示容器的新增时，在队列里新添图片展示容器时，在图片展示容器数组中新增存储对象存储图片展示容器，并初始化新增图片展示容器。

在本示例的实施例中，监听用户页面视口状态，时时同步用户可见区域内图片展示容器，加载图片展示容器。当随着用户操作，用户会执行一些改变视口的操作，比如滚动页面，缩放页面，拖动页面，都会改变页面的视口状态。当监听到用户展示页面视口改变时，执行获取用户访问页面的显示区域参数，根据所述显示区域参数确定待加载网页的结构树展示范围步骤展示图片展示容器。进而可以时时监听用户可见视口，只针对用户可见视口内图片区域加载，减少用户网络请求，避免用户仅打开一个页面就花费数千张图片资源带宽，有效节约资源。

进一步地，图片展示容器还支持容器拓展，可统一为所有图片展示容器添加拓展功能，例如图片加载拓展，当图片内容较大时，展示图片加载状态，提醒用户该区域为图片，方便用户了解网页基础布局，并快速找到所需内容，且文字与图片区域固定，图片加载前后网页结构不变，避免由于图片加载使网页高度边长等问题，进而方便用户快速找到所需内容。

需要说明的是，尽管在附图中以特定顺序描述了本公开中方法的各个步骤，但是，这并非要求或者暗示必须按照该特定顺序来执行这些步骤，或是必须执行全部所示的步骤才能实现期望的结果。附加的或备选的，可以省略某些步骤，将多个步骤合并为一个步骤执行，以及/或者将一个步骤分解为多个步骤执行等。

此外，在本示例实施例中，还提供了一种图片加载装置。参照图2所示，该图片加载装置200可以包括：信息获取模块210、页面解析模块220、数组设置模块230、范围判断模块240以及信息加载模块250。其中：

信息获取模块210，用于获取与用户访问页面信息对应的预先配置的所有图片展示容器；

页面解析模块220，用于对所述用户访问页面进行结构树解析并生成待加载网页；

数组设置模块230，用于将所有图片展示容器与对应的图片配置参数存储为图片展示容器数组；

范围判断模块240，用于按照预设读取规则读取图片展示容器数组中的图片展示容器，判断读取的图片展示容器是否处于所述待加载网页的结构树展示范围；

信息加载模块250，用于在读取的图片展示容器处于所述待加载网页的结构树展示范围时，将读取的图片展示容器放入加载队列中加载展示。

上述中各图片加载装置模块的具体细节已经在对应的图片加载方法中进行了详细的描述，因此此处不再赘述。

应当注意，尽管在上文详细描述中提及了图片加载装置200的若干模块或者单元，但是这种划分并非强制性的。实际上，根据本公开的实施方式，上文描述的两个或更多模块或者单元的特征和功能可以在一个模块或者单元中具体化。反之，上文描述的一个模块或者单元的特征和功能可以进一步划分为由多个模块或者单元来具体化。

此外，在本公开的示例性实施例中，还提供了一种能够实现上述方法的电子设备。

所属技术领域的技术人员能够理解，本发明的各个方面可以实现为***、方法或程序产品。因此，本发明的各个方面可以具体实现为以下形式，即：完全的硬件实施例、完全的软件实施例(包括固件、微代码等)，或硬件和软件方面结合的实施例，这里可以统称为“电路”、“模块”或“***”。

下面参照图3来描述根据本发明的这种实施例的电子设备300。图3显示的电子设备300仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图3所示，电子设备300以通用计算设备的形式表现。电子设备300的组件可以包括但不限于：上述至少一个处理单元310、上述至少一个存储单元320、连接不同***组件(包括存储单元320和处理单元310)的总线330、显示单元340。

其中，所述存储单元存储有程序代码，所述程序代码可以被所述处理单元310执行，使得所述处理单元310执行本说明书上述“示例性方法”部分中描述的根据本发明各种示例性实施例的步骤。例如，所述处理单元310可以执行如图1中所示的步骤S110至步骤S150。

存储单元320可以包括易失性存储单元形式的可读介质，例如随机存取存储单元(RAM)3201和/或高速缓存存储单元3202，还可以进一步包括只读存储单元(ROM)3203。

存储单元320还可以包括具有一组(至少一个)程序模块3205的程序/实用工具3204，这样的程序模块3205包括但不限于：操作***、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。

总线330可以为表示几类总线结构中的一种或多种，包括存储单元总线或者存储单元控制器、***总线、图形加速端口、处理单元或者使用多种总线结构中的任意总线结构的局域总线。

电子设备300也可以与一个或多个外部设备370(例如键盘、指向设备、蓝牙设备等)通信，还可与一个或者多个使得用户能与该电子设备300交互的设备通信，和/或与使得该电子设备300能与一个或多个其它计算设备进行通信的任何设备(例如路由器、调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口350进行。并且，电子设备300还可以通过网络适配器360与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。如图所示，网络适配器360通过总线330与电子设备300的其它模块通信。应当明白，尽管图中未示出，可以结合电子设备300使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID***、磁带驱动器以及数据备份存储***等。

通过以上的实施例的描述，本领域的技术人员易于理解，这里描述的示例实施例可以通过软件实现，也可以通过软件结合必要的硬件的方式来实现。因此，根据本公开实施例的技术方案可以以软件产品的形式体现出来，该软件产品可以存储在一个非易失性存储介质(可以是CD-ROM，U盘，移动硬盘等)中或网络上，包括若干指令以使得一台计算设备(可以是个人计算机、服务器、终端装置、或者网络设备等)执行根据本公开实施例的方法。

在本公开的示例性实施例中，还提供了一种计算机可读存储介质，其上存储有能够实现本说明书上述方法的程序产品。在一些可能的实施例中，本发明的各个方面还可以实现为一种程序产品的形式，其包括程序代码，当所述程序产品在终端设备上运行时，所述程序代码用于使所述终端设备执行本说明书上述“示例性方法”部分中描述的根据本发明各种示例性实施例的步骤。

参考图4所示，描述了根据本发明的实施例的用于实现上述方法的程序产品400，其可以采用便携式紧凑盘只读存储器(CD-ROM)并包括程序代码，并可以在终端设备，例如个人电脑上运行。然而，本发明的程序产品不限于此，在本文件中，可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行***、装置或者器件使用或者与其结合使用。

所述程序产品可以采用一个或多个可读介质的任意组合。可读介质可以是可读信号介质或者可读存储介质。可读存储介质例如可以为但不限于电、磁、光、电磁、红外线、或半导体的***、装置或器件，或者任意以上的组合。可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。

计算机可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了可读程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。可读信号介质还可以是可读存储介质以外的任何可读介质，该可读介质可以发送、传播或者传输用于由指令执行***、装置或者器件使用或者与其结合使用的程序。

可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于无线、有线、光缆、RF等等，或者上述的任意合适的组合。

可以以一种或多种程序设计语言的任意组合来编写用于执行本发明操作的程序代码，所述程序设计语言包括面向对象的程序设计语言—诸如Java、C++等，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算设备上执行、部分地在用户设备上执行、作为一个独立的软件包执行、部分在用户计算设备上部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。在涉及远程计算设备的情形中，远程计算设备可以通过任意种类的网络，包括局域网(LAN)或广域网(WAN)，连接到用户计算设备，或者，可以连接到外部计算设备(例如利用因特网服务提供商来通过因特网连接)。

此外，上述附图仅是根据本发明示例性实施例的方法所包括的处理的示意性说明，而不是限制目的。易于理解，上述附图所示的处理并不表明或限制这些处理的时间顺序。另外，也易于理解，这些处理可以是例如在多个模块中同步或异步执行的。

本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开的其他实施例。本申请旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由权利要求指出。

应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限。

Claims (13)

1.一种图片加载方法，其特征在于，所述方法包括：

获取与用户访问页面信息对应的预先配置的所有图片展示容器；其中，预先配置的所有图片展示容器根据所有待展示图片的图片参数配置；当图片参数包含图片类参数以及图片加载状态时，将图片展示容器配置为由一个外层展示容器包含两个内部展示子容器，其中，两个内部展示子容器一个为用来展示图片元素的图片子容器，另一个为非图片内容的加载状态子容器；

对所述用户访问页面进行结构树解析并生成待加载网页；

将所有图片展示容器与对应的图片配置参数存储为图片展示容器数组；

按照预设读取规则读取图片展示容器数组中的图片展示容器，并判断读取的图片展示容器是否处于所述待加载网页的结构树展示范围；获取用户访问页面的显示区域参数，根据所述显示区域参数确定待加载网页的结构树展示范围；依次读取所述数组中的未加载状态的图片展示容器，根据未加载状态的图片展示容器的规格参数判断未加载状态的图片展示容器是否处于所述待加载网页的结构树展示范围；

若是，将读取的图片展示容器放入加载队列中加载展示。

2.根据权利要求1所述的方法，其特征在于，所述方法还包括：

采集所有待展示图片，为所述所有待展示图片设置对应的图片参数；

根据所有待展示图片的图片参数配置对应的图片展示容器。

3.根据权利要求2所述的方法，其特征在于，根据所有待展示图片的图片参数配置对应的图片展示容器包括：

当图片参数包含图片类参数时，将图片展示容器配置为用来展示图片元素的图片容器；

当图片参数包含图片类参数以及文字内容时，将图片展示容器配置为由外层展示容器包含两个内部展示子容器，其中，两个内部展示子容器一个为用来展示图片元素的图片子容器，另一个为放置文字的文字子容器。

4.根据权利要求3所述的方法，其特征在于，根据所有图片的图片参数配置对应的图片展示容器，还包括：

将图片容器及图片子容器设置为默认不显示状态，将所述文字子容器设置为默认显示状态，将非图片内容的加载状态子容器设置为默认显示状态。

5.根据权利要求1所述的方法，其特征在于，对所述用户访问页面进行结构树解析并生成待加载网页，包括：

获取用户访问页面对应的图片展示容器的展示参数信息，并将所述展示参数信息转换为展示结构式字符串；

将所述结构式字符串与其他关联页面的结构式字符串拼接并解析；

根据解析后的结构树生成待加载网页并展示。

6.根据权利要求5所述的方法，其特征在于，根据解析后的结构树生成待加载网页之后，所述方法还包括：

加载待加载网页中的非图片元素。

7.根据权利要求1或3所述的方法，其特征在于，所述图片配置参数包括图片地址参数和/或图片加载异常地址参数，将读取的图片展示容器放入加载队列中加载展示，包括：

将图片展示容器的图片地址设置为所述图片地址参数，监听图片展示容器的加载函数，当加载函数正常执行时，展示所述图片展示容器对应的图片，并更新图片展示容器的图片显示状态；

当加载函数执行失败时，判断图片展示容器是否设定图片加载异常地址参数，如果有，则将图片展示容器地址设置为图片加载失败地址参数，展示所述图片展示容器对应的图片，并更新图片展示容器的图片显示状态。

8.根据权利要求7所述的方法，其特征在于，将图片展示容器的图片地址设置为所述图片地址参数之前，所述方法还包括：

创建一个新的图片展示容器，并将所述新的图片展示容器的图片地址设置为待执行加载的图片展示容器；

监听所述新的图片展示容器的加载函数，当加载完成后，将所述新的图片展示容器的图片地址设置为下一个待执行加载的图片展示容器。

9.根据权利要求7所述的方法，其特征在于，展示所述图片展示容器对应的图片之后，所述方法还包括：

若图片展示容器中包含文字子容器，隐藏所述文字子容器；

若图片展示容器中包含加载状态子容器，将图片展示容器地址设置在图片地址前，隐藏加载状态子容器。

10.根据权利要求1所述的方法，其特征在于，将读取的图片展示容器放入加载队列中加载展示，包括：

监听用户交互动作，若根据用户触发的交互动作确定用户访问页面结构树发生改变，更新所述图片展示容器数组中的图片展示容器。

11.一种图片加载装置，其特征在于，所述装置包括：

信息获取模块，用于获取与用户访问页面信息对应的预先配置的所有图片展示容器；其中，预先配置的所有图片展示容器根据所有待展示图片的图片参数配置；当图片参数包含图片类参数以及图片加载状态时，将图片展示容器配置为由一个外层展示容器包含两个内部展示子容器，其中，两个内部展示子容器一个为用来展示图片元素的图片子容器，另一个为非图片内容的加载状态子容器；

页面解析模块，用于对所述用户访问页面进行结构树解析并生成待加载网页；

数组设置模块，用于将所有图片展示容器与对应的图片配置参数存储为图片展示容器数组；

范围判断模块，用于按照预设读取规则读取图片展示容器数组中的图片展示容器，判断读取的图片展示容器是否处于所述待加载网页的结构树展示范围；获取用户访问页面的显示区域参数，根据所述显示区域参数确定待加载网页的结构树展示范围；依次读取所述数组中的未加载状态的图片展示容器，根据未加载状态的图片展示容器的规格参数判断未加载状态的图片展示容器是否处于所述待加载网页的结构树展示范围；

信息加载模块，用于在读取的图片展示容器处于所述待加载网页的结构树展示范围时，将读取的图片展示容器放入加载队列中加载展示。

12.一种计算机设备，其特征在于，包括处理器和存储器；

其中，所述处理器通过读取所述存储器中存储的可执行程序代码来运行与所述可执行程序代码对应的程序，以用于实现如权利要求1-10中任一所述的图片加载方法。

13.一种计算机可读存储介质，其上存储有计算机程序，其特征在于所述计算机程序被处理器执行时实现如权利要求1-10中任一所述的图片加载方法。

Images