网页图片显示方法及终端设备与流程

本发明涉及计算机技术领域，尤其涉及一种网页图片显示方法及终端设备。

背景技术：

网页上如果需要展示丰富多彩的展示效果，最基本的方式是嵌入图片资源。但是图片资源一般比较大，需要占用一定的流量，且过多的图片链接请求会导致浏览器并发请求数占用，造成卡顿的假象。

技术实现要素：

有鉴于此，本发明实施例提供了网页图片显示方法及终端设备，以解决目前网页图片链接请求过多时会导致浏览器并发请求数占用，造成卡顿的问题。

本发明实施例的第一方面提供了网页图片显示方法，包括：

从服务器获取目标网页的网页信息；所述目标网页包含目标图片；

从所述网页信息中获取所述目标图片对应的图形绘制对象；所述目标图片对应的图形绘制对象包括所述目标图片的图片信息；

根据所述目标图片对应的图形绘制对象，通过层叠样式表中的图形绘制属性在所述目标网页上绘制所述目标图片。

本发明实施例的第二方面提供了网页图片显示装置，包括：

第一获取模块，用于从服务器获取目标网页的网页信息；所述目标网页包含目标图片；

第二获取模块，用于从所述网页信息中获取所述目标图片对应的图形绘制对象；所述目标图片对应的图形绘制对象包括所述目标图片的图片信息；

绘制模块，用于根据所述目标图片对应的图形绘制对象，通过层叠样式表中的图形绘制属性在所述目标网页上绘制所述目标图片。

本发明实施例的第三方面提供了计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现第一方面中的网页图片显示方法。

本发明实施例的第四方面提供了终端设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现第一方面中的网页图片显示方法。

本发明实施例与现有技术相比存在的有益效果是：通过从网页信息中获取目标图片对应的图形绘制对象，再根据目标图片对应的图形绘制对象，通过层叠样式表中的图形绘制属性在目标网页上绘制目标图片，能够在不占图片链接请求的情况下显示图片，从而提高网页的加载速度，减少因图片链接造成的网页卡顿。

附图说明

为了更清楚地说明本发明实施例中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1是本发明实施例提供的网页图片显示方法的实现流程图；

图2是本发明实施例提供的网页图片显示方法中将目标图片的数据量与预设数据量阈值进行对比的实现流程图；

图3是本发明实施例提供的网页图片显示方法中将目标网页的历史加载时间与预设时间阈值进行对比的实现流程图；

图4是本发明实施例提供的网页图片显示方法中判断所述目标图片是否位于目标网页的预设区域的实现流程图；

图5是本发明实施例提供的网页图片显示方法中将目标网页上绘制出的目标图片替换为获取到的目标图片的实现流程图；

图6是本发明实施例提供的网页图片显示装置的示意图；

图7是本发明实施例提供的终端设备的示意图。

具体实施方式

以下描述中，为了说明而不是为了限定，提出了诸如特定系统结构、技术之类的具体细节，以便透彻理解本发明实施例。然而，本领域的技术人员应当清楚，在没有这些具体细节的其它实施例中也可以实现本发明。在其它情况中，省略对众所周知的系统、装置、电路以及方法的详细说明，以免不必要的细节妨碍本发明的描述。

为了说明本发明所述的技术方案，下面通过具体实施例来进行说明。

图1为本发明实施例提供的网页图片显示方法的实现流程图，详述如下：

在s101中，从服务器获取目标网页的网页信息；所述目标网页包含目标图片。

在本实施例中，用户端可以向服务器发送目标网页的网页标识，获取目标网页的网页信息。其中，目标网页为用户端需要进行显示的网页，目标图片为目标网页中的图片，目标网页中可以包含一个或多个目标图片。

在s102中，从所述网页信息中获取所述目标图片对应的图形绘制对象；所述目标图片对应的图形绘制对象包括所述目标图片的图片信息。

在本实施例中，目标网页的网页信息包括该目标网页所包含的目标图片对应的图形绘制对象。目标图片对应的图形绘制对象包括目标图片的图片信息，用于在网页上显示该目标图片。图片信息可以包括图片上每个像素点的位置、像素等信息。例如，目标图片对应的图形绘制对象可以为canvas对象。

可选地，所述目标图片对应的图形绘制对象为开发端在网页开发过程中通过图形绘制对象的像素获取属性获取到所述目标图片的图片信息后，根据所述目标图片的图片信息生成的图形绘制对象。

在本实施例中，以canvas对象为例，图形绘制对象的像素获取属性可以为canvas对象的getimagedata属性。

在网页开发时，开发端可以获取网页所需的目标图片资源，创建canvas对象，将目标图片资源填充到canvas对象中；然后通过canvas对象的getimagedata属性，获取canvas对象中目标图片每个像素点的位置、颜色等图片信息，根据图片信息生成目标图片对应的canvas对象，并将目标图片对应的canvas对象添加到目标网页的网页信息中，将目标网页的网页信息保存到服务器中。

在网页显示时，用户端从服务器获取目标网页的网页信息，并从网页信息中获取目标图片对应的canvas对象。

在s103中，根据所述目标图片对应的图形绘制对象，通过层叠样式表中的图形绘制属性在所述目标网页上绘制所述目标图片。

在本实施例中，层叠样式表(cascadingstylesheets，css)中的图形绘制属性可以为box-shadow属性。用户端可以根据目标图片对应的canvas对象，利用css的box-shadow属性对应的api(applicationprogramminginterface,应用程序编程接口)在目标网页上绘制该目标图片。

本发明实施例通过从网页信息中获取目标图片对应的图形绘制对象，再根据目标图片对应的图形绘制对象，通过层叠样式表中的图形绘制属性在目标网页上绘制目标图片，能够在不占图片链接请求的情况下显示图片，从而提高网页的加载速度，减少因图片链接造成的网页卡顿。

在实际应用场景中，因为图片一般比较大，且浏览器同时请求图片数是有限制的，一般是4个，如果网页上有100张图片，那浏览器需要分25次去请求100张图片，假如每次请求需要0.5秒，那总共需要12.5秒才能加载完页面。本发明实施例将图片转为html，实现网页快速呈现，无需占用浏览器连接数资源，通过css的box-shadow属性对html标签生成阴影，并控制阴影偏移、模糊、颜色等参数，形成图片。通过本方案，可以实现在网页不存在一个图片资源，且对图片链接零占用的情况下显示图片，从而提高网页的加载速度。

作为本发明的一个实施例，如图2所示，在s101之后，在s102之前，上述方法还可以包括：

在s201中，获取所述目标图片的数据量，并将所述目标图片的数据量与预设数据量阈值进行对比。

在s202中，若所述目标图片的数据量小于所述预设数据量阈值，则从服务器加载所述目标图片。

在s203中，若所述目标图片的数据量大于所述预设数据量阈值，则跳转至所述从网页信息中获取目标图片对应的图形绘制对象的步骤。

在本实施例中，目标图片的数据量为该目标图片的数据大小。目标图片的数据量可以包含在网页信息中，或者包含在目标图片对应的图形绘制对象中。若目标图片的数据量小于预设数据量阈值，则表示该目标图片为小图片，可以直接从服务器加载该图片；若目标图片的数据量大于预设数据量阈值，则表示该目标图片为大图片，可以按照s102和s103的步骤在网页上进行图片绘制。

本发明实施例通过图片数据量和预设数据量阈值判断目标图片的大小，对于小图片直接从服务器加载，对于大图片在用户端进行绘制，通过图片加载和图片绘制两种显示方式灵活选择，能够提升网页的加载速度。

作为本发明的一个实施例，如图3所示，在s101之后，在s102之前，上述方法还可以包括：

在s301中，获取目标网页的历史加载时间，并将所述目标网页的历史加载时间与预设时间阈值进行对比。

在s302中，若所述目标网页的历史加载时间小于所述预设时间阈值，则从服务器加载所述目标图片。

在s303中，若所述目标网页的历史加载时间大于所述预设时间阈值，则跳转至所述从网页信息中获取目标图片对应的图形绘制对象的步骤。

在本实施例中，目标网页的历史加载时间为目标网页在一次加载过程中从开始加载到加载全部完成所需的时长。历史加载时间可以为目标网页所有的历史加载的平均加载时长、最大加载时长或最小加载时长等。用户端可以从服务器获取服务器记录的目标网页的网页加载时间，用户端也可以是从用户端本地获取记录的目标网页的网页加载时间。

本发明实施例根据统计数据中的网页加载时间，对于网页加载时间较短的网页直接从服务器加载其图片，对于网页加载时间较长的网页按照s102和s103的步骤对其图片进行绘制，能够极大提升加载速度慢的网页的加载速度，提升用户体验。

作为本发明的一个实施例，所述网页信息包括所述目标图片在所述目标网页中的位置信息。如图4所示，在s101之后，在s102之前，上述方法还可以包括：

在s401中，根据所述位置信息判断所述目标图片是否位于所述目标网页的预设区域。

在s402中，若所述目标图片位于所述目标网页的预设区域，则从服务器加载所述目标图片。

在s403中，若所述目标图片没有位于所述目标网页的预设区域，则跳转至所述从网页信息中获取目标图片对应的图形绘制对象的步骤。

在本实施例中，预设区域可以为目标网页中靠后或靠下的区域，这些区域目标页面在加载时屏幕上不会首先进行显示，用户浏览目标网页时不会直接看到，通常在等用户浏览其他内容后切换或滚动目标页面，屏幕上才会显示该区域的页面。

若目标图片位于目标网页中的预设区域，则从服务器加载该目标图片，在屏幕显示内容切换到包含预设区域的网页后，图片数据通常已经加载完成，因此可以直接在目标网页上显示加载的图片数据。

若目标图片不位于目标网页的预设区域，则表明该目标图片所在位置会直接在屏幕上显示，此时没有时间从服务器完成数据加载，因此可以按照s102和s103的步骤在网页上绘制该目标图片。

本发明实施例根据图片在网页中的位置，在将预设区域内的图片从服务器加载，预设区域外的图片进行绘制，能够不影响用户浏览体验的前提下，提高页面加载速度，提升图片显示效果。

作为本发明的一个实施例，如图5所示，在s101之后，上述方法还可以包括：

在s501中，从服务器获取所述目标图片。

在s502中，在获取到所述目标图片后，将所述目标网页上绘制出的目标图片替换为获取到的目标图片。

在本实施例中，在网页绘制图片比从服务器加载图片速度更快，但从服务器加载的图片显示效果更好，本发明实施例通过在网页绘制该图片，在从服务器获取到该图片后替换绘制的图片，能够在保证网页加载速度的同时，提升图片的显示效果。

本发明实施例通过从网页信息中获取目标图片对应的图形绘制对象，再根据目标图片对应的图形绘制对象，通过层叠样式表中的图形绘制属性在目标网页上绘制目标图片，能够在不占图片链接请求的情况下显示图片，从而提高网页的加载速度，减少因图片链接造成的网页卡顿。

应理解，上述实施例中各步骤的序号的大小并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本发明实施例的实施过程构成任何限定。

对应于上文实施例所述的网页图片显示方法，图6示出了本发明实施例提供的网页图片显示装置的示意图。为了便于说明，仅示出了与本实施例相关的部分。

参照图6，该装置包括第一获取模块61、第二获取模块62和绘制模块63。

第一获取模块61，用于从服务器获取目标网页的网页信息；所述目标网页包含目标图片。

第二获取模块62，用于从所述网页信息中获取所述目标图片对应的图形绘制对象；所述目标图片对应的图形绘制对象包括所述目标图片的图片信息。

绘制模块63，用于根据所述目标图片对应的图形绘制对象，通过层叠样式表中的图形绘制属性在所述目标网页上绘制所述目标图片。

可选地，所述目标图片对应的图形绘制对象为开发端在网页开发过程中通过图形绘制对象的像素获取属性获取到所述目标图片的图片信息后，根据所述目标图片的图片信息生成的图形绘制对象。

可选地，该装置还包括处理模块，所述处理模块用于：

获取所述目标图片的数据量，并将所述目标图片的数据量与预设数据量阈值进行对比；

若所述目标图片的数据量小于所述预设数据量阈值，则从服务器加载所述目标图片；

若所述目标图片的数据量大于所述预设数据量阈值，则跳转至所述从网页信息中获取目标图片对应的图形绘制对象的步骤。

可选地，所述处理模块还用于：

获取目标网页的历史加载时间，并将所述目标网页的历史加载时间与预设时间阈值进行对比；

若所述目标网页的历史加载时间小于所述预设时间阈值，则从服务器加载所述目标图片；

若所述目标网页的历史加载时间大于所述预设时间阈值，则跳转至所述从网页信息中获取目标图片对应的图形绘制对象的步骤。

可选地，所述网页信息包括所述目标图片在所述目标网页中的位置信息；所述处理模块还用于：

根据所述位置信息判断所述目标图片是否位于所述目标网页的预设区域；

若所述目标图片位于所述目标网页的预设区域，则从服务器加载所述目标图片；

若所述目标图片没有位于所述目标网页的预设区域，则跳转至所述从网页信息中获取目标图片对应的图形绘制对象的步骤。

可选地，所述处理模块还用于：

从服务器获取所述目标图片；

在获取到所述目标图片后，将所述目标网页上绘制出的目标图片替换为获取到的目标图片。

本发明实施例通过从网页信息中获取目标图片对应的图形绘制对象，再根据目标图片对应的图形绘制对象，通过层叠样式表中的图形绘制属性在目标网页上绘制目标图片，能够在不占图片链接请求的情况下显示图片，从而提高网页的加载速度，减少因图片链接造成的网页卡顿。

图7是本发明一实施例提供的终端设备的示意图。如图7所示，该实施例的终端设备7包括：处理器70、存储器71以及存储在所述存储器71中并可在所述处理器70上运行的计算机程序72，例如程序。所述处理器70执行所述计算机程序72时实现上述各个方法实施例中的步骤，例如图1所示的步骤101至103。或者，所述处理器70执行所述计算机程序72时实现上述各装置实施例中各模块/单元的功能，例如图6所示模块61至63的功能。

示例性的，所述计算机程序72可以被分割成一个或多个模块/单元，所述一个或者多个模块/单元被存储在所述存储器71中，并由所述处理器70执行，以完成本发明。所述一个或多个模块/单元可以是能够完成特定功能的一系列计算机程序指令段，该指令段用于描述所述计算机程序72在所述终端设备7中的执行过程。

所述终端设备7可以是桌上型计算机、笔记本、掌上电脑及云端服务器等计算设备。所述终端设备可包括，但不仅限于，处理器70、存储器71。本领域技术人员可以理解，图7仅仅是终端设备7的示例，并不构成对终端设备7的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件，例如所述终端设备还可以包括输入输出设备、网络接入设备、总线、显示器等。

所称处理器70可以是中央处理单元(centralprocessingunit，cpu)，还可以是其他通用处理器、数字信号处理器(digitalsignalprocessor，dsp)、专用集成电路(applicationspecificintegratedcircuit，asic)、现成可编程门阵列(field-programmablegatearray，fpga)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。

所述存储器71可以是所述终端设备7的内部存储单元，例如终端设备7的硬盘或内存。所述存储器71也可以是所述终端设备7的外部存储设备，例如所述终端设备7上配备的插接式硬盘，智能存储卡(smartmediacard，smc)，安全数字(securedigital，sd)卡，闪存卡(flashcard)等。进一步地，所述存储器71还可以既包括所述终端设备7的内部存储单元也包括外部存储设备。所述存储器71用于存储所述计算机程序以及所述终端设备所需的其他程序和数据。所述存储器71还可以用于暂时地存储已经输出或者将要输出的数据。

所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，仅以上述各功能单元、模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能单元、模块完成，即将所述装置的内部结构划分成不同的功能单元或模块，以完成以上描述的全部或者部分功能。实施例中的各功能单元、模块可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中，上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。另外，各功能单元、模块的具体名称也只是为了便于相互区分，并不用于限制本申请的保护范围。上述系统中单元、模块的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

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

本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。

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

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

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

所述集成的模块/单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明实现上述实施例方法中的全部或部分流程，也可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一计算机可读存储介质中，该计算机程序在被处理器执行时，可实现上述各个方法实施例的步骤。其中，所述计算机程序包括计算机程序代码，所述计算机程序代码可以为源代码形式、对象代码形式、可执行文件或某些中间形式等。所述计算机可读介质可以包括：能够携带所述计算机程序代码的任何实体或装置、记录介质、u盘、移动硬盘、磁碟、光盘、计算机存储器、只读存储器(read-onlymemory，rom)、随机存取存储器(randomaccessmemory，ram)、电载波信号、电信信号以及软件分发介质等。需要说明的是，所述计算机可读介质包含的内容可以根据司法管辖区内立法和专利实践的要求进行适当的增减，例如在某些司法管辖区，根据立法和专利实践，计算机可读介质不包括是电载波信号和电信信号。

以上所述实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围，均应包含在本发明的保护范围之内。