CN112052419A - 图片加载方法、装置、设备及可读存储介质 - Google Patents

图片加载方法、装置、设备及可读存储介质 Download PDF

Info

Publication number
CN112052419A
CN112052419A CN202011084568.8A CN202011084568A CN112052419A CN 112052419 A CN112052419 A CN 112052419A CN 202011084568 A CN202011084568 A CN 202011084568A CN 112052419 A CN112052419 A CN 112052419A
Authority
CN
China
Prior art keywords
picture
network address
loading
resource
webpage
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202011084568.8A
Other languages
English (en)
Inventor
王卓君
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Tencent Technology Shenzhen Co Ltd
Original Assignee
Tencent Technology Shenzhen Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Tencent Technology Shenzhen Co Ltd filed Critical Tencent Technology Shenzhen Co Ltd
Priority to CN202011084568.8A priority Critical patent/CN112052419A/zh
Publication of CN112052419A publication Critical patent/CN112052419A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/957Browsing optimisation, e.g. caching or content distillation
    • G06F16/9574Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/958Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking

Landscapes

  • Engineering & Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Data Mining & Analysis (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

本申请提供了一种图片加载方法、装置、设备及可读存储介质,属于互联网技术领域。方法包括:在网页加载的过程中,基于网页的目标DOM树中的祖先元素,对该网页中所有图片的加载状态进行监听,当监听到有任一图片元素对应的图片资源加载失败时,获取指向同一图片资源但域名不同的网络地址,并基于该网络地址,重新加载该图片资源。上述方法利用了基于祖先元素能够访问到任一基于该祖先元素的后代元素这一特点,避免了在网页加载过程中需要对网页中所有图片的加载状态进行单独监听,实现了自动化对网页中所有加载失败的图片进行加载重试,提高了图片加载失败后进行加载重试的效率。

Description

图片加载方法、装置、设备及可读存储介质
技术领域
本申请涉及互联网技术领域,特别涉及一种图片加载方法、装置、设备及可读存储介质。
背景技术
随着互联网技术的快速发展,网络内容越来越丰富,在网页中除了文字还会包括各种各样的图片。在网页加载的过程中,图片资源的加载尤为重要,有时由于网页的静态资源域名解析失败,会导致网页中图片资源全部加载失败,使得网页的页面功能受到影响。
在相关技术中,通常由开发人员通过确定网页脚本中含有图片的元素节点,在网页加载的过程中,对每个含有图片的元素节点的节点状态进行监听,当监听到某一个图片加载失败时,对该图片进行加载重试。
然而,上述方法只能实现对单一图片的监听和加载重试,无法实现自动化对网页中所有的图片进行加载重试,图片加载失败后进行加载重试的效率较低。
发明内容
本申请实施例提供了一种图片加载方法、装置、设备及可读存储介质,实现了自动化对网页中所有加载失败的图片进行加载重试,提高了图片加载失败后进行加载重试的效率。所述技术方案如下:
一方面,提供了一种图片加载方法,所述方法包括:
在网页加载过程中,对所述网页的目标DOM树的第一元素进行监听,所述目标DOM树用于表示所述网页的各个元素以及所述元素之间的关系,所述第一元素为多个元素的祖先元素,所述多个元素中存在图片元素;
响应于监听到所述第一元素下的任一图片元素对应的图片资源加载失败,从所述目标DOM树中的所述图片元素中,获取所述图片资源的第一网络地址;
获取所述图片资源的第二网络地址,所述第二网络地址与所述第一网络地址的域名不同,且指向同一图片资源;
基于所述第二网络地址,获取所述图片资源,对获取到的所述图片资源进行加载。
另一方面,提供了一种图片加载装置,所述装置包括:
监听模块,用于在网页加载过程中,对所述网页的目标DOM树的第一元素进行监听,所述目标DOM树用于表示所述网页的各个元素以及所述元素之间的关系,所述第一元素为多个元素的祖先元素,所述多个元素中存在图片元素;
第一获取模块,用于响应于监听到所述第一元素下的任一图片元素对应的图片资源加载失败,从所述目标DOM树中的所述图片元素中,获取所述图片资源的第一网络地址;
第二获取模块,用于获取所述图片资源的第二网络地址,所述第二网络地址与所述第一网络地址的域名不同,且指向同一图片资源;
第一加载模块,包括:获取单元,用于基于所述第二网络地址,获取所述图片资源,加载单元,用于对获取到的所述图片资源进行加载。
在一种可选的实现方式中,所述装置还包括:
DOM树生成模块,用于基于所述网页的网页数据,生成所述网页的目标DOM树;
遍历模块,用于遍历所述目标DOM树,确定所述目标DOM树中所有的图片元素;
第一确定模块,用于基于所述目标DOM树中所有的图片元素,确定所述所有的图片元素的祖先元素;
第二确定模块,用于将所述祖先元素确定为所述第一元素;
配置模块,用于在所述第一元素上配置监听器,所述监听器用于监听到所述第一元素下的任一后代元素对应的资源加载失败。
在一种可选的实现方式中,所述监听模块用于:
在网页加载过程中,向所述第一元素的各个后代元素发送询问消息,所述询问消息用于询问所述各个后代元素中是否存在资源加载失败的元素;
接收任一后代元素返回的事件通知消息,所述事件通知消息用于表示所述后代元素对应的资源加载失败;
若根据所述事件通知消息确定所述后代元素为图片元素,则确定监听到所述第一元素下的图片元素对应的图片资源加载失败。
在一种可选的实现方式中,所述装置还包括:
第三获取模块,用于在获取到所述图片资源的第一网络地址之后,延迟目标时长,从所述目标DOM树中的所述图片元素中,获取所述图片资源的第三网络地址;
第一执行模块,用于若所述第三网络地址与所述第一网络地址相同,则执行获取所述图片资源的第二网络地址的步骤。
在一种可选的实现方式中,所述装置还包括:
查询模块,用于若所述第三网络地址与所述第一网络地址相同,且所述第一网络地址中不包括所述第一标识和所述第二标识,在图片重试数据库中查询是否存在所述第一网络地址,所述图片重试数据库用存储历史重试过程中获取到的图片网络地址,所述第一标识用于表示所述图片资源再次加载失败,所述第二标识用于表示所述第一网络地址指向第一图片;
第二执行模块,用于若所述图片重试数据库中不存在所述第一网络地址,且所述第一网络地址符合目标格式以及符合重试条件,则执行获取所述图片资源的第二网络地址的步骤。
在一种可选的实现方式中,所述装置还包括:
第二加载模块,用于若所述第三网络地址与所述第一网络地址相同,且所述第一网络地址中包括第一标识,则将第一图片加载至所述图片元素对应的网页位置,所述第一标识用于表示所述图片资源再次加载失败。
在一种可选的实现方式中,所述装置还包括:
第三加载模块,用于若所述第三网络地址与所述第一网络地址相同,且所述第一网络地址中不包括所述第一标识,而包括第二标识,则不对与所述图片元素对应的图片资源进行再次加载,所述第二标识用于表示所述第一网络地址指向所述第一图片。
在一种可选的实现方式中,所述装置还包括:
信息生成模块,用于生成目标信息,所述目标信息用于表示与所述图片元素对应的图片资源的重试情况;
信息发送模块,用于向所述网页的来源服务器发送所述目标信息。
另一方面,提供了一种计算机设备,所述计算机设备包括处理器和存储器,所述存储器用于存储至少一段程序代码,所述至少一段程序代码由所述处理器加载并执行以实现本申请实施例中的图片加载方法中所执行的操作。
另一方面,提供了一种计算机可读存储介质,所述计算机可读存储介质中存储有至少一段程序代码,所述至少一段程序代码由所述处理器加载并执行以实现如本申请实施例中图片加载方法中所执行的操作。
另一方面,提供了一种计算机程序产品,该计算机程序产品或计算机程序包括计算机程序代码,该计算机程序代码存储在计算机可读存储介质中。计算机设备的处理器从计算机可读存储介质读取该计算机程序代码,处理器执行该计算机程序代码,使得该计算机设备执行上述各种可选实现方式中提供的图片加载方法。
本申请实施例提供的技术方案带来的有益效果是:
在本申请实施例中,提供了一种图片加载方法,在网页加载的过程中,基于网页的目标DOM树中的祖先元素,对该网页中所有图片的加载状态进行监听,当监听到有任一图片元素对应的图片资源加载失败时,获取指向同一图片资源但域名不同的网络地址,并基于该网络地址,重新加载该图片资源。上述方法利用了基于祖先元素能够访问到任一基于该祖先元素的后代元素这一特点,避免了在网页加载过程中需要对网页中所有图片的加载状态进行单独监听,实现了自动化对网页中所有加载失败的图片进行加载重试,提高了图片加载失败后进行加载重试的效率。
附图说明
为了更清楚地说明本申请实施例中的技术方案,下面将对实施例描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本申请的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。
图1是根据本申请实施例提供的图片加载方法的实施环境示意图;
图2是根据本申请实施例提供的一种图片加载方法流程图;
图3是根据本申请实施例提供的另一种图片加载方法流程图;
图4是根据本申请实施例提供的一种目标DOM树的架构图;
图5是根据本申请实施例提供的一种网页中图片资源加载失败的示意图;
图6是根据本申请实施例提供的一种网页中图片资源加载重试成功后的示意图;
图7是根据本申请实施例提供的一种网页中图片资源加载重试失败后的示意图;
图8是根据本申请实施例提供的一种的图片加载装置的框图;
图9是根据本申请实施例提供的终端的结构框图;
图10是根据本申请实施例提供的一种服务器的结构示意图。
具体实施方式
为使本申请的目的、技术方案和优点更加清楚,下面将结合附图对本申请实施方式作进一步地详细描述。
这里将详细地对示例性实施例进行说明,其示例表示在附图中。下面的描述涉及附图时,除非另有表示,不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本申请相一致的所有实施方式。相反,它们仅是与如所附权利要求书中所详述的、本申请的一些方面相一致的装置和方法的例子。
下面简单介绍一下本申请实施例可能用到的技术以及名词解释。
文档对象模型(Document Object Model,DOM)是超文本标记语言(Hyper TextMarkup Language,HTML)和可扩展标记语言(Extensible Markup Language,XML)文档的编程接口。DOM提供了对文档的结构化的表述,可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说,这是表示和处理一个HTML或XML文档的常用方法。在DOM中,文档被模拟为树状,其中XML语法的每个组成部分(例如元素或文本内容)都被表示为一个节点。DOM允许遍历文档树,从父节点移动到子节点和兄弟节点等,并可以利用各种节点类型特有的属性(元素具有属性)。
DOM树是指通过DOM将HTML页面进行解析,并生成HTML树树状结构和对应的访问方法。解析DOM树,能直接而且简易的操作HTML页面上的每个标记内容。事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即DOM事件流。DOM事件流分为三个阶段,分别为:捕获阶段,事件从文档(Document)节点自上而下向目标节点传播的阶段;目标阶段,真正的目标节点正在处理事件的阶段;冒泡阶段,事件从目标节点自上而下向文档节点传播的阶段。
JavaScript(JS)是一种高级的、多范式、解释型的编程语言,是一门基于原型、函数先行的语言,它支持面向对象编程、命令式编程以及函数式编程。它提供语法来操控文本、数组、日期以及正则表达式,不支持I/O(比如网络、存储和图形等),但可以由它的宿主环境提供支持。是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言,常用来给HTML网页添加动态功能,比如响应用户的各种操作。
统一资源定位符(Uniform Resource Locator,URL)是互联网上标准的资源的地址。
图片地址属性(Source,src),是在HTML语言中,用于指定网页中插入图片的图片位置。
下面介绍一下本申请实施例提供的方法的实施环境,图1是根据本申请实施例提供的方法的实施环境示意图。该实施环境包括:终端101和服务器102。
终端101和服务器102能够通过有线或无线通信方式进行直接或间接地连接,本申请在此不做限制。可选的,终端101是智能手机、平板电脑、笔记本电脑、台式计算机等,但并不局限于此。终端101上能够安装和运行目标应用客户端。可选的,用户在目标应用客户端中输入目标网页的网页地址,或者在目标应用客户端中点击目标网页,请求访问该目标网页,该目标网页是提供教育资源的网页、提供购物服务的网页等。示意性的,终端101是用户使用的终端,终端101中运行的目标应用客户端内登录有用户的用户账号。
服务器102能够是独立的物理服务器,也能够是多个物理服务器构成的服务器集群或者分布式系统,还能够是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、CDN、以及大数据和人工智能平台等基础云计算服务的云服务器。
例如,终端101上安装和运行有目标应用客户端,用户在目标应用客户端中输入一个用于提供教育资源的网页地址,或者在目标应用客户端中点击想要访问的网页,终端101基于用户输入的网页地址,或者用户的点击操作,向该网页的服务器102发起访问请求,该网页的服务器102基于该访问请求,向终端101发送该网页的网页数据,终端101基于接收到的该网页的网页数据,在目标应用客户端上渲染显示该网页,使得用户能够基于目标应用客户端浏览该网页。
可选的,在图片加载过程中,服务器102承担主要计算工作,终端101承担次要计算工作;或者,服务器102承担次要计算工作,终端101承担主要计算工作;或者,服务器102或终端101分别能够单独承担计算工作。
可选的,服务器102包括:接入服务器、图片加载服务器和数据库。接入服务器用于提供终端的接入服务。图片加载服务器用于提供图片加载服务。图片加载服务器可以是一台或多台。当图片加载服务器是多台时,存在至少两台图片加载服务器用于提供不同的服务,和/或,存在至少两台图片加载服务器用于提供相同的服务,比如以负载均衡方式提供同一种服务,本申请实施例对此不加以限定。数据库用于存储网页的网页数据等。
可选的,终端101泛指多个终端中的一个,本实施例仅以终端101来举例说明。本领域技术人员能够知晓,上述终端101的数量能够更多。比如上述终端101为几十个或几百个,或者更多数量,此时上述图片加载方法的实施环境还包括其他终端。本申请实施例对终端的数量和设备类型不加以限定。
可选的,上述的无线网络或有线网络使用标准通信技术和/或协议。网络通常为因特网、但也能够是任何网络,包括但不限于局域网(Local Area Network,LAN)、城域网(Metropolitan Area Network,MAN)、广域网(Wide Area Network,WAN)、移动、有线或者无线网络、专用网络或者虚拟专用网络的任何组合)。在一些实施例中,使用包括超文本标记语言、可扩展标记语言等的技术和/或格式来代表通过网络交换的数据。此外还能够使用诸如安全套接字层(Secure Socket Layer,SSL)、传输层安全(Transport Layer Security,TLS)、虚拟专用网络(Virtual Private Network,VPN)、网际协议安全(Internet ProtocolSecurity,IPsec)等常规加密技术来加密所有或者一些链路。在另一些实施例中,还能够使用定制和/或专用数据通信技术取代或者补充上述数据通信技术。
图2是根据本申请实施例提供的一种图片加载方法流程图,如图2所示,在本申请实施例中以应用于终端为例进行说明。该方法包括以下步骤:
201、在网页加载过程中,对网页的目标DOM树的第一元素进行监听,该目标DOM树用于表示该网页的各个元素以及元素之间的关系,该第一元素为多个元素的祖先元素,该多个元素中存在图片元素。
在本申请实施例中,终端的目标应用客户端提供网页加载功能,可选的,该目标应用客户端是网页浏览客户端,或者是任意具有网页浏览功能的客户端,例如,视频播放客户端,在线课堂客户端等等。在网页加载过程中,终端的目标应用客户端生成网页的目标DOM树,并基于该目标DOM树中的祖先元素对网页中所有的图片元素进行监听。
202、响应于监听到该第一元素下的任一图片元素对应的图片资源加载失败,从该目标DOM树中的该图片元素中,获取该图片资源的第一网络地址。
在本申请实施例中,第一网络地址用于表示图片资源的获取地址,终端基于该图片元素,获取该图片元素中的图片地址属性,也即是src地址,基于该src地址,提取该图片资源的第一网络地址。
203、获取该图片资源的第二网络地址,该第二网络地址与该第一网络地址的域名不同,且指向同一图片资源。
在本申请实施例中,第二网络地址与第一网络地址的域名不同,指向同一图片资源。例如,该第一网络地址为“https://10.idqqimg.com/eth/”,该第二网络地址为“https://fudao?10.idqqimg.com/eth/”,两个网络地址的域名不同,但是指向的是同一个图片资源。终端向第二网络地址的域名所对应的服务器发送地址获取请求,并接收由该服务器所返回的第二网络地址。
204、基于该第二网络地址,获取该图片资源,对获取到的该图片资源进行加载。
在本申请实施例中,终端基于从上述步骤203中获取到的第二网络地址,获取到图片资源,并对获取到的该图片资源进行加载,实现对该图片资源的加载重试。
在本申请实施例中,提供了一种图片加载方法,在网页加载的过程中,基于网页的目标DOM树中的祖先元素,对该网页中所有图片的加载状态进行监听,当监听到有任一图片元素对应的图片资源加载失败时,获取指向同一图片资源但域名不同的网络地址,并基于该网络地址,重新加载该图片资源。上述方法利用了基于祖先元素能够访问到任一基于该祖先元素的后代元素这一特点,避免了在网页加载过程中需要对网页中所有图片的加载状态进行单独监听,实现了自动化对网页中所有加载失败的图片进行加载重试,提高了图片加载失败后进行加载重试的效率。
图3是根据本申请实施例提供的另一种图片加载方法流程图,如图3所示,在本申请实施例中以应用于终端为例进行说明。该方法包括以下步骤:
301、在网页加载过程中,终端基于网页的网页数据,生成该网页的目标DOM树。
在本申请实施例中,终端的目标应用客户端提供网页加载功能,用户在目标应用客户端中输入想要访问的网页的地址,或者点击目标应用客户端中想要访问的网页,目标应用客户端基于用户所输入的地址,或者响应于用户对该网页的点击操作,向该网页的服务器发送该网页的访问请求,该网页的服务器基于该访问请求,返回该网页的网页数据,也即是与该网页相应的HTML文档,终端接收到该网页的网页数据后,对该网页的网页数据进行解析,生成该网页的目标DOM树。例如,终端基于接收到的HTML文档,将HTML文档中的<html>标记表示为目标DOM树的根元素,<head>和<body>元素表示为树的枝干,树中每一个节点都对应于一个元素,每个节点之间的关系与HTML文档中每个元素的关系一一对应。
302、终端遍历该目标DOM树,确定该目标DOM树中所有的图片元素。
在本申请实施例中,终端的目标应用客户端在生成网页的目标DOM树后,遍历该目标DOM树,当发现某一元素包含有图片标签,也即是img标签时,将该元素确定为图片元素,以确定该目标DOM树中所有的图片元素。
其中,img标签中包括有某一图片的图片地址属性,也即是“src地址”,该图片地址属性用于指向该图片的网络地址,也即是URL。例如,终端的目标应用客户端在网页加载过程中,对于网页中图片的加载过程为:终端的目标应用客户端基于某一图片的网络地址,向服务器发起获取该图片的图片资源的请求,并接收由该服务器返回的该图片的图片资源,根据该图片的图片资源将相应的图片加载至包括该img标签的图片元素所对应的网页位置上。
303、终端基于该目标DOM树中所有的图片元素,确定该所有的图片元素的祖先元素。
在本申请实施例中,祖先元素为目标DOM树中的一个元素,终端通过该元素,能够访问到基于该元素下的任一图片元素。
在一种可选的实现方式中,终端在确定目标DOM树中所有的图片元素后,选择一个外层元素作为祖先元素,例如,该祖先元素为document.body,也即是在该网页的HTML文档中的主体对象。基于该祖先元素,保证了终端不仅能够访问到基于该元素下的任一图片元素,还能够访问到基于该元素下除图片元素外的任一元素,扩大了访问的元素范围,避免遗漏。
在另一种可选的实现方式中,终端在确定目标DOM树中所有的图片元素以后,对该目标DOM树按照从下往上的顺序依次遍历该目标DOM树中所有的图片元素,直到到达最上层的图片元素,将该最上层的图片元素的再上一层元素确定为祖先元素。通过这种方式,准确地选择祖先元素,确保了所有的图片元素都能基于该祖先元素访问到,更加精确。
304、终端将该祖先元素确定为第一元素。
在本申请实施例中,终端基于上述步骤303中确定的祖先元素,将该祖先元素确定为第一元素,通过该第一元素能够访问到目标DOM树中所有的图片元素。
305、终端在该第一元素上配置监听器,该监听器用于监听到该第一元素下的任一后代元素对应的资源加载失败。
在本申请实施例中,将监听器配置于第一元素上,用于监听基于该第一元素的任一后代元素所对应的资源加载失败的情况。例如,在该第一元素上接入一个错误处理器,即errorHandler对象。
需要说明的是,上述步骤301至步骤305是按照从前往后的顺序依次执行的,在另一种可选的实现方式中,终端在执行步骤301的同时,同步执行步骤302至步骤305,也即是在生成目标DOM树的同时,随即确定了第一元素,并在该第一元素上配置了监听器,本申请实施例对上述步骤的执行顺序不进行具体限制。
另外,上述步骤301至步骤305可参考图4进行理解,图4为根据本申请实施例提供的一种目标DOM树的架构图,基于网页的网页数据生成目标DOM树,确定第一元素,并在该第一元素上配置监听器,终端通过该监听器能够监听到该第一元素下的任一图片元素所对应的资源加载失败。
306、终端通过该监听器向该第一元素的各个后代元素发送询问消息,该询问消息用于询问各个后代元素中是否存在资源加载失败的元素。
在本申请实施例中,后代元素是指以在目标DOM树中,以该第一元素作为起始节点,在该节点以下的所有元素。终端通过该监听器,基于目标DOM树中的第一元素,向该第一元素的下一层元素发送询问消息,该层元素在接收到该询问消息后,再向下一层继续发送该询问消息,其中,该询问消息中携带该监听器信息,用于指示各个后代元素当有问题需要反馈时通过该监听器向终端进行反馈。
307、终端通过该监听器接收任一后代元素返回的事件通知消息,该事件通知消息用于表示该后代元素对应的资源加载失败。
在本申请实施例中,当有某一后代元素在接收到上述步骤306中发送的询问消息后,存在该后代元素的资源加载失败,则生成事件通知消息,该事件通知消息中携带该后代元素中的标签,通过监听器反馈给终端,终端接收该事件通知消息。
需要说明的是,上述步骤306至步骤307即为在DOM树中对事件的捕获阶段,在本申请实施例中,事件是指目标DOM树中某一元素对应的资源加载失败,通过基于DOM树中对事件的捕获阶段进行监听,确保能够监听到整个网页中所有图片元素的图片资源的加载情况,且能够在图片元素自身执行监听功能之前捕获到该图片元素所对应的图片资源加载失败这一事件。
308、若根据该事件通知消息确定该后代元素为图片元素,则终端确定监听到该第一元素下的图片元素对应的图片资源加载失败。
在本申请实施例中,终端基于该事件通知消息中所携带的标签,确定该标签是否为img标签,如果是,则说明该后代元素为图片元素。
309、终端从该目标DOM树中的该图片元素中,获取该图片资源的第一网络地址。
在本申请实施例中,第一网络地址用于表示图片资源的获取地址,终端基于该图片元素,获取该图片元素中的图片地址属性,也即是src地址,基于该src地址,提取该图片资源的第一网络地址,例如,该第一网络地址为“https://10.idqqimg.com/eth/”。
310、终端在获取到该图片资源的第一网络地址之后,延迟目标时长,从该目标DOM树中的该图片元素中,获取该图片资源的第三网络地址。
在本申请实施例中,延迟目标时长是指在经过指定的目标时长后再执行相应的步骤。终端在经过目标时长的延迟后,再次基于该图片元素,获取该图片元素中的图片地址属性,从该图片地址属性提取该图片资源的网络地址,将这次提取到的网络地址确定为第三网络地址。例如,延迟目标时长通过setTimeout方法进行,setTimeout方法用于在指定的毫秒数后调用函数或计算表达式,终端基于setTimeout延迟处理,在经过0.01s后获取该图片资源的第三网络地址,本申请实施例对此不进行具体限制,可根据实际情况进行调整。
其中,图片元素本身具有监听功能,例如,在图片元素上添加onerror事件,当图片元素所对应的图片资源加载失败时,便会触发该onerror事件,然后终端获取到备用的该图片资源的网络地址,并重新加载该图片资源。通过延迟目标时长,能够确保该图片元素自身监听步骤的正常执行,避免了后续步骤的执行与图片元素自身监听步骤的执行产生冲突。
在一种可选的实现方式中,图片元素本身不具有监听功能,则终端不执行步骤310以及下述步骤311,直接执行后续步骤312,本申请实施例对于图片元素本身是否具有监听功能不进行具体限制。
311、若该第三网络地址与该第一网络地址相同,则终端执行步骤312,若不相同,则结束当前处理流程。
在本申请实施例中,当第三网络地址与第一网络地址相同时,说明该图片元素对应的图片资源加载失败后,并未有其他方法对该图片元素进行过处理,终端即可执行后续步骤312。其中,其他方法为基于图片元素本身的监听功能,获取到备用的图片资源的网络地址,并重新加载该图片资源。当第三网络地址与第一网络地址不同时,说明在该图片元素对应的图片资源加载失败后,存在其他方法,将该图片资源的网络地址进行了替换,此时,终端结束当前流程。
312、若该第一网络地址中不包括第一标识,则终端继续执行步骤313,若该第一网络地址中包括第一标识,则终端执行步骤317,该第一标识用于表示该图片资源再次加载失败。
在本申请实施例中,对于重新加载过的图片资源,该图片资源的网络地址中会存在第一标识,例如,该第一标识为“proxy”,即重新加载过的图片资源的网络地址为“https://10.idqqimg.com/eth/#__proxy__”。当该第一网络地址中不包括第一标识时,终端继续执行步骤313,而当该第一网络地址中包括第一标识时,说明该图片资源为已经重新加载过的图片资源,且该重新加载过的图片资源再一次发生了加载失败的情况,此时,终端执行后续步骤317。
313、若该第一网络地址中不包括第二标识,则终端继续执行步骤314至316,若该第一网络地址中包括第二标识,则执行步骤318,该第二标识用于表示该第一网络地址指向第一图片。
在本申请实施例中,对于第一图片,该第一图片对应的网络地址中会存在第二标识,例如,该第二标识为“default”,该第一图片的网络地址为“https://10.idqqimg.com/eth/#__default__”。当该第一网络地址中不包括第二标识时,终端继续执行步骤314至步骤316,而当该第一网络地址中包括第二标识时,说明该图片资源为第一图片的图片资源,其中,第一图片为默认加载失败的图片,此时,终端执行后续步骤317。
314、终端在图片重试数据库中查询是否存在该第一网络地址,该图片重试数据库用存储历史重试过程中获取到的图片网络地址。
在本申请实施例中,步骤314是基于步骤312至步骤313的前提下执行的,此时的第一网络地址中即不包括第一标识,也不包括第二标识,说明该第一网络地址对应的图片资源既不是重新加载过的图片资源,也不是第一图片的图片资源。此时,终端在图片重试数据库中查询是否存在该第一网络地址。
在一种可选的实现方式中,终端关联有图片重试数据库,终端在对某一图片元素的图片资源经过一次重新加载后,会将该次重新加载过程中获取到的该图片资源的网络地址存储到图片重试数据库中。
315、若该图片重试数据库中不存在该第一网络地址,且该第一网络地址符合目标格式以及符合重试条件,则获取该图片资源的第二网络地址,该第二网络地址与该第一网络地址的域名不同,且指向同一图片资源。
在本申请实施例中,上述步骤315的实现过程包括下述步骤一到步骤三:
步骤一:当图片重试数据库中不存在该第一网络地址时,终端基于该第一网络地址,确定该第一网络地址是否符合目标格式,当终端基于该第一网络地址,确定该第一网络地址符合目标格式时,继续执行以下步骤二,当终端基于该第一网络地址,确定该第一网络地址不符合目标格式时,结束当前处理流程。例如,基于该第一网络地址,确定与该第一网络地址的格式是否属于该网页中内嵌图片的网络地址的格式,其中内嵌图片是指该图片资源能够直接从该网页的服务器中获取到,不需要向其他服务器发起请求,当终端确定该第一网络地址的格式属于该网页中内嵌图片的网络地址的格式时,继续执行以下步骤二,否则,结束当前处理流程。
步骤二:当终端确定该第一网络地址符合目标格式时,确定该第一网络地址是否符合重试条件,当终端基于该第一网络地址,确定该第一网络地址符合重试条件时,继续执行以下步骤三,当终端基于该第一网络地址,确定该第一网络地址不符合目标格式时,结束当前处理流程。其中,对于重试条件有多种设置方式。例如,将第一网络地址所对应的图片资源的尺寸是否符合阈值作为重试条件,对于是否符合重试条件可通过shouldIgnore判断方法来执行,当该第一网络地址所对应的图片资源的尺寸大于阈值时,该shouldIgnore结果返回为true,此时,终端不对该第一网络地址做任何处理,当该第一网络地址所对应的图片资源的尺寸小于或等于阈值时,该shouldIgnore结果返回为false,即认为该第一网络地址不需要忽略重试,终端执行后续步骤三。本申请实施例对于重试条件的设置方法不进行具体限制,可根据实际情况进行调整。
步骤三:终端获取该图片资源的第二网络地址,该第二网络地址与该第一网络地址的域名不同,指向同一图片资源。例如,该第一网络地址为“https://10.idqqimg.com/eth/”,该第二网络地址为“https://fudao?10.idqqimg123.com/eth/”,两个网络地址的域名不同,但是指向的是同一个图片资源。终端向第二网络地址的域名所对应的服务器发送地址获取请求,并接收由该服务器所返回的第二网络地址。在一种可选的实现方式中,第一网络地址的域名所对应的服务器为第一服务器,第二网络地址的域名所对应的服务器为第二服务器,其中,第二服务器设置了反向代理功能,终端向第二服务器发送第一网络地址的获取请求,第二服务器基于该获取请求,向第一服务器转发该获取请求,并获取到由第一服务器返回的第一网络地址,然后第二服务器将获取到的第一网络地址返回给终端,此时终端接收到的网络地址为经过域名切换后的第二网络地址。例如,第二网络地址的域名为fudao域名,经过域名切换后的第二网络地址为“https://fudao?第一网络地址/”。
需要说明的是,上述步骤310至步骤315为本申请实施例提供的对第一网络地址进行多次判断的一种实施方式。在另一种可选的实现方式中,终端不执行上述步骤310至步骤315,在执行步骤309之后直接获取第二网络地址,并继续执行后续步骤316,本申请实施例对此不进行具体限制。
316、终端基于该第二网络地址,获取该图片资源,对获取到的该图片资源进行加载。
在本申请实施例中,终端在经过上述步骤315后,确定发生加载失败的图片资源并没有经过任何重试过程,且该图片资源的第一网络地址既符合目标格式,又符合重试条件,终端随即基于从上述步骤315中获取到的第二网络地址,获取到图片资源,并对获取到的该图片资源进行加载,实现对该图片资源的加载重试。
需要说明的是,终端在经过上述步骤309至步骤316后,将上述步骤中的第一网络地址存储于图片重试数据库中。通过将任一次重试过程中获取到的第一网络地址进行存储,能够在该第一网络地址再次被获取到的时候,得知与该第一网络地址对应的图片资源已经经过一次重试,避免多次轮回处理同一个图片资源加载失败。
317、终端将第一图片加载至该图片元素对应的网页位置。
在本申请实施例中,经过上述步骤312,终端确定第一网络地址中包括第一标识时,说明该图片资源为已经重新加载过的图片资源,且该重新加载过的图片资源再一次发生了加载失败的情况,此时终端将第一图片加载至该图片元素对应的网页位置上。
需要说明的是,上述步骤317为本申请实施例提供的对重新加载过的图片资源再次加载失败后进行处理的一种实施方式,在一种可选的实现方式中,终端不对该图片资源进行任何处理,在另一种可选的实现方式中,终端再次重新加载该图片资源,本申请实施例对此不进行具体限制。
318、终端不对与该图片元素对应的图片资源进行再次加载。
在本申请实施例中,经过上述步骤313,终端确定第一网络地址中包括第二标识,说明该第一网络地址所对应的图片资源为第一图片的图片资源,此时,终端不再对与该图片元素对应的图片资源进行再次加载。
需要说明的是,上述步骤318为本申请实施例提供的终端在该图片资源为第一图片的图片资源的情况下的一种实施方式,在另一种可选的实现方式中,终端将第二图片加载至该图片元素对应的网页位置,其中,第二图片为与第一图片不相同的另一种默认加载失败的图片,本申请实施例对此不进行具体限制。
319、在执行上述步骤316至步骤317中的任一步骤之后,终端生成目标信息,该目标信息用于表示与该图片元素对应的图片资源的重试情况,向该网页的来源服务器发送该目标信息。
在本申请实施例中,重试情况是指与该图片元素对应的图片资源重新加载的情况。
在上述步骤319中,存在以下三种情况:
在一种可选的实现方式中,终端在执行上述步骤316后,生成第一目标信息,该目标信息用于表示与该图片元素对应的图片资源为首次出现资源加载失败的图片资源,且终端已经对该图片元素对应的图片资源进行了一次重新加载,例如,该目标信息为“该图片资源为首次加载失败,已重新加载”。
在一种可选的实现方式中,终端在执行上述步骤317后,生成第二目标信息,该目标信息用于表示与该图片元素对应的图片资源,为已经重新加载过的图片资源,且终端已经将第一图片加载至与该图片元素对应的网页位置,例如,该目标信息为“该图片资源为再次加载失败,已重新加载为默认加载失败的图片”。
在一种可选的实现方式中,终端在执行上述步骤318后,生成第三目标信息,该目标信息用于表示与该图片元素对应的图片资源为第一图片的图片资源,且终端未做任何处理,例如,该目标信息为“该图片资源为默认加载失败的图片,不做处理”。
另外,参考图5,图5是根据本申请实施例提供的一种网页中图片资源加载失败的示意图,网页中图片加载失败后在网页中每个图片对应的位置上显示有图片加载失败的标志。参考图6,图6是根据本申请实施例提供的一种网页中图片资源加载重试成功后的示意图,网页中显示的图片为经过域名切换后重新加载的图片。参考图7,图7是根据本申请实施例提供的一种网页中图片资源加载重试失败后的示意图,网页中显示的图片为默认加载失败的图片。
在本申请实施例中,提供了一种图片加载方法,在网页加载的过程中,基于网页的目标DOM树中的祖先元素,对该网页中所有图片的加载状态进行监听,当监听到有任一图片元素对应的图片资源加载失败时,获取指向同一图片资源但域名不同的网络地址,并基于该网络地址,重新加载该图片资源。上述方法利用了基于祖先元素能够访问到任一基于该祖先元素的后代元素这一特点,避免了在网页加载过程中需要对网页中所有图片的加载状态进行单独监听,实现了自动化对网页中所有加载失败的图片进行加载重试,提高了图片加载失败后进行加载重试的效率。
图8是根据本申请实施例提供的一种图片加载装置的框图。该装置用于执行上述方法执行时的步骤,参见图8,装置包括:监听模块801、第一获取模块802、第二获取模块803、第一加载模块804。
监听模块801,用于在网页加载过程中,对网页的目标DOM树的第一元素进行监听,该目标DOM树用于表示该网页的各个元素以及该元素之间的关系,该第一元素为多个元素的祖先元素,该多个元素中存在图片元素;
第一获取模块802,用于响应于监听到该第一元素下的任一图片元素对应的图片资源加载失败,从该目标DOM树中的该图片元素中,获取该图片资源的第一网络地址;
第二获取模块803,用于获取该图片资源的第二网络地址,该第二网络地址与该第一网络地址的域名不同,且指向同一图片资源;
第一加载模块804,包括:获取单元,用于基于该第二网络地址,获取该图片资源,加载单元,用于对获取到的该图片资源进行加载。
在一种可选的实现方式中,该装置还包括:
DOM树生成模块,用于基于网页的网页数据,生成该网页的目标DOM树;
遍历模块,用于遍历该目标DOM树,确定该目标DOM树中所有的图片元素;
第一确定模块,用于基于该目标DOM树中所有的图片元素,确定该所有的图片元素的祖先元素;
第二确定模块,用于将该祖先元素确定为第一元素;
配置模块,用于在该第一元素上配置监听器,该监听器用于监听到该第一元素下的任一后代元素对应的资源加载失败。
在一种可选的实现方式中,该监听模块801用于:
在网页加载过程中,向该第一元素的各个后代元素发送询问消息,该询问消息用于询问该各个后代元素中是否存在资源加载失败的元素;
接收任一后代元素返回的事件通知消息,该事件通知消息用于表示该后代元素对应的资源加载失败;
若根据该事件通知消息确定该后代元素为图片元素,则确定监听到该第一元素下的图片元素对应的图片资源加载失败。
在一种可选的实现方式中,该装置还包括:
第三获取模块,用于在获取到该图片资源的第一网络地址之后,延迟目标时长,从该目标DOM树中的该图片元素中,获取该图片资源的第三网络地址;
第一执行模块,用于若该第三网络地址与该第一网络地址相同,则执行获取该图片资源的第二网络地址的步骤。
在一种可选的实现方式中,该装置还包括:
查询模块,用于若该第三网络地址与该第一网络地址相同,且该第一网络地址中不包括该第一标识和该第二标识,在图片重试数据库中查询是否存在该第一网络地址,该图片重试数据库用存储历史重试过程中获取到的图片网络地址,该第一标识用于表示该图片资源再次加载失败,该第二标识用于表示该第一网络地址指向第一图片;
第二执行模块,用于若该图片重试数据库中不存在该第一网络地址,且该第一网络地址符合目标格式以及符合重试条件,则执行获取该图片资源的第二网络地址的步骤。
在一种可选的实现方式中,该装置还包括:
第二加载模块,用于若该第三网络地址与该第一网络地址相同,且该第一网络地址中包括第一标识,则将第一图片加载至该图片元素对应的网页位置,该第一标识用于表示该图片资源再次加载失败。
在一种可选的实现方式中,该装置还包括:
第三加载模块,用于若该第三网络地址与该第一网络地址相同,且该第一网络地址中不包括该第一标识,而包括第二标识,则不对与该图片元素对应的图片资源进行再次加载,该第二标识用于表示该第一网络地址指向该第一图片。
在一种可选的实现方式中,该装置还包括:
信息生成模块,用于生成目标信息,该目标信息用于表示与该图片元素对应的图片资源的重试情况;
信息发送模块,用于向该网页的来源服务器发送该目标信息。
在本申请实施例中,提供了一种图片加载方法,在网页加载的过程中,基于网页的目标DOM树中的祖先元素,对该网页中所有图片的加载状态进行监听,当监听到有任一图片元素对应的图片资源加载失败时,获取指向同一图片资源但域名不同的网络地址,并基于该网络地址,重新加载该图片资源。上述方法利用了基于祖先元素能够访问到任一基于该祖先元素的后代元素这一特点,避免了在网页加载过程中需要对网页中所有图片的加载状态进行单独监听,实现了自动化对网页中所有加载失败的图片进行加载重试,提高了图片加载失败后进行加载重试的效率。
需要说明的是:上述实施例提供的装置在图片加载时,仅以上述各功能模块的划分进行举例说明,实际应用中,可以根据需要而将上述功能分配由不同的功能模块完成,即将装置的内部结构划分成不同的功能模块,以完成以上描述的全部或者部分功能。另外,上述实施例提供的图片加载装置与图片加载方法实施例属于同一构思,其具体实现过程详见方法实施例,这里不再赘述。
图9是根据本申请实施例提供的终端900的结构框图。该终端900能够是便携式移动终端,比如:智能手机、平板电脑、MP3播放器(Moving Picture Experts Group AudioLayer III,动态影像专家压缩标准音频层面3)、MP4(Moving Picture Experts GroupAudio Layer IV,动态影像专家压缩标准音频层面4)播放器、笔记本电脑或台式电脑。终端900还可能被称为用户设备、便携式终端、膝上型终端、台式终端等其他名称。
通常,终端900包括有:处理器901和存储器902。
处理器901能够包括一个或多个处理核心,比如4核心处理器、8核心处理器等。处理器901能够采用DSP(Digital Signal Processing,数字信号处理)、FPGA(Field-Programmable Gate Array,现场可编程门阵列)、PLA(Programmable Logic Array,可编程逻辑阵列)中的至少一种硬件形式来实现。处理器901也能够包括主处理器和协处理器,主处理器是用于对在唤醒状态下的数据进行处理的处理器,也称CPU(Central ProcessingUnit,中央处理器);协处理器是用于对在待机状态下的数据进行处理的低功耗处理器。在一些实施例中,处理器901能够集成有GPU(Graphics Processing Unit,图像处理器),GPU用于负责显示屏所需要显示的内容的渲染和绘制。一些实施例中,处理器901还能够包括AI(Artificial Intelligence,人工智能)处理器,该AI处理器用于处理有关机器学习的计算操作。
存储器902能够包括一个或多个计算机可读存储介质,该计算机可读存储介质能够是非暂态的。存储器902还可包括高速随机存取存储器,以及非易失性存储器,比如一个或多个磁盘存储设备、闪存存储设备。在一些实施例中,存储器902中的非暂态的计算机可读存储介质用于存储至少一个程序代码,该至少一个程序代码用于被处理器901所执行以实现本申请中方法实施例提供的图片加载方法。
在一些实施例中,终端900还可选包括有:外围设备接口903和至少一个外围设备。处理器901、存储器902和外围设备接口903之间能够通过总线或信号线相连。各个外围设备能够通过总线、信号线或电路板与外围设备接口903相连。具体地,外围设备包括:射频电路904、显示屏905、摄像头组件906、音频电路907、定位组件908和电源909中的至少一种。
外围设备接口903可被用于将I/O(Input/Output,输入/输出)相关的至少一个外围设备连接到处理器901和存储器902。在一些实施例中,处理器901、存储器902和外围设备接口903被集成在同一芯片或电路板上;在一些其他实施例中,处理器901、存储器902和外围设备接口903中的任意一个或两个能够在单独的芯片或电路板上实现,本实施例对此不加以限定。
射频电路904用于接收和发射RF(Radio Frequency,射频)信号,也称电磁信号。射频电路904通过电磁信号与通信网络以及其他通信设备进行通信。射频电路904将电信号转换为电磁信号进行发送,或者,将接收到的电磁信号转换为电信号。可选地,射频电路904包括:天线系统、RF收发器、一个或多个放大器、调谐器、振荡器、数字信号处理器、编解码芯片组、用户身份模块卡等等。射频电路904能够通过至少一种无线通信协议来与其它终端进行通信。该无线通信协议包括但不限于:万维网、城域网、内联网、各代移动通信网络(2G、3G、4G及5G)、无线局域网和/或WiFi(Wireless Fidelity,无线保真)网络。在一些实施例中,射频电路904还能够包括NFC(Near Field Communication,近距离无线通信)有关的电路,本申请对此不加以限定。
显示屏905用于显示UI(User Interface,用户界面)。该UI能够包括图形、文本、图标、视频及其它们的任意组合。当显示屏905是触摸显示屏时,显示屏905还具有采集在显示屏905的表面或表面上方的触摸信号的能力。该触摸信号能够作为控制信号输入至处理器901进行处理。此时,显示屏905还能够用于提供虚拟按钮和/或虚拟键盘,也称软按钮和/或软键盘。在一些实施例中,显示屏905能够为一个,设置在终端900的前面板;在另一些实施例中,显示屏905能够为至少两个,分别设置在终端900的不同表面或呈折叠设计;在另一些实施例中,显示屏905能够是柔性显示屏,设置在终端900的弯曲表面上或折叠面上。甚至,显示屏905还能够设置成非矩形的不规则图形,也即异形屏。显示屏905能够采用LCD(Liquid Crystal Display,液晶显示屏)、OLED(Organic Light-Emitting Diode,有机发光二极管)等材质制备。
摄像头组件906用于采集图像或视频。可选地,摄像头组件906包括前置摄像头和后置摄像头。通常,前置摄像头设置在终端的前面板,后置摄像头设置在终端的背面。在一些实施例中,后置摄像头为至少两个,分别为主摄像头、景深摄像头、广角摄像头、长焦摄像头中的任意一种,以实现主摄像头和景深摄像头融合实现背景虚化功能、主摄像头和广角摄像头融合实现全景拍摄以及VR(Virtual Reality,虚拟现实)拍摄功能或者其它融合拍摄功能。在一些实施例中,摄像头组件906还能够包括闪光灯。闪光灯能够是单色温闪光灯,也能够是双色温闪光灯。双色温闪光灯是指暖光闪光灯和冷光闪光灯的组合,能够用于不同色温下的光线补偿。
音频电路907能够包括麦克风和扬声器。麦克风用于采集用户及环境的声波,并将声波转换为电信号输入至处理器901进行处理,或者输入至射频电路904以实现语音通信。出于立体声采集或降噪的目的,麦克风能够为多个,分别设置在终端900的不同部位。麦克风还能够是阵列麦克风或全向采集型麦克风。扬声器则用于将来自处理器901或射频电路904的电信号转换为声波。扬声器能够是传统的薄膜扬声器,也能够是压电陶瓷扬声器。当扬声器是压电陶瓷扬声器时,不仅能够将电信号转换为人类可听见的声波,也能够将电信号转换为人类听不见的声波以进行测距等用途。在一些实施例中,音频电路907还能够包括耳机插孔。
定位组件908用于定位终端900的当前地理位置,以实现导航或LBS(LocationBased Service,基于位置的服务)。定位组件908能够是基于美国的GPS(GlobalPositioning System,全球定位系统)、中国的北斗系统或俄罗斯的伽利略系统的定位组件。
电源909用于为终端900中的各个组件进行供电。电源909能够是交流电、直流电、一次性电池或可充电电池。当电源909包括可充电电池时,该可充电电池能够是有线充电电池或无线充电电池。有线充电电池是通过有线线路充电的电池,无线充电电池是通过无线线圈充电的电池。该可充电电池还能够用于支持快充技术。
在一些实施例中,终端900还包括有一个或多个传感器910。该一个或多个传感器910包括但不限于:加速度传感器911、陀螺仪传感器912、压力传感器913、指纹传感器914、光学传感器915以及接近传感器916。
加速度传感器911能够检测以终端900建立的坐标系的三个坐标轴上的加速度大小。比如,加速度传感器911能够用于检测重力加速度在三个坐标轴上的分量。处理器901能够根据加速度传感器911采集的重力加速度信号,控制显示屏905以横向视图或纵向视图进行用户界面的显示。加速度传感器911还能够用于游戏或者用户的运动数据的采集。
陀螺仪传感器912能够检测终端900的机体方向及转动角度,陀螺仪传感器912能够与加速度传感器911协同采集用户对终端900的3D动作。处理器901根据陀螺仪传感器912采集的数据,能够实现如下功能:动作感应(比如根据用户的倾斜操作来改变UI)、拍摄时的图像稳定、游戏控制以及惯性导航。
压力传感器913能够设置在终端900的侧边框和/或显示屏905的下层。当压力传感器913设置在终端900的侧边框时,能够检测用户对终端900的握持信号,由处理器901根据压力传感器913采集的握持信号进行左右手识别或快捷操作。当压力传感器913设置在显示屏905的下层时,由处理器901根据用户对显示屏905的压力操作,实现对UI界面上的可操作性控件进行控制。可操作性控件包括按钮控件、滚动条控件、图标控件、菜单控件中的至少一种。
指纹传感器914用于采集用户的指纹,由处理器901根据指纹传感器914采集到的指纹识别用户的身份,或者,由指纹传感器914根据采集到的指纹识别用户的身份。在识别出用户的身份为可信身份时,由处理器901授权该用户执行相关的敏感操作,该敏感操作包括解锁屏幕、查看加密信息、下载软件、支付及更改设置等。指纹传感器914能够被设置在终端900的正面、背面或侧面。当终端900上设置有物理按键或厂商Logo时,指纹传感器914能够与物理按键或厂商Logo集成在一起。
光学传感器915用于采集环境光强度。在一个实施例中,处理器901能够根据光学传感器915采集的环境光强度,控制显示屏905的显示亮度。具体地,当环境光强度较高时,调高显示屏905的显示亮度;当环境光强度较低时,调低显示屏905的显示亮度。在另一个实施例中,处理器901还能够根据光学传感器915采集的环境光强度,动态调整摄像头组件906的拍摄参数。
接近传感器916,也称距离传感器,通常设置在终端900的前面板。接近传感器916用于采集用户与终端900的正面之间的距离。在一个实施例中,当接近传感器916检测到用户与终端900的正面之间的距离逐渐变小时,由处理器901控制显示屏905从亮屏状态切换为息屏状态;当接近传感器916检测到用户与终端900的正面之间的距离逐渐变大时,由处理器901控制显示屏905从息屏状态切换为亮屏状态。
本领域技术人员能够理解,图9中示出的结构并不构成对终端900的限定,能够包括比图示更多或更少的组件,或者组合某些组件,或者采用不同的组件布置。
图10是根据本申请实施例提供的一种服务器的结构示意图,该服务器1000可因配置或性能不同而产生比较大的差异,能够包括一个或一个以上处理器(CentralProcessing Units,CPU)1001和一个或一个以上的存储器1002,其中,该存储器1002中存储有至少一条程序代码,该至少一条程序代码由处理器1001加载并执行以实现上述各个方法实施例提供的图片加载方法。当然,该服务器还能够具有有线或无线网络接口、键盘以及输入输出接口等部件,以便进行输入输出,该服务器还能够包括其他用于实现设备功能的部件,在此不做赘述。
本申请实施例还提供了一种计算机可读存储介质,该计算机可读存储介质应用于计算机设备,该计算机可读存储介质中存储有至少一段程序代码,该至少一段程序代码由处理器加载并执行以实现上述实施例的图片加载方法中计算机设备所执行的操作。
本申请实施例还提供了一种计算机程序产品,该计算机程序产品包括计算机程序代码,该计算机程序代码存储在计算机可读存储介质中。计算机设备的处理器从计算机可读存储介质读取该计算机程序代码,处理器执行该计算机程序代码,使得该计算机设备执行上述各种可选实现方式中提供的图片加载方法。
本领域普通技术人员可以理解实现上述实施例的全部或部分步骤可以通过硬件来完成,也可以通过程序来指令相关的硬件完成,所述的程序可以存储于一种计算机可读存储介质中,上述提到的存储介质可以是只读存储器,磁盘或光盘等。
以上所述仅为本申请的可选实施例,并不用以限制本申请,凡在本申请的精神和原则之内,所作的任何修改、等同替换、改进等,均应包含在本申请的保护范围之内。

Claims (10)

1.一种图片加载方法,其特征在于,所述方法包括:
在网页加载过程中,对所述网页的目标文档对象模型DOM树的第一元素进行监听,所述目标DOM树用于表示所述网页的各个元素以及所述元素之间的关系,所述第一元素为多个元素的祖先元素,所述多个元素中存在图片元素;
响应于监听到所述第一元素下的任一图片元素对应的图片资源加载失败,从所述目标DOM树中的所述图片元素中,获取所述图片资源的第一网络地址;
获取所述图片资源的第二网络地址,所述第二网络地址与所述第一网络地址的域名不同,且指向同一图片资源;
基于所述第二网络地址,获取所述图片资源,对获取到的所述图片资源进行加载。
2.根据权利要求1所述的方法,其特征在于,所述在网页加载过程中,对所述网页的目标DOM树的第一元素进行监听之前,所述方法还包括:
基于所述网页的网页数据,生成所述网页的目标DOM树;
遍历所述目标DOM树,确定所述目标DOM树中所有的图片元素;
基于所述目标DOM树中所有的图片元素,确定所述所有的图片元素的祖先元素;
将所述祖先元素确定为所述第一元素;
在所述第一元素上配置监听器,所述监听器用于监听到所述第一元素下的任一后代元素对应的资源加载失败。
3.根据权利要求1所述的方法,其特征在于,所述在网页加载过程中,对所述网页的目标DOM树的第一元素进行监听包括:
在网页加载过程中,向所述第一元素的各个后代元素发送询问消息,所述询问消息用于询问所述各个后代元素中是否存在资源加载失败的元素;
接收任一后代元素返回的事件通知消息,所述事件通知消息用于表示所述后代元素对应的资源加载失败;
若根据所述事件通知消息确定所述后代元素为图片元素,则确定监听到所述第一元素下的图片元素对应的图片资源加载失败。
4.根据权利要求1所述的方法,其特征在于,所述获取所述图片资源的第二网络地址之前,所述方法还包括:
在获取到所述图片资源的第一网络地址之后,延迟目标时长,从所述目标DOM树中的所述图片元素中,获取所述图片资源的第三网络地址;
若所述第三网络地址与所述第一网络地址相同,则执行获取所述图片资源的第二网络地址的步骤。
5.根据权利要求4所述的方法,其特征在于,所述获取所述图片资源的第二网络地址之前,所述方法还包括:
若所述第三网络地址与所述第一网络地址相同,且所述第一网络地址中不包括所述第一标识和所述第二标识,在图片重试数据库中查询是否存在所述第一网络地址,所述图片重试数据库用存储历史重试过程中获取到的图片网络地址,所述第一标识用于表示所述图片资源再次加载失败,所述第二标识用于表示所述第一网络地址指向第一图片;
若所述图片重试数据库中不存在所述第一网络地址,且所述第一网络地址符合目标格式以及符合重试条件,则执行获取所述图片资源的第二网络地址的步骤。
6.根据权利要求4所述的方法,其特征在于,所述方法还包括:
若所述第三网络地址与所述第一网络地址相同,且所述第一网络地址中包括第一标识,则将第一图片加载至所述图片元素对应的网页位置,所述第一标识用于表示所述图片资源再次加载失败。
7.根据权利要求4所述的方法,其特征在于,所述方法还包括:
若所述第三网络地址与所述第一网络地址相同,且所述第一网络地址中不包括所述第一标识,而包括第二标识,则不对与所述图片元素对应的图片资源进行再次加载,所述第二标识用于表示所述第一网络地址指向第一图片。
8.根据权利要求5至7中任一所述的方法,其特征在于,所述方法还包括:
生成目标信息,所述目标信息用于表示与所述图片元素对应的图片资源的重试情况;
向所述网页的来源服务器发送所述目标信息。
9.一种图片加载装置,其特征在于,所述装置包括:
监听模块,用于在网页加载过程中,对所述网页的目标DOM树的第一元素进行监听,所述目标DOM树用于表示所述网页的各个元素以及所述元素之间的关系,所述第一元素为多个元素的祖先元素,所述多个元素中存在图片元素;
第一获取模块,用于响应于监听到所述第一元素下的任一图片元素对应的图片资源加载失败,从所述目标DOM树中的所述图片元素中,获取所述图片资源的第一网络地址;
第二获取模块,用于获取所述图片资源的第二网络地址,所述第二网络地址与所述第一网络地址的域名不同,且指向同一图片资源;
第一加载模块,包括:获取单元,用于基于所述第二网络地址,获取所述图片资源,加载单元,用于对获取到的所述图片资源进行加载。
10.一种计算机设备,其特征在于,所述计算机设备包括处理器和存储器,所述存储器用于存储至少一段程序代码,所述至少一段程序代码由所述处理器加载并执行权利要求1至8任一权利要求所述的图片加载方法。
CN202011084568.8A 2020-10-12 2020-10-12 图片加载方法、装置、设备及可读存储介质 Pending CN112052419A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202011084568.8A CN112052419A (zh) 2020-10-12 2020-10-12 图片加载方法、装置、设备及可读存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202011084568.8A CN112052419A (zh) 2020-10-12 2020-10-12 图片加载方法、装置、设备及可读存储介质

Publications (1)

Publication Number Publication Date
CN112052419A true CN112052419A (zh) 2020-12-08

Family

ID=73606312

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202011084568.8A Pending CN112052419A (zh) 2020-10-12 2020-10-12 图片加载方法、装置、设备及可读存储介质

Country Status (1)

Country Link
CN (1) CN112052419A (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113489678A (zh) * 2021-06-01 2021-10-08 深圳市景阳信息技术有限公司 网络协议切换方法、装置、计算设备及存储介质

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113489678A (zh) * 2021-06-01 2021-10-08 深圳市景阳信息技术有限公司 网络协议切换方法、装置、计算设备及存储介质

Similar Documents

Publication Publication Date Title
CN110674022B (zh) 行为数据获取方法、装置及存储介质
CN110413501B (zh) 浏览器兼容性测试方法、装置、系统及可读存储介质
CN113191117B (zh) 电子文档的编辑方法、装置、设备及存储介质
CN111092809B (zh) 实时推送信息的方法、装置、计算机设备及存储介质
CN109040339B (zh) 基于ajax的跨域请求处理方法、装置及设备
CN112420217B (zh) 消息推送方法、装置、设备及存储介质
CN111159604A (zh) 图片资源加载方法及装置
CN111177013A (zh) 日志数据获取方法、装置、计算机设备及存储介质
CN112257006A (zh) 页面信息的配置方法、装置、设备及计算机可读存储介质
CN111125602B (zh) 页面构建方法、装置、设备和存储介质
CN111737100A (zh) 数据获取方法、装置、设备及存储介质
CN113467663B (zh) 界面配置方法、装置、计算机设备及介质
CN111459466A (zh) 代码生成方法、装置、设备及存储介质
CN113377647B (zh) 页面处理方法、装置、服务器、终端及可读存储介质
CN108038232B (zh) 网页编辑方法、装置和系统、存储介质
CN113204302A (zh) 基于虚拟机器人的操作方法、装置、设备及存储介质
CN112910722B (zh) 网络请求测试方法、装置、终端及存储介质
CN112052419A (zh) 图片加载方法、装置、设备及可读存储介质
CN107800720B (zh) 劫持上报方法、装置、存储介质及设备
CN110390065B (zh) 网页获取方法、装置及系统
CN114385939A (zh) 应用显示方法、应用显示系统、装置及设备
CN111294320B (zh) 数据转换的方法和装置
CN111241451A (zh) 网页处理方法、装置、计算机设备及存储介质
CN112416356A (zh) Json字符串的处理方法、装置、设备及存储介质
CN113076452A (zh) 应用分类的方法、装置、设备及计算机可读存储介质

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination