CN110929191A

CN110929191A - 一种图片加载方法、装置、终端及存储介质

Info

Publication number: CN110929191A
Application number: CN201911024164.7A
Authority: CN
Inventors: 李玲; 周成
Original assignee: Beijing City Network Neighbor Technology Co Ltd
Current assignee: Beijing Urban Network Neighbor Information Technology Co Ltd; Beijing City Network Neighbor Technology Co Ltd
Priority date: 2019-10-25
Filing date: 2019-10-25
Publication date: 2020-03-27

Abstract

本申请提供了一种图片加载方法、装置、终端及存储介质，该方法包括：确定当前页面中图片位置的第一加载状态；在当前页面中图片位置的第一加载状态为未加载状态时，向服务器请求当前页面中图片位置对应的待加载图片；在当前页面中图片位置的第一加载状态为已加载状态时，触发加载load事件以确定当前页面中图片位置的第二加载状态；在当前页面中图片位置的第二加载状态为图片加载失败时，触发错误error事件以重新加载待加载图片。可见，通过本申请实施例提供的技术方案，在当前页面中图片位置的图片加载失败时，终端可以自动重新加载待加载图片，从而不用用户手动刷新页面，进而提高了用户浏览页面时的流畅体验。

Description

一种图片加载方法、装置、终端及存储介质

技术领域

本申请涉及网络技术领域，特别是涉及一种图片加载方法、装置及终端。

背景技术

用户在浏览网页或者使用应用软件时，页面上显示的内容除了包括文本信息，通常还包括图片等多媒体信息。

相对于文字信息而言，加载页面中的图片会消耗更多的流量和系统资源，因此，图片加载失败的概率较大。

相关技术中，在图片加载失败时，终端无法重新加载图片，若用户需要查看未成功加载的照片，需要手动刷新页面，从而影响用户浏览页面时的流畅体验。

发明内容

为解决上述技术问题，本申请示出了一种图片加载方法、装置及终端。

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

确定当前页面中图片位置的第一加载状态，所述第一加载状态包括：已加载状态和未加载状态；

在所述当前页面中图片位置的第一加载状态为未加载状态时，向服务器请求所述当前页面中图片位置对应的待加载图片；

在所述当前页面中图片位置的第一加载状态为已加载状态时，触发加载load事件以确定所述当前页面中图片位置的第二加载状态，所述第二加载状态包括：图片加载成功和图片加载失败；

在所述当前页面中图片位置的第二加载状态为图片加载失败时，触发错误error事件以重新加载所述待加载图片。

可选的，在所述当前页面中图片位置的第二加载状态为图片加载成功时，所述方法还包括：

将位于所述当前页面中图片位置的图片设置为背景图片，以通过层叠样式表CSS对所述当前页面中图片位置的图片进行操作；

删除所述load事件和所述error事件。

可选的，所述确定当前页面中图片位置的第一加载状态，包括：

确定当前页面的目标图片元素的被加载loaded属性的属性值，所述目标图片元素为：所述当前页面的文档对象类型DOM元素中包括的图片元素；

如果所述属性值为第一属性值，确定所述当前页面中图片位置的第一加载状态为已加载状态，所述第一属性值用于表征图片元素已被加载；

如果所述属性值为第二属性值，确定所述当前页面中图片位置的第一加载状态为未加载状态，所述第二属性值用于表征图片元素未被加载。

可选的，所述待加载图片设置有重新加载标识；所述方法还包括：

在重新加载所述待加载图片的过程中，将所述重新加载标识赋值为：目标标识，所述目标标识用于表征所述待加载图片正在被重新加载。

可选的，所述方法还包括：

监控所述待加载图片被重新加载的次数是否大于预设次数；

如果所述待加载图片被重新加载的加载次数大于所述预设次数，停止重新加载所述待加载图片。

可选的，所述方法还包括：

接收页面滑动操作；

响应于所述页面滑动操作，获取页面索引；

将具有所述页面索引的页面确定为当前页面。

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

第一加载状态确定模块，用于确定当前页面中图片位置的第一加载状态，所述第一加载状态包括：已加载状态和未加载状态；

待加载图片请求模块，用于在所述当前页面中图片位置的第一加载状态为未加载状态时，向服务器请求所述当前页面中图片位置对应的待加载图片；

第二加载状态确定模块，用于在所述当前页面中图片位置的第一加载状态为已加载状态时，触发加载load事件以确定所述当前页面中图片位置的第二加载状态，所述第二加载状态包括：图片加载成功和图片加载失败；

图片加载模块，用于在所述当前页面中图片位置的第二加载状态为图片加载失败时，触发错误error事件以重新加载所述待加载图片。

可选的，所述装置还包括：

背景图片设置模块，用于在所述当前页面中图片位置的第二加载状态为图片加载成功时，将位于所述当前页面中图片位置的图片设置为背景图片，以通过层叠样式表CSS对所述当前页面中图片位置的图片进行操作；

事件删除模块，用于删除所述load事件和所述error事件。

可选的，所述第一加载状态确定模块，具体用于：

可选的，所述待加载图片设置有：重新加载标识；所述装置还包括：

标识确定模块，用于在对所述待加载图片执行error事件时，将所述待加载图片的重新加载标识赋值为：目标标识，所述目标标识用于表征所述待加载图片正在被重新加载。

可选的，所述装置还包括：

加载次数确定模块，用于监控待加载图片被重新加载的次数是否大于预设次数；

图片停止加载模块，用于如果所述加载次数确定模块监控到所述待加载图片被重新加载的次数大于预设次数，停止重新加载所述待加载图片。

可选的，所述装置还包括：

滑动操作接收模块，用于接收页面滑动操作；

页面索引获取模块，用于响应于所述页面滑动操作，获取页面索引；

当前页面确定模块，用于将具有所述页面索引的页面确定为当前页面。

第三方面，本申请实施例提供了一种终端，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现第一方面所述的图片加载方法的步骤。

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

本申请实施例提供的技术方案，终端确定当前页面中图片位置的第一加载状态，在当前页面中图片位置的第一加载状态为未加载状态时，向服务器请求当前页面中图片位置对应的待加载图片；并触发加载load事件，以确定当前页面中图片位置的第二加载状态，在当前页面中图片位置的第二加载状态为图片加载失败时，触发错误error事件以重新加载待加载图片。可见，通过本申请实施例提供的技术方案，在当前页面中图片位置的图片加载失败时，终端可以自动重新加载待加载图片，从而不用用户手动刷新页面，进而提高了用户浏览页面时的流畅体验。

附图说明

图1是本申请实施例提供的一种图片加载方法的步骤流程图；

图2是本申请实施例提供的另一种图片加载方法的步骤流程图；

图3是本申请实施例提供的一种图片加载装置的结构框图；

图4是本申请实施例提供的一种终端的结构框图。

具体实施方式

为使本申请的上述目的、特征和优点能够更加明显易懂，下面结合附图和具体实施方式对本申请作进一步详细的说明。

为了解决背景技术中存在的技术问题，本申请实施例提供了一种图片加载方法、装置、终端及存储介质。

第一方面，首先对本申请实施例所提供的一种图片加载方法进行介绍。

参照图1，示出了本申请的一种图片加载方法的步骤流程图，具体可以包括如下步骤：

S110，确定当前页面中图片位置的第一加载状态。

其中，第一加载状态包括：已加载状态和未加载状态。

可以理解的是，在实际应用中，如果当前页面中图片位置的第一加载状态为已加载状态时，终端不需要再次加载图片。如果当前页面中图片位置的第一加载状态为未加载状态时，那么，终端需要加载图片，以使得当前页面的图片位置显示图片。因此，终端在加载图片之前，要确定当前页面中图片的第一加载状态。

在一种实施方式中，确定当前页面中图片位置的第一加载状态，可以包括如下3个步骤，分别为a1至a3：

a1，确定当前页面的目标图片元素的被加载的属性值，目标图片元素为：当前页面的文档对象类型DOM元素中包括的图片元素。

具体的，当前页面的文档对象类型DOM元素中，可以包括图片元素和文本元素。对于每个图片元素而言，可以为该图片元素添加一个loaded属性，该loaded属性可以有不同的属性值，不同的属性值可以用于标志图片是否被加载过。例如，loaded属性的属性值可以为true或者false。true表示当前页面中图片的第一加载状态为已记载状态。false表示当前页面中图片的第一加载状态为未加载状态。其中，loaded属性的属性值可以根据实际情况进行设定，本发明实施例对此不做具体限定。

a2，如果属性值为第一属性值，确定当前页面中图片位置的第一加载状态为已加载状态，第一属性值用于表征图片元素已被加载。

如果loaded属性的属性值为第一属性值，如true，说明当前页面中图片位置的第一加载状态为已加载状态。

a3，如果属性值为第二属性值，确定当前页面中图片位置的第一加载状态为未加载状态，第二属性值用于表征图片元素未被加载。

如果loaded属性的属性值为第二属性值，如false，说明当前页面中图片位置的第一加载状态为未加载状态。可以理解的是，loaded属性的属性值默认为false。

S120，在当前页面中图片位置的第一加载状态为未加载状态时，向服务器请求当前页面图片位置对应的待加载图片。

在当前页面中图片位置的第一加载状态为未加载状态时，说明终端需要加载当前页面中图片位置对应待加载图片，因此，终端向服务器请求当前页面图片位置对应的待加载图片。

S130，在当前页面中图片位置的第一加载状态为已加载状态时，触发加载load事件以确定当前页面中图片位置的第二加载状态。

其中，第二加载状态包括：图片加载成功和图片加载失败。

终端可以为待加载图片设置load事件。为了能够确定当前页面中图片位置的图片是否加载成功，终端可以触发load事件，以确定当前页面中图片位置的第二加载状态。可以理解的是，在第二加载状态为图片加载成功时，说明当前页面中图片位置的图片加载成功。在第二加载状态为图片加载失败时，说明当前页面中图片位置的图片加载失败。。

S140，在当前页面中图片位置的第二加载状态为图片加载失败时，触发错误error事件以重新加载待加载图片。

在当前页面中图片位置的第二加载状态为图片记载失败时，说明当前页面中图片位置的图片加载失败，需要重新加载当前页面中图片位置对应的待加载图片，因此，触发error事件以重新该待加载图片。

并且，在一种实施方式中，待加载图片设置可以有：重新加载标识。

此时，图片加载方法还可以包括：

在对待加载图片执行error事件时，将待加载图片的重新加载标识赋值为：目标标识，目标标识用于表征待加载图片正在被重新加载。

具体的，当待加载图片的重新加载标识赋值为：目标标识，如true，终端可以确定其正在对待加载图片进行重新加载，这样，可以防止终端重复执行error事件。

另外，在实际应用中，可能因为网络质量不高而导致待加载图片反复失败，在这种情况下，如果终端反复执行error事件，即反复加载待加载图片，会进一步降低网络质量，因此，在一种实施方式中，该图片加载方法还可以包括：

监控待加载图片被重新加载的次数是否大于预设次数；

如果待加载图片被重新加载的次数大于预设次数，停止重新加载待加载图片。

在该实施方式中，终端可以监控待加载图片被重新加载的次数是否大于预设次数，该预设次数可以为3次，当然，本发明实施例对预设次数不做具体限定。在监控到待加载图片被重新加载的次数大于预设次数时，停止重新加载待加载图片。

由于使用img标签对图片进行操作时，会造成图片压缩变形等问题，因此，在一种实施方式中，在图1所示实施例的基础上，在当前页面中图片位置的第二加载状态为图片加载成功时，时，如图2所示，该图片加载方法还可以包括：

S150，将位于当前页面中图片位置的图片设置为背景图片，以通过层叠样式表CSS对当前页面中图片位置的图片进行操作。

终端在成功加载位于当前页面中图片位置的图片之后，可以将位于当前页面中图片位置的图片设置为背景图片，这样终端可以通过层叠样式表CSS对当前页面中图片位置的图片进行操作。例如，终端可以采用CSS的bakground对当前页面中图片位置的图片尺寸进行设置，从而可以避免使用img标签造成当前页面中图片位置的图片压缩变形。

S160，删除load事件和error事件。

在当前页面中图片位置的第二加载状态为图片加载成功时，终端不需要再加载当前页面中图片位置对应的待加载图片，因此，终端可以删除待加载图片的load事件和error事件。

本申请实施例提供的技术方案，终端确定当前页面中图片位置的第一加载状态，在当前页面中图片位置的第一加载状态为未加载状态时，向服务器请求当前页面中图片位置对应的待加载图片；并触发加载load事件，以确定当前页面中图片位置的第二加载状态，在当前页面中图片位置的第二加载状态为图片加载失败时，触发错误error事件以重新加载待加载图片。并且，在当前页面中图片位置的第二加载状态为图片加载成功时，将当前页面中图片位置的图片设置为背景图片。可见，通过本申请实施例提供的技术方案，在当前页面中图片位置的图片加载失败时，终端可以自动重新加载待加载图片，从而不用用户手动刷新页面，进而提高了用户浏览页面时的流畅体验。并且，可以避免使用img标签造成当前页面中图片位置的图片压缩变形。

并且，在实际应用中，如果需要加载的图片较多时，可以将图片进行分屏显示，即将图片加载到不同的页面中。例如，假如一共有30张图片，可以将30张图片分加载到三个不同的页面，第一页面可以加载10张图片，第二页面可以加载另外10张图片，第三页面可以加载剩下的10张图片。

因此，在图1所示实施例的基础上，该图片加载方法可以包括如下步骤：

b1，接收页面滑动操作。

当图片被加载到不同页面时，用户可以通过滑动操作来查看不同页面所加载的图片，当用户执行页面滑动操作时，终端即接收到页面滑动操作。其中，页面滑动操作可以是：向左滑动页面，向右滑动页面，向上滑动页面，以及向下滑动页面等，本申请实施例对页面滑动操作不做具体限定。

b2，响应于页面滑动操作，获取页面索引。

终端在接收到页面滑动操作后，可以响应于页面滑动操作，并获取滑动后页面的页面索引。

举例而言，Swiper是滑动插件特效，可以用Swiper.slides[Swiper.activeIndex]表示页面的页面索引。Swiper.slides[0]表示页面索引为0，可以表示第一个页面。Swiper.slides[1]表示页面索引为1，可以表示第二个页面。Swiper.slides[2]表示页面索引为2，可以表示第三个页面。

b3，将具有该页面索引的页面确定为当前页面。

终端在获取到该页面索引后，可以将具有该页面索引的页面确定为当前页面。并可以执行图1所示实施例的步骤。

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

第二方面，对本申请实施例所提供的一种图片加载装置进行介绍。

参照图3，示出了本申请的一种图片加载装置的结构框图，该装置具体可以包括如下模块：

第一加载状态确定模块310，用于确定当前页面中图片位置的第一加载状态，所述第一加载状态包括：已加载状态和未加载状态；

待加载图片请求模块320，用于在所述当前页面中图片位置的第一加载状态为未加载状态时，向服务器请求所述当前页面中图片位置对应的待加载图片；

第二加载状态确定模块330，用于在所述当前页面中图片位置的第一加载状态为已加载状态时，触发加载load事件以确定所述当前页面中图片位置的第二加载状态，所述第二加载状态包括：图片加载成功和图片加载失败；

图片加载模块340，用于在所述当前页面中图片位置的第二加载状态为图片加载失败时，触发错误error事件以重新加载所述待加载图片。

可选的，所述装置还包括：

事件删除模块，用于删除所述load事件和所述error事件。

可选的，所述第一加载状态确定模块，具体用于：

可选的，所述装置还包括：

滑动操作接收模块，用于接收页面滑动操作；

第三方面，本申请实施例提供了一种终端，如图4所示，包括存储器410、处理器420及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现第一方面所述的图片加载方法的步骤。

本申请实施例提供的技术方案，终端确定当前页面中图片的第一加载状态，在当前页面中图片的第一加载状态为未加载状态时，向服务器请求当前页面对应的待加载图片；并监听待加载图片的加载load事件和错误error事件，load事件用于表征待加载图片的第二加载状态，第二加载状态包括：图片加载成功和图片加载失败，error事件用于在待加载图片的加载状态为图片加载失败时，触发重新加载待加载图片；在待加载图片的第二加载状态为图片加载失败时，对待加载图片执行error事件，以重新加载待加载图片。可见，通过本申请实施例提供的技术方案，在待加载图片加载失败时，终端可以自动重新加载该待加载图片，从而不用用户手动刷新页面，进而提高了用户浏览页面时的流畅体验。

对于装置实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。

本领域内的技术人员应明白，本申请的实施例可提供为方法、装置、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本申请是参照根据本申请的方法、终端设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理终端设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理终端设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理终端设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理终端设备上，使得在计算机或其他可编程终端设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程终端设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

尽管已描述了本申请的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例做出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本申请范围的所有变更和修改。

最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者终端设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者终端设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者终端设备中还存在另外的相同要素。

以上对本申请所提供的一种图片加载方法和一种图片加载装置，进行了详细介绍，本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想；同时，对于本领域的一般技术人员，依据本申请的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本申请的限制。

Claims

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

2.根据权利要求1所述的方法，其特征在于，在所述当前页面中图片位置的第二加载状态为图片加载成功时，所述方法还包括：

删除所述load事件和所述error事件。

3.根据权利要求1所述的方法，其特征在于，所述确定当前页面中图片位置的第一加载状态，包括：

4.根据权利要求1至3任一项所述的方法，其特征在于，所述待加载图片设置有重新加载标识；所述方法还包括：

5.根据权利要求1至3任一项所述的方法，其特征在于，所述方法还包括：

监控所述待加载图片被重新加载的次数是否大于预设次数；

6.根据权利要求1至3任一项所述的方法，其特征在于，所述方法还包括：

接收页面滑动操作；

响应于所述页面滑动操作，获取页面索引；

将具有所述页面索引的页面确定为当前页面。

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

8.根据权利要求7所述的装置，其特征在于，所述装置还包括：

事件删除模块，用于删除所述load事件和所述error事件。

9.根据权利要求7所述的装置，其特征在于，所述第一加载状态确定模块，具体用于：

10.根据权利要求7至9任一项所述的装置，其特征在于，所述待加载图片设置有：重新加载标识；所述装置还包括：

11.根据权利要求7至10任一项所述的装置，其特征在于，所述装置还包括：

12.根据权利要求7至10任一项所述的装置，其特征在于，所述装置还包括：

滑动操作接收模块，用于接收页面滑动操作；

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

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