CN110413911B - 网络图片加载方法、装置、终端设备及存储介质 - Google Patents

Abstract

本发明实施例公开了一种网络图片加载方法，该方法包括：建立待加载图片的串行请求队列，监听网页中触发的网络图片加载事件，并根据该网络图片加载事件，加载排列在串行请求队列头部的加载请求对应的待加载图片，在加载达到预设条件时，加载串行请求队列中下一个加载请求对应的待加载图片。本发明实施例中还提供了一种网络图片加载装置、终端设备及计算机可读存储介质，防止了因图片加载时间过长导致网页的页面假死。

Description

网络图片加载方法、装置、终端设备及存储介质

技术领域

本发明属于网络技术领域，尤其涉及一种网络图片加载方法、装置、终端设备及计算机可读存储介质。

背景技术

移动终端的使用日益广泛，人们习惯于用移动终端上网浏览网页，在浏览的过程中，需要加载当前页面的图片，图片的加载速度在很大程度上影响着用户对网页的浏览体验。

现有技术中，在图片未加载完成之前，使用占位图代替未加载完成的图片位置，在图片发起请求时替换掉占位图。但是，由于占位图是固定宽高的，而实际上请求加载的图片与占位图大小并不相符，在图片加载完成后，使用加载完成的图片代替占位图，则会导致页面上下抖动。同时由于没有采用有效的队列机制，而导致不能够从根本解决HTML(HyperText Markup Language)页面在短时间内发起的高并发图片请求导致的网络阻塞，在高并发加载图片时，加载速度慢，效率低，容易使得页面处于假死的状态。

发明内容

本发明提供一种网络图片加载方法、装置、终端设备及计算机可读存储介质，用以通过维护加载图片串行请求队列，控制待加载图片按排列顺序逐个加载，解决在有限的网络带宽并发批量加载请求导致的页面假死。

本发明实施例第一方面提供了一种网络图片加载方法，包括：

建立待加载图片的串行请求队列，所述串行请求队列按照从头部到尾部的顺序排列加载请求；

监听网页中触发的网络图片加载事件；

根据所述网络图片加载事件，加载所述串行请求队列头部的加载请求对应的待加载图片；

在加载所述串行请求队列头部的加载请求对应的待加载图片达到预设条件时，加载所述串行请求队列中下一个加载请求对应的待加载图片。

本发明实施例第二方面提供了一种网络图片加载装置，包括：

建立模块，用于建立待加载图片的串行请求队列，所述串行请求队列按照从头部到尾部的顺序排列加载请求；

监听模块，用于监听网页中触发的网络图片加载事件；

加载模块，用于根据所述网络图片加载事件，加载所述串行请求队列头部的加载请求对应的待加载图片；

所述加载模块，还用于在加载所述串行请求队列头部的加载请求对应的待加载图片达到预设条件时，加载所述串行请求队列中下一个加载请求对应的待加载图片。

本发明实施例第三方面提供了一种终端设备，包括存储器，处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现如前述第一方面的网络图片加载方法。

本发明实施例第四方面提供了一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时，实现如前述第一方面所述的网络图片加载方法。

从上述本发明实施例可知，本发明提供的网络图片加载方法、装置、终端设备及计算机可读存储介质，建立待加载图片的串行请求队列，串行请求队列中按照从头部到尾部的顺序排列加载请求，监听到网页中触发的网络图片加载事件时，加载该串行请求队列头部的加载请求对应的待加载图片，并在加载达到预设条件时，直接加载该串行请求队列中下一个加载请求对应的待加载图片，避免了因为在短时间内触发的高并发请求导致的网络阻塞，减少了首张待加载图片的加载时间，并且防止了因图片加载时间过长导致网页的页面假死。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例。

图1是本发明第一实施例中网络图片请求应用场景示意图；

图2是本发明第二实施例提供的网络图片加载方法的实现流程示意图；

图3是本发明实施例中串行请求队列的结构示意图；

图4是本发明实施例中存在多个串行请求队列的结构示意图；

图5是本发明第三实施例提供的网络图片加载方法的实现流程示意图；

图6是本发明第四实施例提供的网络图片加载装置的结构示意图；

图7是本发明第五实施例提供的网络图片加载装置的结构示意图；

图8是本发明实施例提供的终端设备的硬件结构示意图。

具体实施方式

为使得本发明的发明目的、特征、优点能够更加的明显和易懂，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而非全部实施例。基于本发明中的实施例，本领域技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

请参阅图1，图1为本发明实施例提供的网络图片请求应用场景示意图。终端设备100与服务器200通过无线网络或有线网络连接，终端设备100可以是包括手机、平板电脑、笔记本电脑等具有网络图片浏览功能的移动终端，也可以包括一体机、台式机、智能电视机等具有网络图片浏览功能的在内的终端。图1中的终端设备100以移动终端为例。用户通过终端设备100浏览网页，向服务器200请求加载网页上的图片，具体是在终端设备100中建立并维护一个串行请求队列，其中按照串行从头部到尾部排列一个或多个加载请求，加载请求用于请求加载待加载图片。串行请求队列中加载请求对应的待加载图片，按照在串行请求队列中加载请求的排列顺序单个加载，区别于并发批量加载多个待加载图片。每个待加载图片加载完毕后，经过设定的DOM节点的渲染，显示在终端设备100的网页界面上。

请参阅图2，图2为本发明第一实施例提供的网络图片加载方法的实现流程示意图，可应用于图1所示的终端设备100中，该方法主要包括以下步骤：

S201、建立待加载图片的串行请求队列，串行请求队列按照从头部到尾部的顺序排列加载请求；

在建立该串行请求队列之前，在网页的页面(具体为超文本标记语言(HTML)页面)中放置需要在用户通过浏览器浏览过程中进行加载的图片标签，例如：

<img src＝'占位图'data-src＝'待加载的图片地址'alt＝”/>

上述示例中也可以使用其他自定义的img标签或属性，获得与上述示例同样的效果。

具体地，建立待加载图片的串行请求队列是通过Javascript脚本建立该串行请求队列，并定义串行请求队列中的加载请求对应的待加载图片的数据结构，该数据结构包括：渲染图片的节点信息、待加载图片的链接地址、待加载图片的加载的超时标识(ID，identity)、待加载图片的开始加载的时间戳、待加载图片的加载状态以及该待加载图片的ID。在该串行请求队列中排列有一个或多个加载请求，在该加载请求中包含了待加载图片的数据结构。执行该加载请求即可加载该待加载图片。

具体实现方式是：该串行请求队列实现类型可以是数组、object等类型。

下面以数组和object组合类型示例：

该串行请求队列为一个数组：var queue＝[]；

该串行请求队列中每个元素(即待加载的图片)的数据结构为：

{

dom:”,//图片加载完成后，需要渲染图片的dom节点

src:"https://a.com/xxx.img",//待加载的图片链接地址

loadTime:0,//图片加载中的timeout ID

startTime:0,//图片开始加载的时间戳

status:'waiting',//图片加载状态

img:null//图片对象

}

其中，“图片加载完成后，需要渲染图片的dom节点”即为该渲染图片的节点信息；“待加载的图片链接地址”即为待加载图片的链接地址；“图片加载中的timeout ID”即为待加载图片的加载的超时标识；“图片开始加载的时间戳”即为待加载图片的开始加载的时间戳；“图片加载状态”即为待加载图片的加载状态；“图片对象”即为该待加载图片的ID，也即指出加载哪个图片。

需要说明的是，也可以将图片采用base64编码，或者其他编码方式通过异步加载的方式传输给页面，代替使用图片链接的方式实现图片加载。

进一步地，请参见图3，串行请求队列中加载待加载图片的加载请求，按照在串行请求队列中从头部到尾部的排列顺序，单个向连接网络请求加载对应的待加载图片。需要说明的是，串行队列可以有多个，参见图4，图4以3个串行请求队列为例，每个串行请求队列中的加载请求，都按照从串行请求队列的头部到尾部的顺序排列，逐个向连接网络请求加载对应的待加载图片。

进一步地，还需要定义加载超时的相关全局变量，具体可定义超时列表，用于存储加载超时的待加载图片的超时信息，如该待加载图片的ID、超时时间等；定义最小超时时间，当待加载图片的加载时间超过该最小超时时间，确认该待加载图片加载超时；定义最大超时时间，当待加载图片的加载时间超过该最大超时时间，确认不再执行加载请求以及不再加载该待加载图片，将其放入该超时列表。

具体实现方式如下：

var timeoutList＝[]；//超时的图片请求列表

var timeStep＝1500；//超时时间的最小值，单位毫秒

var maxTime＝timeStep*10；//最大的超时时间

其中，“超时的图片请求列表”即为该超时列表；“超时时间的最小值，单位毫秒”即为最小超时时间；“最大的超时时间”即为最大超时时间。

S202、监听网页中触发的网络图片加载事件；

监听HTML网页的网络图片加载事件，如对应的页面滚动等事件可作为加载HTML页面可视区域图片的触发因子。以监听页面滚动事件为例，当监听到预设的网页滚动事件，则确认触发网络图片加载事件。

S203、根据该网络图片加载事件，加载该串行请求队列头部的加载请求对应的待加载图片；

监听到网页中触发网络图片加载事件时，加载排列在串行请求队列头部的加载请求对应的待加载图片。

本发明各实施例中，加载请求对应的待加载图片，即为加载请求请求加载的待加载图片。

S204、在加载该串行请求队列头部的加载请求对应的待加载图片达到预设条件时，加载串行请求队列中下一个加载请求对应的待加载图片。

加载排列在该串行请求队列头部的加载请求对应的待加载图片，若加载达到预设条件，则跳过对串行请求队列头部的加载请求对应的待加载图片的加载，而加载串行请求队列中的下一个加载请求对应的待加载图片，可防止过长时间的等待加载该串行请求队列头部加载请求对应的待加载图片。

该下一个加载请求是在该串行请求队列中，排列在该当前加载请求之后的加载请求，以图3为例说明，串行请求队列中加载请求2即为加载请求1的下一个加载请求。

本发明实施例中，建立待加载图片的串行请求队列，每个串行请求队列按照从头部到尾部的顺序排列加载请求，当监听到网页中触发的网络图片加载事件，加载该串行请求队列头部的加载请求对应的待加载图片，并在当加载达到预设条件时，直接加载该串行请求队列中的下一个加载请求对应的待加载图片，避免了因为在短时间内触发的高并发请求导致的网络阻塞，减少了首张待加载图片的加载时间，并且防止了因图片加载时间过长导致网页的页面假死。

请参阅图5，图5为本发明第二实施例提供的网络图片加载方法的实现流程示意图，可应用于图1所示的终端设备中，主要包括以下步骤：

S301、建立待加载图片的串行请求队列，该串行请求队列按照从头部到尾部的顺序排列加载请求；

具体通过Javascript脚本建立该串行请求队列，并定义该串行请求队列中的加载请求对应的待加载图片的数据结构。

进一步地，还需要定义加载超时的相关全局变量，具体可定义超时列表，用于存储加载超时的待加载图片的超时信息；定义最小超时时间，当待加载图片的加载时间超过该最小超时时间，确认该待加载图片加载超时；定义最大超时时间，当待加载图片的加载时间超过该最大超时时间，确认不再执行加载请求以及不再加载该待加载图片，将其超时信息放入该超时列表。

S302、监听网页中触发的网络图片加载事件；

S303、根据该网络图片加载事件，获取该串行请求队列的状态；

当网页中触发了网络图片加载事件，判断当前串行请求队列是否为空。

当存在多个串行队列时，获取与该网络图片加载事件对应的待加载图片所在的串行请求队列的状态。

若该串行请求队列的状态不为空，则执行步骤S304；若该串行请求队列的状态为空，则执行步骤S305。

S304、若该串行请求队列的状态不为空，则将当前待加载图片的加载请求插入到该串行请求队列的尾部，并加载该串行请求队列头部的加载请求对应的待加载图片；

若该串行请求队列的状态不为空，则将当前准备加入该串行请求队列的新的待加载图片的请求，插入到该串行请求队列的尾部，加载位于该串行请求队列头部的加载请求请求加载的待加载图片，不影响原串行请求队列中加载图片请求的执行。

S305、若该串行请求队列的状态为空，则将该当前待加载图片的加载请求插入到该串行请求队列的头部，并加载插入该串行请求队列头部的加载请求对应的待加载图片；

若该串行请求队列的状态为空，则将加载该当前待加载图片的加载请求，也即把准备加入该串行请求队列的新的加载请求，插入到该串行请求队列的头部后，直接根据插入的该新的加载请求加载该当前待加载图片。

例如，若该串行请求队列的状态为空，则将新的加载请求，即加载图片A的加载请求，插入到该串行请求队列的头部，执行加载图片A。

S306、获取该串行请求队列头部的加载请求对应的待加载图片的加载时间；

需要说明的是，每次加载一个新的待加载图片，都会更新设置加载时间，每次更新后的加载时间是随着超时的待加载图片数量的增加而增加，减少而减少的。具体地，步骤S301中定义了超时列表，该超时列表用于放置加载消耗的时间超过当前设置的加载时间的待加载图片的超时信息，例如，该待加载图片的ID和超时时间。确认在该超时列表中的待加载图片数量，即确认当前超过当前设置的加载时间的待加载图片数量，并根据预设的最小超时时间与该处于超时状态的待加载图片的数量，更新设置当前待加载图片的加载时间。

更具体地，将预设的最小超时时间，与该处于超时状态的待加载图片的数量的乘积，作为更新后的当前待加载图片的加载时间。例如：最小超时时间为1.5秒，超时队列中有2个加载处于超时状态的待加载图片的信息，则设置本次加载时间(也即加载当前待加载图片的加载时间)为：2*1.5秒＝3秒。

还可以是：将预设的最小超时时间、该处于超时状态的待加载图片的数量以及超时时间的权重值的乘积，作为更新后的当前待加载图片的加载时间，该超时时间的权重值是预先设置的，超时时间越长，权重值越大，计算出的当前待加载图片的加载时间约长。例如，超时3秒之内权重值为1，超时6秒之内权重值为2。

进一步地，判断超时列表中记录的处于超时状态的待加载图片的加载时间，是否已经超过步骤S301中预设(也即预定义)的最大超时时间，若已经超过该最大超时时间，则取消加载超过该最大超时时间的待加载图片的加载请求。

需要说明的是，串行请求队列中加载第一张待加载图片的超时时间的确认是以步骤S301中设置的最小超时时间为准的，即，超过该最小超时时间，则确认第一个待加载图片超时，将其超时信息插入该超时列表中，从加载第二张待加载图片时，按照前述的根据超时列表中记录的处于超时状态的待加载图片的数量和最小超时时间为依据，更新当前加载的待加载图片的超时时间。

S307、若该串行请求队列头部的加载请求对应的待加载图片的加载时间，超过当前设置的加载时间，则跳过加载串行请求队列头部的加载请求对应的待加载图片，加载串行请求队列中下一个加载请求对应的待加载图片，并将串行请求队列头部的加载请求对应的待加载图片的超时信息加入预设的超时列表。

另一方面，监听图片加载完成事件，若监听到该串行请求队列头部的加载请求对应的待加载图片加载完成，则清除该串行请求队列头部的加载请求对应的待加载图片的加载时间，并将该串行请求队列头部的待加载图片的加载请求从该串行请求队列中移除。

上述内容中，判断该串行请求队列头部的加载请求对应的待加载图片的加载时间，是否超过当前设置的加载时间，若超过，则取消加载串行请求队列头部的加载请求对应的待加载图片，加载串行请求队列中下一个加载请求对应的待加载图片，并将串行请求队列头部的加载请求对应的待加载图片的ID、超时时间等超时信息加入超时列表，以及，监听图片加载完成事件，若监听到该串行请求队列头部的加载请求对应的待加载图片加载完成，则清除该串行请求队列头部的加载请求对应的待加载图片的加载时间，并将该串行请求队列头部的加载请求从该串行请求队列中移除。

进一步地，当前的待加载图片完成加载，或，超时信息被插入到超时列表后，获取该串行请求队列的状态，若该串行请求队列的状态不为空，则再次触发该串行请求队列头部的加载请求。例如，该串行请求队列中第一个加载请求是加载图片A，第二个加载请求是加载图片B。当图片A加载完成或加载超时，图片A对应的加载请求被从队列中移除后，图片B的加载请求成为当前该串行请求队列头部的加载请求。此时，再次出发的加载请求是加载图片B。若为空，则等待下一次网页中触发网络图片加载事件。

以上内容通过设置checkQueue方法来实现。

具体地，当该串行请求队列头部的加载请求对应的待加载图片的加载时间超过当前设置的加载时间，或，监听到该串行请求队列头部的加载请求对应的待加载图片加载完成，则触发checkQueue方法，清除串行请求队列头部的加载请求对应的待加载图片对应的加载时间，并将该串行请求队列头部的加载请求移除。通过checkQueue获取参数status对应的值，若status对应的值为“超时”，则确认该串行请求队列头部的加载请求对应的待加载图片的加载时间，超过当前设置的加载时间。

进一步地，若该串行请求队列头部的加载请求对应的待加载图片的加载时间未超过当前设置的加载时间，即，当前加载状态为不超时，则继续加载该当前待加载图片。

进一步地，当该串行请求队列中每个加载请求对应的待加载图片加载完成后，触发onload事件，并将加载完成的图片逐个渲染至页面中。由于通过串行请求队列控制了各待加载图片的加载顺序，避免了页面因为图片加载顺序不一导致的上下抖动。

一个实例中，用户打开终端设备中的浏览器，请求加载当前页面中的图片，建立待加载图片的串行请求队列，并获取预先定义的串行请求队列中各加载请求对应的待加载图片的结构，数据结构包括：渲染图片的节点信息、待加载图片的链接地址、待加载图片的加载的超时ID、待加载图片的开始加载的时间戳、待加载图片的加载状态以及该待加载图片的ID。还需要定义加载超时的相关全局变量，具体可定义超时列表，用于存储超时的待加载图片的信息；定义最小超时时间，当待加载图片的加载时间超过该最小超时时间，确认该待加载图片加载超时；定义最大超时时间，当待加载图片的加载时间超过该最大超时时间，确认不再执行加载请求以及不再加载该待加载图片，将其放入该超时列表。

进一步地，当监听到网页中触发了网络图片加载事件，判断该串行请求队列的状态是否为空，若该串行请求队列的状态不为空，则将加载图片A的请求插入到该串行请求队列的尾部，并加载该串行请求队列头部的加载请求对应的待加载图片，若该串行请求队列的状态为空，则将加载图片A的请求插入到该串行请求队列的头部，并加载图片A。当图片A的加载请求排列在该串行请求队列的头部时，加载图片A，此时图片A的当前设置的加载时间可通过确认超时列表中记载的处于超时状态的待加载图片的数量进行确认。若此时超时列表中有处于超时状态的3个待加载图片，则将预先定义的最小超时时间1.5秒乘以3等于4.5秒，将4.5秒作为加载图片A的当前超时时间。

若图片A的加载时间超过4.5秒，则确认图片A加载超时，将图片A的超时信息插入超时列表，并跳过串行请求队列中图片A的加载请求，执行串行请求队列中排列在图片A的加载请求之后的下一个加载请求，即执行待加载图片B的加载请求，并将图片A的加载时间消除，取消图片A的加载请求在串行请求队列中的头部位置，将图片A的ID和加载时间记录在超时列表中。

若图片A的加载时间未超过4.5秒，则继续加载图片A。

若图片A在4.5秒之内完成加载，则将图片A的加载时间消除，取消图片A的加载请求在串行请求队列中的头部位置，通过预先定义的DOM节点渲染图片A后显示在终端设备的界面上。判断该串行请求队列是否为空，若为空，则等待下一次触发网络图片加载事件，若不为空，则加载下一个加载请求排在串行请求队列头部的待加载图片。

本发明实施例中，建立待加载图片的串行请求队列，每个串行请求队列按照从头部到尾部的顺序排列加载请求，当监听到网页中触发网络图片加载事件时，加载该串行请求队列头部的加载请求对应的待加载图片，并在加载达到预设条件时，直接加载该串行请求队列中下一个加载请求对应的待加载图片，避免了因为在短时间内触发的高并发请求导致的网络阻塞，减少了首张待加载图片的加载时间，并且防止了因图片加载时间过长导致网页的页面假死。

请参阅图6，图6是本发明第三实施例提供的一种网络图片加载装置的结构示意图，为了便于说明，仅示出了与本发明实施例相关的部分。图6示例的网络图片加载装置可以是前述图2和图5所示实施例提供的网络图片加载方法中的终端设备。图6示例的网络图片加载装置包括：

建立模块401，用于建立待加载图片的串行请求队列，该串行请求队列按照从头部到尾部的顺序排列加载请求；

监听模块402，用于监听网页中触发的网络图片加载事件；

加载模块403，用于根据该网络图片加载事件，加载该串行请求队列头部的加载请求对应的待加载图片；

加载模块403，还用于若加载该串行请求队列头部的加载请求对应的待加载图片达到该预设条件时，加载该串行请求队列中下一个加载请求对应的待加载图片。

本实施例未尽之细节，请参阅前述图2、图5所示实施例的描述，此处不再赘述。

本发明实施例中，建立待加载图片的串行请求队列，每个串行请求队列按照从头部到尾部的顺序排列加载请求，当监听到网页中触发的网络图片加载事件时，加载该串行请求队列头部的加载请求对应的待加载图片，并在加载达到预设条件时，直接加载该串行请求队列中下一个加载请求对应的待加载图片，避免了因为在短时间内触发的高并发请求导致的网络阻塞，减少了首张待加载图片的加载时间，并且防止了因图片加载时间过长导致网页的页面假死。

请参阅图7，图7是本发明第三实施例提供的一种网络图片加载装置的结构示意图，图7示例的网络图片加载装置可以是前述图2和图5所示实施例提供的网络图片加载方法中的终端设备，图7所示的网络图片加载装置与图6所示的网络图片加载装置不同之处在于：

进一步地，该装置还包括：获取模块501。

获取模块501，用于获取串行请求队列头部的加载请求对应的待加载图片的加载时间；

加载模块403包括：

第一加载子模块4031，用于若加载时间超过当前设置的加载时间，则跳过加载该串行请求队列头部的加载请求对应的待加载图片，加载该串行请求队列中下一个加载请求对应的待加载图片；

记录子模块4032，用于将该串行请求队列头部的加载请求对应的待加载图片的超时信息加入预设的超时列表。

进一步地，获取模块501，还用于获取该超时列表中处于超时状态的待加载图片的数量。

该装置还可以进一步包括：

更新模块502，用于根据预设的最小超时时间与该处于超时状态的待加载图片的数量，更新设置该加载时间。

更新模块502，具体用于将该预设的最小超时时间，与该处于超时状态的待加载图片的数量的乘积，作为该串行请求队列头部的加载请求对应的待加载图片更新后的加载时间。

获取模块501，还用于获取处于超时状态的待加载图片的加载时间；

加载模块403，还用于若在处于超时状态的待加载图片的加载时间已经超过预设的最大超时时间的条件下，取消加载超过该最大超时时间的待加载图片的加载请求。

加载模块403还包括：

获取子模块4033，用于根据该网络图片加载事件，获取该串行请求队列的状态；

第二加载子模块4034，用于若该串行请求队列的状态不为空，则将当前待加载图片的加载请求插入到该串行请求队列的尾部，并加载该串行请求队列头部的加载请求对应的待加载图片；若该串行请求队列的状态为空，则将该当前待加载图片的加载请求插入到该串行请求队列的头部，并加载插入该串行请求队列头部的加载请求对应的待加载图片。

加载模块403，还用于获取该待加载图片的加载状态，在待加载图片加载完成的条件下，清除该串行请求队列头部的加载请求对应的待加载图片的加载时间，并将该串行请求队列头部的加载请求从该串行请求队列中移除；

获取模块501，还用于获取该串行请求队列的状态；

若该串行请求队列的状态不为空，则再次触发该串行请求队列头部的加载请求；

若该串行请求队列的状态为空，则等待下一次网页中触发网络图片加载事件。

建立模块401具体用于，通过Javascript脚本建立该串行请求队列，并定义该串行请求队列中的加载请求对应的待加载图片的数据结构，也即定义该串行请求队列中的加载请求请求加载的待加载图片的数据结构，该数据结构包括：渲染图片的节点信息、待加载图片的链接地址、加载的超时标识、开始加载的时间戳、加载状态以及该待加载图片。

本实施例未尽之细节，请参阅前述图2至图6所示实施例的描述，此处不再赘述。

需要说明的是，以上图7示例的网络图片加载装置的实施方式中，各功能模块的划分仅是举例说明，实际应用中可以根据需要，例如相应硬件的配置要求或者软件的实现的便利考虑，而将上述功能分配由不同的功能模块完成，即将网络图片加载装置的内部结构划分成不同的功能模块，以完成以上描述的全部或者部分功能。而且，实际应用中，本实施例中的相应的功能模块可以是由相应的硬件实现，也可以由相应的硬件执行相应的软件完成。本说明书提供的各个实施例都可应用上述描述原则，以下不再赘述。

本发明实施例中，建立待加载图片的串行请求队列，每个串行请求按照从头部到尾部的顺序排列加载请求，当监听到网页中触发网络图片加载事件时，加载该串行请求队列头部的加载请求对应的待加载图片，并在加载达到预设条件时，直接加载该串行请求队列中下一个加载请求对应的待加载图片，避免了因为在短时间内触发的高并发请求导致的网络阻塞，减少了首张待加载图片的加载时间，并且防止了因图片加载时间过长导致网页的页面假死。

图8为本发明实施例提供的执行网络图片加载方法的终端设备结构示意图。

本实施例中所描述的终端设备，包括：

至少一个输入设备61；至少一个输出设备62；至少一个处理器63，例如中央处理器；以及，存储器64。

上述输入设备61、输出设备62、处理器63和存储器64通过总线65连接。

其中，输入设备61具体可为摄像头、触控面板、物理按键或者鼠标等等。输出设备62具体可为显示屏。

存储器64可以是高速随机存取记忆体(RAM，Random Access Memory)存储器，也可为非不稳定的存储器(non-volatile memory)，例如磁盘存储器。存储器64用于存储一组可执行程序代码，处理器63与存储器64耦合，上述输入设备61、输出设备62和处理器63用于通过存储器64中存储的可执行程序代码，执行如下操作：

通过处理器63执行该代码，执行如前述图2和图5所示实施例中描述的网络图片加载方法。

进一步地，本申请实施例还提供了一种计算机可读存储介质，该计算机可读存储介质可以是设置于上述各实施例中的终端设备中，该计算机可读存储介质可以是前述图8所示实施例中的存储器。该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器执行时实现前述图2、图5所示实施例中描述的网络图片加载方法。进一步地，该计算机可存储介质还可以是U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、RAM、磁碟或者光盘等各种可以存储程序代码的介质

在本申请所提供的多个实施例中，应该理解到，所揭露的方法、装置和终端设备，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述模块的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个模块或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信链接可以是通过一些接口，装置或模块的间接耦合或通信链接，可以是电性，机械或其它的形式。

所述作为分离部件说明的模块可以是或者也可以不是物理上分开的，作为模块显示的部件可以是或者也可以不是物理模块，即可以位于一个地方，或者也可以分布到多个网络模块上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。

另外，在本发明各个实施例中的各功能模块可以集成在一个处理模块中，也可以是各个模块单独物理存在，也可以两个或两个以上模块集成在一个模块中。上述集成的模块既可以采用硬件的形式实现，也可以采用软件功能模块的形式实现。

所述集成的模块如果以软件功能模块的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-OnlyMemory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。

需要说明的是，对于前述的各方法实施例，为了简便描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本发明并不受所描述的动作顺序的限制，因为依据本发明，某些步骤可以采用其它顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作和模块并不一定都是本发明所必须的。

在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其它实施例的相关描述。

以上为对本发明所提供的网络图片加载方法、装置、终端设备及计算机可读存储介质的描述，对于本领域的技术人员，依据本发明实施例的思想，在具体实施方式及应用范围上均会有改变之处，综上，本说明书内容不应理解为对本发明的限制。

Claims (8)

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

建立待加载图片的串行请求队列，所述串行请求队列按照从头部到尾部的顺序排列加载请求；

监听网页中触发的网络图片加载事件；

当监听到网页中触发所述网络图片加载事件时，加载所述串行请求队列头部的加载请求对应的待加载图片；

获取所述串行请求队列头部的加载请求对应的待加载图片的加载时间；

若所述加载时间超过当前设置的加载时间，则跳过加载所述串行请求队列头部的加载请求对应的待加载图片，加载所述串行请求队列中下一个加载请求对应的待加载图片，并将所述串行请求队列头部的加载请求对应的待加载图片的超时信息加入预设的超时列表；所述当前设置的加载时间为预设的最小超时时间、所述超时列表中处于超时状态的待加载图片的数量以及预设的超时时间的权重值之间的乘积，所述预设的超时时间的权重值与超时时间正相关；

获取所述超时列表中处于超时状态的待加载图片的加载时间；

在所述处于超时状态的待加载图片的加载时间已经超过预设的最大超时时间的条件下，取消加载超过所述最大超时时间的待加载图片的加载请求。

2.根据权利要求1所述的方法，其特征在于，所述当监听到网页中触发所述网络图片加载事件时，加载所述串行请求队列头部的加载请求对应的待加载图片包括：

根据所述网络图片加载事件，获取所述串行请求队列的状态；

若所述串行请求队列的状态不为空，则将当前待加载图片的加载请求插入到所述串行请求队列的尾部，并加载所述串行请求队列头部的加载请求对应的待加载图片；

若所述串行请求队列的状态为空，则将所述当前待加载图片的加载请求插入到所述串行请求队列的头部，并加载插入所述串行请求队列头部的加载请求对应的待加载图片。

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

获取所述待加载图片的加载状态，在所述待加载图片加载完成的条件下，清除所述串行请求队列头部的加载请求对应的待加载图片的加载时间，将所述串行请求队列头部的加载请求从所述串行请求队列中移除；

获取所述串行请求队列的状态；

若所述串行请求队列的状态不为空，则再次触发所述串行请求队列头部的加载请求；

若所述串行请求队列的状态为空，则等待下一次网页中触发网络图片加载事件。

4.根据权利要求1所述的方法，其特征在于，所述建立待加载图片的串行请求队列包括：

通过Javascript脚本建立所述串行请求队列，并定义所述串行请求队列中的加载请求对应的待加载图片的数据结构，所述数据结构包括：渲染图片的节点信息、待加载图片的链接地址、加载的超时标识、开始加载的时间戳、加载状态以及所述待加载图片。

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

建立模块，用于建立待加载图片的串行请求队列，所述串行请求队列按照从头部到尾部的顺序排列加载请求；

监听模块，用于监听网页中触发的网络图片加载事件；

加载模块，用于当监听到网页中触发所述网络图片加载事件时，加载所述串行请求队列头部的加载请求对应的待加载图片；

获取模块，用于获取所述串行请求队列头部的加载请求对应的待加载图片的加载时间；

所述加载模块，还用于在所述加载时间超过当前设置的加载时间，跳过加载所述串行请求队列头部的加载请求对应的待加载图片，加载所述串行请求队列中下一个加载请求对应的待加载图片，并将所述串行请求队列头部的加载请求对应的待加载图片的超时信息加入预设的超时列表；所述当前设置的加载时间为预设的最小超时时间、所述超时列表中处于超时状态的待加载图片的数量以及预设的超时时间的权重值之间的乘积，所述预设的超时时间的权重值与超时时间正相关；

所述获取模块，还用于获取所述超时列表中处于超时状态的待加载图片的加载时间；

所述加载模块，还用于在所述处于超时状态的待加载图片的加载时间已经超过预设的最大超时时间的条件下，取消加载超过所述最大超时时间的待加载图片的加载请求。

6.根据权利要求5所述的装置，其特征在于，所述加载模块还包括：

获取子模块，用于根据所述网络图片加载事件，获取所述串行请求队列的状态；

第二加载子模块，用于若所述串行请求队列的状态不为空，则将当前待加载图片的加载请求插入到所述串行请求队列的尾部，并加载所述串行请求队列头部的加载请求对应的待加载图片，若所述串行请求队列的状态为空，则将所述当前待加载图片的加载请求插入到所述串行请求队列的头部，并加载插入所述串行请求队列头部的加载请求对应的待加载图片。

7.一种终端设备，其特征在于，包括存储器，处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现如权利要求1至4任一项所述的网络图片加载方法。

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