一种页面加载方法及装置与流程

1.本发明涉及页面处理技术领域，尤其涉及一种页面加载方法及装置。


背景技术：

2.在软件产品页面中提供附件组件，附件组件中可以包括大量附件图片，现有技术在展示包含附件组件的页面时，一般会省略附件组件中图片的加载，只显示包含的图片数量和/或基本信息，当用户想要获取当前页面的附件中包含的具体图片时，需要点击加载附件或加载附件中的图片时，才触发获取附件图片的操作。该方式需要用户多次交互才能获取附件中的图片，效率低、用户体验差。因此，如何简便且高效地加载包含附件组件的页面是本领域技术人员尚待解决的技术问题。


技术实现要素：

3.本发明所要解决的技术问题在于如何简便且高效地加载包含附件组件的页面，提供一种页面加载的方法及装置，能够快速地加载包含附件组件的页面，能够提高页面加载效率，进而能够增强用户体验。
4.为了解决上述技术问题，本发明第一方面公开了一种页面加载方法，所述方法包括：
5.接收用户发送的目标页面访问请求；
6.根据所述目标页面访问请求，获取所述页面访问请求对应的目标页面的配置信息；
7.基于所述目标页面的配置信息，判断所述目标页面中是否包括附件组件；
8.若所述目标页面中包括附件组件，则获取所述目标页面包括的附件组件，以及所述附件组件对应的附件组件标识；
9.基于所述附件组件标识，确定需要在所述附件组件中显示的至少一个目标附件图片的图片标识，得到图片标识集合；
10.获取所述图片标识集合中每个所述图片标识对应的预加载图片，得到预加载图片集合，其中，每个所述图片标识对应的预加载图片至少包括每个所述图片标识对应的预览图片或每个所述图片标识对应的占位图片，且每个所述图片标识对应的预览图片是对每个所述图片标识对应的原始图片进行压缩处理后得到的；
11.加载所述目标页面，并在所述目标页面上加载所述预加载图片集合。
12.作为一种可选的实施方式，在本发明第一方面中，所述确定需要在所述附件组件中显示的至少一个目标附件图片的图片标识，得到图片标识集合之后，所述获取所述图片标识集合中每个所述图片标识对应的预加载图片之前，所述方法还包括：
13.获取所述附件组件对应的组件容器；
14.在所述目标页面中确定所述组件容器的可视区域，以及所述组件容器的可视区域的第一尺寸信息；
15.获取所述图片标识集合中每个所述图片标识对应的预览图片的布局信息，其中，每个所述图片标识对应的预览图片的布局信息包括每个所述图片标识对应的预览图片在所述组件容器内分布的位置信息以及每个所述图片标识对应的预览图片的图片容器的第二尺寸信息；
16.获取所述组件容器当前的展示状态；
17.基于所述组件容器的可视区域的第一尺寸信息、所述图片标识集合中每个所述图片标识对应的预览图片的布局信息以及所述组件容器当前的展示状态，确定所述图片标识集合中的至少一个可视图片标识，其中，所述可视图片标识对应的预览图片位于所述组件容器的可视区域内；
18.所述获取所述图片标识集合中每个所述图片标识对应的预加载图片包括：
19.获取所述图片标识集合中每个所述可视图片标识对应的预加载图片。
20.作为一种可选的实施方式，在本发明第一方面中，所述获取所述图片标识集合中每个所述可视图片标识对应的预加载图片，包括：
21.对于所述图片标识集合中每个所述可视图片标识，判断本地缓存中是否存在与该可视图片标识对应的预览图片；
22.若本地缓存中存在与该可视图片标识对应的预览图片，则获取所述本地缓存中与该可视图片标识对应的预览图片，并将所述与该可视图片标识对应的预览图片确定为该可视图片标识对应的预加载图片；
23.若本地缓存中不存在与该可视图片标识对应的预览图片，则获取所述本地缓存中的占位图片，并将所述占位图片确定为该可视图片标识对应的预加载图片，其中，所述占位图片为经过压缩处理的预设图片。
24.作为一种可选的实施方式，在本发明第一方面中，所述获取所述图片标识集合中每个所述可视图片标识对应的预加载图片，得到预加载图片集合之后，所述方法还包括：
25.确定所述图片标识集合中的待加载图片标识，其中，所述待加载图片标识对应的预加载图片为所述占位图片；
26.向附件服务器发送获取所述待加载图片标识对应的预览图片的请求，其中，所述附件服务器中存储有多个附件图片及其对应的预览图片；
27.判断是否接收到所述附件服务器反馈的所述待加载图片标识对应的预览图片；
28.当接收到所述附件服务器反馈的所述待加载图片标识对应的预览图片时，将所述待加载图片标识对应的预览图片存储至所述本地缓存，并将所述待加载图片标识对应的预加载图片更新为所述待加载图片标识对应的预览图片。
29.作为一种可选的实施方式，在本发明第一方面中，所述确定所述图片标识集合中的待加载图片标识，包括：
30.对于所述图片标识集合中每个所述可视图片标识，获取该可视图片标识对应的预加载图片；
31.判断该可视图片标识对应的预加载图片是否为所述占位图片；
32.若该可视图片标识对应的预加载图片为所述占位图片，则将该可视图片标识确定为待加载图片标识。
33.作为一种可选的实施方式，在本发明第一方面中，所述方法还包括：
34.获取所述用户在所述目标页面内的操作信息；
35.基于所述操作信息，判断所述组件容器当前的展示状态是否发生变化；
36.若所述组件容器当前的展示状态发生变化，则重复执行所述基于所述组件容器的可视区域的第一尺寸信息、所述图片标识集合中每个所述图片标识对应的预览图片的布局信息以及所述组件容器当前的展示状态，确定所述图片标识集合中的至少一个可视图片标识的步骤。
37.作为一种可选的实施方式，在本发明第一方面中，所述方法还包括：
38.接收所述用户上传的新增附件图片的图片数据流；
39.根据接收到的所述新增附件图片的图片数据流，得到所述新增附件图片对应的原始图片，并将所述新增附件图片对应的原始图片存储至附件服务器；
40.对所述新增附件图片进行压缩，生成所述新增附件图片对应的预览图片，并将所述新增附件图片对应的预览图片存储至本地缓存以及所述附件服务器。
41.本发明第二方面公开了一种页面加载装置，所述装置包括：
42.接收模块，用于接收用户发送的目标页面访问请求；
43.配置获取模块，用于根据所述目标页面访问请求，获取所述页面访问请求对应的目标页面的配置信息；
44.第一判断模块，用于基于所述目标页面的配置信息，判断所述目标页面中是否包括附件组件；
45.组件获取模块，用于若所述第一判断模块判断出所述目标页面中包括附件组件，则获取所述目标页面包括的附件组件，以及所述附件组件对应的附件组件标识；
46.确定模块，用于基于所述附件组件标识，确定需要在所述附件组件中显示的至少一个目标附件图片的图片标识，得到图片标识集合；
47.图片获取模块，用于获取所述图片标识集合中每个所述图片标识对应的预加载图片，得到预加载图片集合，其中，每个所述图片标识对应的预加载图片至少包括每个所述图片标识对应的预览图片或每个所述图片标识对应的占位图片，且每个所述图片标识对应的预览图片是对每个所述图片标识对应的原始图片进行压缩处理后得到的；
48.加载模块，用于加载所述目标页面，并在所述目标页面上加载所述预加载图片集合。
49.作为一种可选的实施方式，在本发明第二方面中，所述确定模块，还用于：
50.获取所述附件组件对应的组件容器；
51.在所述目标页面中确定所述组件容器的可视区域，以及所述组件容器的可视区域的第一尺寸信息；
52.获取所述图片标识集合中每个所述图片标识对应的预览图片的布局信息，其中，每个所述图片标识对应的预览图片的布局信息包括每个所述图片标识对应的预览图片在所述组件容器内分布的位置信息以及每个所述图片标识对应的预览图片的图片容器的第二尺寸信息；
53.获取所述组件容器当前的展示状态；
54.基于所述组件容器的可视区域的第一尺寸信息、所述图片标识集合中每个所述图片标识对应的预览图片的布局信息以及所述组件容器当前的展示状态，确定所述图片标识
集合中的至少一个可视图片标识，其中，所述可视图片标识对应的预览图片位于所述组件容器的可视区域内；
55.所述图片获取模块获取所述图片标识集合中每个所述图片标识对应的预加载图片的方式包括：
56.获取所述图片标识集合中每个所述可视图片标识对应的预加载图片。
57.作为一种可选的实施方式，在本发明第二方面中，所述图片获取模块获取所述图片标识集合中每个所述可视图片标识对应的预加载图片的方式包括：
58.对于所述图片标识集合中每个所述可视图片标识，判断本地缓存中是否存在与该可视图片标识对应的预览图片；
59.若本地缓存中存在与该可视图片标识对应的预览图片，则获取所述本地缓存中与该可视图片标识对应的预览图片，并将所述与该可视图片标识对应的预览图片确定为该可视图片标识对应的预加载图片；
60.若本地缓存中不存在与该可视图片标识对应的预览图片，则获取所述本地缓存中的占位图片，并将所述占位图片确定为该可视图片标识对应的预加载图片，其中，所述占位图片为经过压缩处理的预设图片。
61.作为一种可选的实施方式，在本发明第二方面中，所述装置还包括：更新模块，所述更新模块用于：
62.确定所述图片标识集合中的待加载图片标识，其中，所述待加载图片标识对应的预加载图片为所述占位图片；
63.向附件服务器发送获取所述待加载图片标识对应的预览图片的请求，其中，所述附件服务器中存储有多个附件图片及其对应的预览图片；
64.判断是否接收到所述附件服务器反馈的所述待加载图片标识对应的预览图片；
65.当接收到所述附件服务器反馈的所述待加载图片标识对应的预览图片时，将所述待加载图片标识对应的预览图片存储至所述本地缓存，并将所述待加载图片标识对应的预加载图片更新为所述待加载图片标识对应的预览图片。
66.作为一种可选的实施方式，在本发明第二方面中，所述更新模块确定所述图片标识集合中的待加载图片标识的方式包括：
67.对于所述图片标识集合中每个所述可视图片标识，获取该可视图片标识对应的预加载图片；
68.判断该可视图片标识对应的预加载图片是否为所述占位图片；
69.若该可视图片标识对应的预加载图片为所述占位图片，则将该可视图片标识确定为待加载图片标识。
70.作为一种可选的实施方式，在本发明第二方面中，所述确定模块，还用于：
71.获取所述用户在所述目标页面内的操作信息；
72.基于所述操作信息，判断所述组件容器当前的展示状态是否发生变化；
73.若所述组件容器当前的展示状态发生变化，则重复执行所述基于所述组件容器的可视区域的第一尺寸信息、所述图片标识集合中每个所述图片标识对应的预览图片的布局信息以及所述组件容器当前的展示状态，确定所述图片标识集合中的至少一个可视图片标识的步骤。
74.作为一种可选的实施方式，在本发明第二方面中，所述装置还包括：上传模块，所述上传模块用于：
75.接收所述用户上传的新增附件图片的图片数据流；
76.根据接收到的所述新增附件图片的图片数据流，得到所述新增附件图片对应的原始图片，并将所述新增附件图片对应的原始图片存储至附件服务器；
77.对所述新增附件图片进行压缩，生成所述新增附件图片对应的预览图片，并将所述新增附件图片对应的预览图片存储至本地缓存以及所述附件服务器。
78.本发明第三方面公开了另一种页面加载装置，所述装置包括：
79.存储有可执行程序代码的存储器；
80.与所述存储器耦合的处理器；
81.所述处理器调用所述存储器中存储的所述可执行程序代码，执行本发明第一方面公开的页面加载方法。
82.本发明第四方面公开了一种计算机可存储介质，所述计算机存储介质存储有计算机指令，所述计算机指令被调用时，用于执行本发明第一方面公开的页面加载方法。
83.与现有技术相比，本发明实施例具有以下有益效果：
84.本发明实施例中，接收用户发送的目标页面访问请求，获取目标页面的配置信息；并基于目标页面的配置信息，获取目标页面包括的附件组件以及对应的附件组件标识；基于附件组件标识，确定需要在附件组件中显示的至少一个目标附件图片的图片标识，获取每个图片标识对应的预加载图片，得到预加载图片集合，预加载图片包括预览图片或占位图片；加载目标页面，并在目标页面上加载预加载图片集合，进而实现目标页面的加载。可见，实施本发明能够加载包括附件组件的页面，并直接展示附件组件中的至少一个附件图片的预览图片或占位图片，能够减少用户交互次数、缩短页面加载时间，进而能够简便且高效地加载包含附件组件的页面。
附图说明
85.为了更清楚地说明本发明实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
86.图1是本发明实施例公开的一种页面加载方法的流程示意图；
87.图2是本发明实施例公开的另一种页面加载方法的流程示意图；
88.图3是本发明实施例公开的一种页面加载装置的结构示意图；
89.图4是本发明实施例公开的另一种页面加载装置的结构示意图；
90.图5是本发明实施例公开的又一种页面加载的装置的结构示意图。
具体实施方式
91.为了使本技术领域的人员更好地理解本发明方案，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员
在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
92.本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别不同对象，而不是用于描述特定顺序。此外，术语“包括”和“具有”以及它们任何变形，意图在于覆盖不排他的包含。例如包含了一系列步骤或单元的过程、方法、装置、产品或端没有限定于已列出的步骤或单元，而是可选地还包括没有列出的步骤或单元，或可选地还包括对于这些过程、方法、产品或端固有的其他步骤或单元。
93.在本文中提及“实施例”意味着，结合实施例描述的特定特征、结构或特性可以包含在本发明的至少一个实施例中。在说明书中的各个位置出现该短语并不一定均是指相同的实施例，也不是与其它实施例互斥的独立的或备选的实施例。本领域技术人员显式地和隐式地理解的是，本文所描述的实施例可以与其它实施例相结合。
94.本发明公开了一种页面加载方法及装置，能够简便且高效地加载包含附件组件的页面。以下分别进行详细说明。
95.实施例一
96.请参阅图1，图1是本发明实施例公开的一种页面加载方法的流程示意图。其中，图1所描述的页面加载方法可以应用于移动终端中，也可以应用于服务器，本发明实施例不做限定。如图1所示，该页面加载方法可以包括以下操作：
97.s101、接收用户发送的目标页面访问请求。
98.本发明实施例中，当用户希望访问目标页面时，接收用户发送的目标页面访问请求，目标页面访问请求中携带有目标页面的访问地址url。其中，目标页面中包含预先构建的附件组件，可选的，在dap开发平台上注册组件，在dap上开发建模，新建页面中选择注册的附件组件，进一步在组件上配置附件管理系统(attachments management)服务信息，进而生成目标页面，能够在目标页面中上传和预览图片。同时，目标页面同时支持sea.js模块化和jquery插件，可以通过sea.js模块化加载前端js资源，或者引入js资源并注册成jquery插件，通过这两种方法可引入附件预览前端资源，并且暴露相关api提供给使用者调用。后端可引用附件压缩和缓存工具包。
99.s102、根据目标页面访问请求，获取页面访问请求对应的目标页面的配置信息。
100.本发明实施例中，根据目标页面访问请求中携带有目标页面的访问地址url获取目标网页的源代码，通过正则匹配可以获取目标页面的配置信息。
101.s103、基于目标页面的配置信息，判断目标页面中是否包括附件组件；若目标页面中包括附件组件，则执行步骤s104。
102.s104、获取目标页面包括的附件组件，以及附件组件对应的附件组件标识。
103.本发明实施例中，根据目标页面的配置信息，获取到目标页面包括的附件组件，目标页面中包括的附件组件具有唯一标识码，用以标识该目标页面中的附件组件。
104.s105、基于附件组件标识，确定需要在附件组件中显示的至少一个目标附件图片的图片标识，得到图片标识集合。
105.本发明实施例中，获取与附件组件标识关联的目标附件图片，目标附件图片为任一用户预先在目标页面的附件组件中上传的附件图片，目标附件图片的个数可以为一个也可以为多个。用户在附件组件中上传附件图片时，构建目标附件图片标识与附件组件标识的关联关系。在加载阶段，可以通过附件组件的标识信息获取需要在该附件组件中显示的
至少一个目标附件图片的图片标识，进而得到图片标识集合。
106.s106、获取图片标识集合中每个图片标识对应的预加载图片，得到预加载图片集合。其中，每个图片标识对应的预加载图片至少包括每个图片标识对应的预览图片或每个图片标识对应的占位图片，且每个图片标识对应的预览图片是对每个图片标识对应的原始图片进行压缩处理后得到的。
107.本发明实施例中，基于图片标识集合中的图片标识，获取与图片标识匹配的预加载图片。图片标识对应的预加载图片可以为图片标识对应的预览图片，即对每个图片标识对应的原始图片进行压缩处理后得到的预览图片，图片标识对应的预加载图片也可以为图片标识对应的占位图片，占位图片是预先设定的体积较小的默认图片，表示所在位置会加载一张图片。可选的，占位图片在css样式文件中用base64编码加载。
108.s107、加载目标页面，并在目标页面上加载预加载图片集合。
109.本发明实施例中，根据目标页面的访问地址获取目标页面包括的所有内容，加载目标页面。同时，根据获取的预加载图片集合，在目标页面上加载预加载图片集合，进而完成目标页面的加载。
110.本发明实施例中，可选的，目标页面附件组件提供上传和预览图片的功能，目标页面加载完成之后，该方法还包括：
111.接收用户上传的新增附件图片的图片数据流；
112.根据接收到的新增附件图片的图片数据流，得到新增附件图片对应的原始图片，并将新增附件图片对应的原始图片存储至附件服务器；
113.对新增附件图片进行压缩，生成新增附件图片对应的预览图片，并将新增附件图片对应的预览图片存储至本地缓存以及附件服务器。
114.本发明可选的实施例中，通过目标页面附件组件提供的上传图片的功能，接收用户上传的新增附件图片的图片数据流，得到新增附件图片的原始图片，并对新增附件图片进行压缩，得到体积较小的新增附件图片的预览图片。并将上传的新增附件图片对应的原始图片以及预览图片存储至相应的存储位置。
115.可见，实施该可选的实施例，能够在目标页面中上传并存储附件图片，提高用户体验。
116.可见，实施如图1所示的页面加载方法，能够加载包括附件组件的页面，并直接展示附件组件中的至少一个附件图片的预览图片或占位图片，在图片预览阶段，用户对图片的清晰度要求不高，通过加载压缩过的预览图，减小了图片体积，提高了图片下载速度，进而能够简便且高效地加载包含附件组件的页面。
117.实施例二
118.请参阅图2，图2是本发明实施例公开的另一种页面加载方法的流程示意图。如图2所示，该页面加载方法可以包括以下操作：
119.s201、接收用户发送的目标页面访问请求。
120.s202、根据目标页面访问请求，获取页面访问请求对应的目标页面的配置信息。
121.s203、基于目标页面的配置信息，判断目标页面中是否包括附件组件；若目标页面中包括附件组件，则执行步骤s204。
122.s204、获取目标页面包括的附件组件，以及附件组件对应的附件组件标识。
123.s205、基于附件组件标识，确定需要在附件组件中显示的至少一个目标附件图片的图片标识，得到图片标识集合。
124.本发明实施例中，针对步骤s201-步骤s205的其它详细描述，请参照实施例一中针对步骤s101-步骤s105的详细描述，本发明实施例不再赘述。
125.s206、确定图片标识集合中的至少一个可视图片标识，其中，可视图片标识对应的预览图片位于组件容器的可视区域内。
126.本发明实施例中，确定出需要在附件组件中显示的至少一个目标附件图片的图片标识，得到图片标识集合之后。若由于目标页面展示区域的尺寸限制，或是附件组件展示区域的尺寸限制，无法一次展示所有图片标识集合中每个图片标识对应的预加载图片。此时需要确定出图片标识集合中筛选出图片标识对应的预览图片位于组件容器的可视区域内的一个或多个可视图片标识。
127.本发明实施例中，可选的，确定图片标识集合中的至少一个可视图片标识包括：
128.获取附件组件对应的组件容器；
129.在目标页面中确定组件容器的可视区域，以及组件容器的可视区域的第一尺寸信息；
130.获取图片标识集合中每个图片标识对应的预览图片的布局信息，其中，每个图片标识对应的预览图片的布局信息包括每个图片标识对应的预览图片在组件容器内分布的位置信息以及每个图片标识对应的预览图片的图片容器的第二尺寸信息；
131.获取组件容器当前的展示状态；
132.基于组件容器的可视区域的第一尺寸信息、图片标识集合中每个图片标识对应的预览图片的布局信息以及组件容器当前的展示状态，确定图片标识集合中的至少一个可视图片标识，其中，可视图片标识对应的预览图片位于组件容器的可视区域内。
133.本发明可选的实施例中，根据目标页面的可视区域尺寸确定附件组件对应的组件容器的可视区域的尺寸。附件组件对应的组件容器的可视区域的尺寸可以根据目标页面的可视区域尺寸进行自适应调整。可以根据图片标识集合中每个图片标识对应的目标附件图片的优先级确定每个图片标识对应的预览图片在组件容器内分布的位置信息。每个图片标识对应的预览图片被放置在图片容器中，基于图片容器进行展示，每个图片标识对应的预览图片的图片容器的尺寸可以相同也可以不同。获取组件容器当前的展示状态，展示状态包括默认状态以及更新状态。其中，默认状态为加载目标页面时首次展示的状态，可以被配置为显示第一页预览图片。更新状态可以根据用户在目标页面内的点击或滚动操作进行确定。获取组件容器的可视区域的第一尺寸信息、图片标识集合中每个图片标识对应的预览图片的布局信息以及组件容器当前的展示状态之后，可以确定出图片标识集合中图片标识对应的预览图片位于组件容器的可视区域内的一个或多个可视图片标识。
134.可见实施该可选的实施例，能够确定当前位于组件容器的可视区域内的一个或多个可视图片标识，基于可视图片标识获取对应的预加载图片能够减少获取的数据量，提高处理速度。
135.s207、获取图片标识集合中每个可视图片标识对应的预加载图片，得到预加载图片集合。
136.本发明实施例中，确定图片标识集合中的一个或多个可视图片标识之后，基于每
个可视图片标识，获取与该可视图片标识对应的预加载图片，得到预加载图片集合。
137.本发明实施例中，可选的，步骤s207中获取图片标识集合中每个可视图片标识对应的预加载图片，包括：
138.对于图片标识集合中每个可视图片标识，判断本地缓存中是否存在与该可视图片标识对应的预览图片；
139.若本地缓存中存在与该可视图片标识对应的预览图片，则获取本地缓存中与该可视图片标识对应的预览图片，并将与该可视图片标识对应的预览图片确定为该可视图片标识对应的预加载图片；
140.若本地缓存中不存在与该可视图片标识对应的预览图片，则获取本地缓存中的占位图片，并将占位图片确定为该可视图片标识对应的预加载图片，其中，占位图片为经过压缩处理的预设图片。
141.本发明可选的实施例中，在获取每个可视图片标识对应的预加载图片时，首先根据可视图片标识，判断本地缓存中是否有预先缓存的与该可视图片标识匹配的预览图片。本地缓存中存储的图片可直接获取，无需向服务器发送图片获取请求，能够减少因获取图片导致的加载延时。当本地缓存中存储有与该可视图片标识匹配的预览图片时，直接将该可视图片标识对应的预览图片确定为该可视图片标识对应的预加载图片。当本地缓存中未存储与该可视图片标识匹配的预览图片时，需要先获取本地缓存中的占位图片，将占位图片确定为该可视图片标识对应的预加载图片。
142.可见实施该可选的实施例，能够获取本地缓存中存储的每个可视图片标识对应的预加载图片，减少因获取图片导致的加载延时。
143.s208、加载目标页面，并在目标页面上加载预加载图片集合。
144.本发明实施例中，得到每个可视图片标识对应的预加载图片后，加载目标页面，并且，根据获取的预加载图片集合，在目标页面上加载每个可视图片标识对应预加载图片，进而完成目标页面的加载。
145.s209、确定图片标识集合中的待加载图片标识，其中，待加载图片标识对应的预加载图片为占位图片。
146.本发明实施例中，完成目标页面加载后，此时目标页面中存在占位图片，占位图片不能作为附加图片加载的最终结果，需要重新加载占位图片。因此，需要确定出图片标识集合中图片标识对应的预加载图片为占位图片的待加载图片标识。
147.本发明实施例中，可选的，步骤s209确定图片标识集合中的待加载图片标识包括以下步骤：
148.对于图片标识集合中每个可视图片标识，获取该可视图片标识对应的预加载图片；
149.判断该可视图片标识对应的预加载图片是否为占位图片；
150.若该可视图片标识对应的预加载图片为占位图片，则将该可视图片标识确定为待加载图片标识。
151.本发明可选的实施例中，对于每个可视图片标识，判断当前加载完成的目标页面中，该可视图片标识对应的预加载图片是否为占位图片，若该可视图片标识对应的预加载图片为占位图片，则将该可视图片标识确定为待加载图片标识。
152.可见实施该可选的实施例，能够获取已加载完成的目标页面中需要更新的占位图片对应的待加载图片标识。
153.s210、向附件服务器发送获取待加载图片标识对应的预览图片的请求，其中，附件服务器中存储有多个附件图片及其对应的预览图片。
154.本发明实施例中，确定出需要更新的占位图片对应的待加载图片标识后，向存储有多个附件图片及其对应的预览图片的附件服务器发送获取待加载图片标识对应的预览图片的请求。
155.s211、判断是否接收到附件服务器反馈的待加载图片标识对应的预览图片。
156.s212、当接收到附件服务器反馈的待加载图片标识对应的预览图片时，将待加载图片标识对应的预览图片存储至本地缓存，并将待加载图片标识对应的预加载图片更新为待加载图片标识对应的预览图片。
157.本发明实施例中，发送获取待加载图片标识对应的预览图片的请求之后，实时判断是否接收到附件服务器根据获取请求反馈的待加载图片标识对应的预览图片。若接收到附件服务器反馈的待加载图片标识对应的预览图片，将待加载图片标识对应的预览图片存储至本地缓存，若后续需要重复展示该待加载图片标识对应的预览图片时，可以直接从本地缓存中读取，避免多次请求相同数据。接收到附件服务器反馈的待加载图片标识对应的预览图片之后，将待加载图片标识对应的预加载图片更新为待加载图片标识对应的预览图片。
158.s213、更新目标页面。
159.本发明实施例中，根据待加载图片标识对应的预览图片更新目标页面中相应的占位图，进而实现目标页面的更新。
160.本发明实施例中，可选的，该方法还包括：
161.获取用户在目标页面内的操作信息；
162.基于操作信息，判断组件容器当前的展示状态是否发生变化；
163.若组件容器当前的展示状态发生变化，则重复执行基于组件容器的可视区域的第一尺寸信息、图片标识集合中每个图片标识对应的预览图片的布局信息以及组件容器当前的展示状态，确定图片标识集合中的至少一个可视图片标识的步骤。
164.本发明可选的实施例中，在加载完目标页面之后，实时获取用户在目标页面内进行点击或滚动操作的操作信息，如用户点击附件组件中提供的“下一页”控件，根据用户在目标页面内的操作信息，判断组件容器当前的展示状态是否发生变化，当用户点击“下一页”时，此时组件容器当前的展示状态发生变化，需要更新位于组件容器的可视区域内的一个或多个预览图片，即重复执行基于组件容器的可视区域的第一尺寸信息、图片标识集合中每个图片标识对应的预览图片的布局信息以及组件容器当前的展示状态，确定图片标识集合中的至少一个可视图片标识的步骤。
165.可见实施该可选的实施例，能够根据用户的操作更新当前可视区域内的一个或多个预览图片。
166.可见，实施如图2所示的页面加载方法，能够在本地缓存获取当前位于组件容器的可视区域内的一个或多个可视图片标识对应的预加载图片，根据预加载图片完成页面的加载，降低了与附件服务器的交互成本，避免了由于图片过大，或者网络延迟等原因，导致的
页面延迟加载。根据容器大小加载可视图片，避免浪费请求资源，节约了首屏加载时间，同时降低了请求数量。
167.实施例三
168.请参阅图3，图3是本发明实施例公开的一种页面加载装置的结构示意图。如图3所示，该页面加载装置包括：接收模块301、配置获取模块302、第一判断模块303、组件获取模块304、确定模块305、图片获取模块306以及加载模块307。
169.接收模块301，用于接收用户发送的目标页面访问请求。
170.本发明实施例中，当用户希望访问目标页面时，接收用户发送的目标页面访问请求，目标页面访问请求中携带有目标页面的访问地址url。其中，目标页面中包含预先构建的附件组件，可选的，在dap开发平台上注册组件，在dap上开发建模，新建页面中选择注册的附件组件，进一步在组件上配置附件管理系统(attachments management)服务信息，进而生成目标页面，能够在目标页面中上传和预览图片。同时，目标页面同时支持sea.js模块化和jquery插件，可以通过sea.js模块化加载前端js资源，或者引入js资源并注册成jquery插件，通过这两种方法可引入附件预览前端资源，并且暴露相关api提供给使用者调用。后端可引用附件压缩和缓存工具包。
171.配置获取模块302，用于根据目标页面访问请求，获取页面访问请求对应的目标页面的配置信息。
172.本发明实施例中，根据目标页面访问请求中携带有目标页面的访问地址url获取目标网页的源代码，通过正则匹配可以获取目标页面的配置信息。
173.第一判断模块303，用于基于目标页面的配置信息，判断目标页面中是否包括附件组件。
174.组件获取模块304，用于若第一判断模块判断出目标页面中包括附件组件，则获取目标页面包括的附件组件，以及附件组件对应的附件组件标识。
175.本发明实施例中，根据目标页面的配置信息，获取到目标页面包括的附件组件，目标页面中包括的附件组件具有唯一标识码，用以标识该目标页面中的附件组件。
176.确定模块305，用于基于附件组件标识，确定需要在附件组件中显示的至少一个目标附件图片的图片标识，得到图片标识集合。
177.本发明实施例中，获取与附件组件标识关联的目标附件图片，目标附件图片为任一用户预先在目标页面的附件组件中上传的附件图片，目标附件图片的个数可以为一个也可以为多个。用户在附件组件中上传附件图片时，构建目标附件图片标识与附件组件标识的关联关系。在加载阶段，可以通过附件组件的标识信息获取需要在该附件组件中显示的至少一个目标附件图片的图片标识，进而得到图片标识集合。
178.图片获取模块306，用于获取图片标识集合中每个图片标识对应的预加载图片，得到预加载图片集合，其中，每个图片标识对应的预加载图片至少包括每个图片标识对应的预览图片或每个图片标识对应的占位图片，且每个图片标识对应的预览图片是对每个图片标识对应的原始图片进行压缩处理后得到的。
179.本发明实施例中，基于图片标识集合中的图片标识，获取与图片标识匹配的预加载图片。图片标识对应的预加载图片可以为图片标识对应的预览图片，即对每个图片标识对应的原始图片进行压缩处理后得到的预览图片，图片标识对应的预加载图片也可以为图
片标识对应的占位图片，占位图片是预先设定的体积较小的默认图片，表示所在位置会加载一张图片。可选的，占位图片在css样式文件中用base64编码加载。
180.加载模块307，用于加载目标页面，并在目标页面上加载预加载图片集合。
181.本发明实施例中，根据目标页面的访问地址获取目标页面包括的所有内容，加载目标页面。同时，根据获取的预加载图片集合，在目标页面上加载预加载图片集合，进而完成目标页面的加载。
182.可见，实施如图3所示的页面加载装置，能够加载包括附件组件的页面，并直接展示附件组件中的至少一个附件图片的预览图片或占位图片，在图片预览阶段，用户对图片的清晰度要求不高，通过加载压缩过的预览图，减小了图片体积，提高了图片下载速度，进而能够简便且高效地加载包含附件组件的页面。
183.本发明实施例中，可选的，确定模块305，还用于：
184.获取附件组件对应的组件容器；
185.在目标页面中确定组件容器的可视区域，以及组件容器的可视区域的第一尺寸信息；
186.获取图片标识集合中每个图片标识对应的预览图片的布局信息，其中，每个图片标识对应的预览图片的布局信息包括每个图片标识对应的预览图片在组件容器内分布的位置信息以及每个图片标识对应的预览图片的图片容器的第二尺寸信息；
187.获取组件容器当前的展示状态；
188.基于组件容器的可视区域的第一尺寸信息、图片标识集合中每个图片标识对应的预览图片的布局信息以及组件容器当前的展示状态，确定图片标识集合中的至少一个可视图片标识，其中，可视图片标识对应的预览图片位于组件容器的可视区域内。
189.本发明可选的实施例中，确定出需要在附件组件中显示的至少一个目标附件图片的图片标识，得到图片标识集合之后。若由于目标页面展示区域的尺寸限制，或是附件组件展示区域的尺寸限制，无法一次展示所有图片标识集合中每个图片标识对应的预加载图片。此时需要确定出图片标识集合中筛选出图片标识对应的预览图片位于组件容器的可视区域内的一个或多个可视图片标识。
190.进一步的，根据目标页面的可视区域尺寸确定附件组件对应的组件容器的可视区域的尺寸。附件组件对应的组件容器的可视区域的尺寸可以根据目标页面的可视区域尺寸进行自适应调整。可以根据图片标识集合中每个图片标识对应的目标附件图片的优先级确定每个图片标识对应的预览图片在组件容器内分布的位置信息。每个图片标识对应的预览图片被放置在图片容器中，基于图片容器进行展示，每个图片标识对应的预览图片的图片容器的尺寸可以相同也可以不同。获取组件容器当前的展示状态，展示状态包括默认状态以及更新状态。其中，默认状态为加载目标页面时首次展示的状态，可以被配置为显示第一页预览图片。更新状态可以根据用户在目标页面内的点击或滚动操作进行确定。获取组件容器的可视区域的第一尺寸信息、图片标识集合中每个图片标识对应的预览图片的布局信息以及组件容器当前的展示状态之后，可以确定出图片标识集合中图片标识对应的预览图片位于组件容器的可视区域内的一个或多个可视图片标识。
191.可见实施该可选的实施例，能够确定当前位于组件容器的可视区域内的一个或多个可视图片标识，基于可视图片标识获取对应的预加载图片能够减少获取的数据量，提高
处理速度。
192.本发明实施例中，可选的，确定模块305，还用于：
193.获取用户在目标页面内的操作信息；
194.基于操作信息，判断组件容器当前的展示状态是否发生变化；
195.若组件容器当前的展示状态发生变化，则重复执行基于组件容器的可视区域的第一尺寸信息、图片标识集合中每个图片标识对应的预览图片的布局信息以及组件容器当前的展示状态，确定图片标识集合中的至少一个可视图片标识的步骤。
196.本发明可选的实施例中，在加载完目标页面之后，实时获取用户在目标页面内进行点击或滚动操作的操作信息，如用户点击附件组件中提供的“下一页”控件，根据用户在目标页面内的操作信息，判断组件容器当前的展示状态是否发生变化，当用户点击“下一页”时，此时组件容器当前的展示状态发生变化，需要更新位于组件容器的可视区域内的一个或多个预览图片，即重复执行基于组件容器的可视区域的第一尺寸信息、图片标识集合中每个图片标识对应的预览图片的布局信息以及组件容器当前的展示状态，确定图片标识集合中的至少一个可视图片标识的步骤。
197.可见实施该可选的实施例，能够根据用户的操作更新当前可视区域内的一个或多个预览图片。
198.本发明实施例中，可选的，图片获取模块306获取图片标识集合中每个图片标识对应的预加载图片的方式包括：
199.获取图片标识集合中每个可视图片标识对应的预加载图片。
200.本发明可选的实施例中，确定图片标识集合中的一个或多个可视图片标识之后，基于每个可视图片标识，获取与该可视图片标识对应的预加载图片，得到预加载图片集合。
201.本发明实施例中，进一步可选的，图片获取模块306获取图片标识集合中每个可视图片标识对应的预加载图片的方式包括：
202.对于图片标识集合中每个可视图片标识，判断本地缓存中是否存在与该可视图片标识对应的预览图片；
203.若本地缓存中存在与该可视图片标识对应的预览图片，则获取本地缓存中与该可视图片标识对应的预览图片，并将与该可视图片标识对应的预览图片确定为该可视图片标识对应的预加载图片；
204.若本地缓存中不存在与该可视图片标识对应的预览图片，则获取本地缓存中的占位图片，并将占位图片确定为该可视图片标识对应的预加载图片，其中，占位图片为经过压缩处理的预设图片。
205.本发明可选的实施例中，在获取每个可视图片标识对应的预加载图片时，首先根据可视图片标识，判断本地缓存中是否有预先缓存的与该可视图片标识匹配的预览图片。本地缓存中存储的图片可直接获取，无需向服务器发送图片获取请求，能够减少因获取图片导致的加载延时。当本地缓存中存储有与该可视图片标识匹配的预览图片时，直接将该可视图片标识对应的预览图片确定为该可视图片标识对应的预加载图片。当本地缓存中未存储与该可视图片标识匹配的预览图片时，需要先获取本地缓存中的占位图片，将占位图片确定为该可视图片标识对应的预加载图片。
206.可见实施该可选的实施例，能够获取本地缓存中存储的每个可视图片标识对应的
预加载图片，减少因获取图片导致的加载延时。
207.本发明实施例中，可选的，请参阅图4，图4是本发明实施例公开的另一种页面加载装置的结构示意图。如图4所示，该页面加载装置还包括：更新模块308，上传模块309。
208.本发明可选的实施例中，更新模块308用于：
209.确定图片标识集合中的待加载图片标识，其中，待加载图片标识对应的预加载图片为占位图片；
210.向附件服务器发送获取待加载图片标识对应的预览图片的请求，其中，附件服务器中存储有多个附件图片及其对应的预览图片；
211.判断是否接收到附件服务器反馈的待加载图片标识对应的预览图片；
212.当接收到附件服务器反馈的待加载图片标识对应的预览图片时，将待加载图片标识对应的预览图片存储至本地缓存，并将待加载图片标识对应的预加载图片更新为待加载图片标识对应的预览图片。
213.本发明可选的实施例中，完成目标页面加载后，此时目标页面中存在占位图片，占位图片不能作为附加图片加载的最终结果，需要重新加载占位图片。因此，需要确定出图片标识集合中图片标识对应的预加载图片为占位图片的待加载图片标识。确定出需要更新的占位图片对应的待加载图片标识后，向存储有多个附件图片及其对应的预览图片的附件服务器发送获取待加载图片标识对应的预览图片的请求。发送获取待加载图片标识对应的预览图片的请求之后，实时判断是否接收到附件服务器根据获取请求反馈的待加载图片标识对应的预览图片。若接收到附件服务器反馈的待加载图片标识对应的预览图片，将待加载图片标识对应的预览图片存储至本地缓存，若后续需要重复展示该待加载图片标识对应的预览图片时，可以直接从本地缓存中读取，避免多次请求相同数据。接收到附件服务器反馈的待加载图片标识对应的预览图片之后，将待加载图片标识对应的预加载图片更新为待加载图片标识对应的预览图片。根据待加载图片标识对应的预览图片更新目标页面中相应的占位图，进而实现目标页面的更新。
214.本发明实施例中，进一步可选的，更新模块308确定图片标识集合中的待加载图片标识的方式包括：
215.对于图片标识集合中每个可视图片标识，获取该可视图片标识对应的预加载图片；
216.判断该可视图片标识对应的预加载图片是否为占位图片；
217.若该可视图片标识对应的预加载图片为占位图片，则将该可视图片标识确定为待加载图片标识。
218.本发明可选的实施例中，对于每个可视图片标识，判断当前加载完成的目标页面中，该可视图片标识对应的预加载图片是否为占位图片，若该可视图片标识对应的预加载图片为占位图片，则将该可视图片标识确定为待加载图片标识。
219.可见实施该可选的实施例，能够获取已加载完成的目标页面中需要更新的占位图片对应的待加载图片标识。
220.本发明可选的实施例中，上传模块309用于：
221.接收用户上传的新增附件图片的图片数据流；
222.根据接收到的新增附件图片的图片数据流，得到新增附件图片对应的原始图片，
并将新增附件图片对应的原始图片存储至附件服务器；
223.对新增附件图片进行压缩，生成新增附件图片对应的预览图片，并将新增附件图片对应的预览图片存储至本地缓存以及附件服务器。
224.本发明可选的实施例中，通过目标页面附件组件提供的上传图片的功能，接收用户上传的新增附件图片的图片数据流，得到新增附件图片的原始图片，并对新增附件图片进行压缩，得到体积较小的新增附件图片的预览图片。并将上传的新增附件图片对应的原始图片以及预览图片存储至相应的存储位置。
225.可见，实施该可选的实施例，能够在目标页面中上传并存储附件图片，提高用户体验。
226.可见，实施如图4所示的页面加载装置，能够在本地缓存获取当前位于组件容器的可视区域内的一个或多个可视图片标识对应的预加载图片，根据预加载图片完成页面的加载，降低了与附件服务器的交互成本，避免了由于图片过大，或者网络延迟等原因，导致的页面延迟加载。根据容器大小加载可视图片，避免浪费请求资源，节约了首屏加载时间，同时降低了请求数量。
227.实施例四
228.请参阅图5，图5是本发明实施例公开的又一种页面加载装置的结构示意图。如图5所示，该页面加载装置可以包括：
229.存储有可执行程序代码的存储器501；
230.与存储器501耦合的处理器502；
231.处理器502调用存储器501中存储的可执行程序代码，执行本发明实施例一或本发明实施例二所描述的页面加载方法中的步骤。
232.实施例五
233.本发明实施例公开了一种计算机可存储介质，该计算机存储介质存储有计算机指令，该计算机指令被调用时，用于执行本发明实施例一或本发明实施例二所描述的页面加载方法中的步骤。
234.实施例六
235.本发明实施例公开了一种计算机程序产品，该计算机程序产品包括存储了计算机程序的非瞬时性计算机可读存储介质，且该计算机程序可操作来使计算机执行实施例一或实施例二中所描述的页面加载方法中的步骤。
236.以上所描述的装置实施例仅是示意性的，其中所述作为分离部件说明的模块可以是或者也可以不是物理上分开的，作为模块显示的部件可以是或者也可以不是物理模块，即可以位于一个地方，或者也可以分布到多个网络模块上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下，即可以理解并实施。
237.通过以上的实施例的具体描述，本领域的技术人员可以清楚地了解到各实施方式可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件。基于这样的理解，上述技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在计算机可读存储介质中,存储介质包括只读存储器(read-only memory，rom)、随机存储器(random access memory，ram)、可编程只读存储器
(programmable read-only memory，prom)、可擦除可编程只读存储器(erasable programmable read only memory，eprom)、一次可编程只读存储器(one-time programmable read-only memory，otprom)、电子抹除式可复写只读存储器(electrically-erasable programmable read-only memory，eeprom)、只读光盘(compact disc read-only memory，cd-rom)或其他光盘存储器、磁盘存储器、磁带存储器、或者能够用于携带或存储数据的计算机可读的任何其他介质。
238.最后应说明的是：本发明实施例公开的一种页面加载方法及装置所揭露的仅为本发明较佳实施例而已，仅用于说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解；其依然可以对前述各项实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或替换，并不使相应的技术方案的本质脱离本发明各项实施例技术方案的精神和范围。