CN104111950A - 网页图片加载方法及加载装置 - Google Patents

Abstract

一种网页图片加载方法，包括：从服务器获取待加载图片文件的大小；判断待加载图片文件的大小是否小于预设阈值；若是，则由服务器下载待加载图片文件，将所下载的待加载图片文件加载并显示于网页中；以及若否，则读取本地图片文件，将本地预设图片文件加载并显示于网页中。此外，本发明还提供一种网页图片加载装置。上述网页图片加载方法与加载装置可更有效的提高网页图片的加载速度，节省网络流量。

Description

网页图片加载方法及加载装置

技术领域

本发明涉及网页图片加载技术，尤其涉及一种网页图片加载方法及加载装置。

背景技术

随着网页技术的发展，网页中所包含的信息量也越来越大，图片文件在网页中所占的比重也越来也大，然而图片文件的尺寸通常都比较大，因此大量的图片文件会严重影响网页的加载速度，并且为加载这些图片文件还会消耗比较多的网络流量。现有技术中通常是通过在网页中使用GIF(Graphics Interchange Format，图像互换格式)等尺寸较小的格式的图片文件来提高网页加载的速度，节省网络流量，但这样做并没有使网页中的图片文件总数量减少，如果网页中的图片文件总数量很大的话，网页图片加载的总速度依然会受到影响，加载网页图片时所需要使用的网络总流量也依然很大，因此如何有效提高网页图片的加载速度，节省网络流量是当前的一大难题。

发明内容

有鉴于此，本发明提供一种网页图片加载方法及加载装置，可更有效的提高网页图片的加载速度，节省网络流量。

一种网页图片加载方法，包括：从服务器获取待加载图片文件的尺寸；判断所述待加载图片文件的尺寸是否小于预设阈值；若是，则由所述服务器下载所述待加载图片文件，将所下载的待加载图片文件加载并显示于网页中；以及若否，则读取本地预设图片文件，将所述本地预设图片文件加载并显示于所述网页中。

一种网页图片加载装置，包括：待加载图片文件尺寸获取模块，用于从服务器获取待加载图片文件的尺寸；判断模块，用于判断所述待加载图片文件尺寸获取模块获取的所述待加载图片文件的尺寸是否小于预设阈值；第一处理模块，用于若所述判断模块的判断结果为是，则由所述服务器下载所述待加载图片文件，将所下载的待加载图片文件加载并显示于网页中；以及第二处理模块，用于若所述判断模块的判断结果为若否，则读取本地预设图片文件，将所述本地预设图片文件加载并显示于所述网页中。

本发明实施例提供的网页图片加载方法及加载装置，通过判断待加载网页图片文件的尺寸是否小于预设阈值，当待加载网页图片文件的尺寸大于或等于预设阈值时，读取本地图片文件，将所述本地图片文件加载并显示于所述网页中，可减少网页中待加载图片文件的总下载时间，从而有效提高网页加载的速度，并可节省网络流量。

为让本发明的上述和其他目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附图式，作详细说明如下。

附图说明

图1为本发明第一实施例提供的网页图片加载方法的流程图。

图2为本发明第二实施例提供的网页图片加载方法的流程图。

图3为本发明第二实施例提供的网页图片加载方法的加载效果图。

图4为本发明第三实施例提供的网页图片加载方法的流程图。

图5为本发明第三实施例提供的网页图片加载方法的加载效果图。

图6为本发明第四实施例提供的网页图片加载装置的结构示意图。

图7为本发明第五实施例提供的网页图片加载装置的结构示意图。

图8为本发明第六实施例提供的网页图片加载装置的结构示意图。

具体实施方式

为更进一步阐述本发明为实现预定发明目的所采取的技术手段及功效，以下结合附图及较佳实施例，对依据本发明的具体实施方式、结构、特征及其功效，详细说明如后。

本发明实施例所提供的网页图片加载方法可应用于用户终端中实现在网页浏览时对网页图片的加载，用户终端可以包括智能手机、平板电脑、电子书阅读器、MP3播放器（Moving Picture Experts Group Audio Layer III，动态影像专家压缩标准音频层面3）、MP4（Moving Picture Experts GroupAudio Layer IV，动态影像专家压缩标准音频层面4）播放器、膝上型便携计算机和台式计算机等等。

第一实施例

图1为第一实施例提供的网页图片加载方法的流程图。如图1所示，本实施例的网页图片加载方法包括以下步骤：

步骤S11，从服务器获取待加载图片文件的尺寸。

待加载图片文件为待加载的网页中的图片文件，根据待加载图片文件的统一资源定位符（Uniform Resource Locator，URL）可通过客户端由服务器获得该待加载图片文件的尺寸（也可称之为大小）。

步骤S12，判断所述待加载图片文件的尺寸是否小于预设阈值。

若步骤S12的判断结果为是，则执行步骤S13：由所述服务器下载所述待加载图片文件，将所下载的待加载图片文件加载并显示于网页中。

具体的，若步骤S12的判断结果为待加载图片文件的尺寸小于预设阈值，则根据待下载图片文件的URL由服务器下载该待下载图片文件，然后将下载的待加载图片文件中的图片数据加载在网页中并显示出来。

若步骤S12的判断结果为否，则执行步骤S14：读取本地预设图片文件，将所述本地预设图片文件加载并显示于所述网页中。

具体的，若步骤S12的判断结果为待加载图片文件的尺寸大于或等于预设阈值，则读取本地预设图片文件，加载本地预设图片中的图片数据至网页，并显示在网页中与原始待加载图片文件相对应的位置。

本发明实施例提供的网页图片加载方法，通过判断待加载网页图片文件的尺寸是否小于预设阈值，当待加载网页图片文件的尺寸大于或等于预设阈值时，读取本地图片文件，将所述本地图片文件加载并显示于所述网页中，可减少网页中待加载图片文件的总下载时间，从而有效提高网页加载的速度，并可节省网络流量。

第二实施例

图2为第二实施例提供的网页图片加载方法的流程图。如图2所示，本实施例的网页图片加载方法包括以下步骤：

步骤S21，根据用户输入的数值，设置预设阈值。

预设阈值为是否下载待加载网页图片文件的判断标准，默认值可为200k。但可以理解的是，预设阈值也可以根据侦测到的用户终端当前所使用的网络的质量、类型、或月剩余网络流量设置，例如：若侦测到用户终端当前所使用的是速度较快的宽带网络、或免费的无线网络（如WiFi等），则可以设置较高的预设阈值；若侦测到用户终端当前的月剩余网络流量较少、或网络传输速度较差，则可以设置较低的预设阈值。

可以理解的是，预设阈值也可以根据用户在浏览器提供的预设阈值设置控件中输入的数值设置。

根据侦测到的用户终端当前所使用的网络的质量、类型、月剩余网络流量设置，或根据用户输入的数值设置预设阈值，也即根据网络或用户的需求随时调整加载策略，既可以兼顾用户对下载速度的需求又可以最大限度的保证网页信息的完整输出，从而可以使得网页图片数据的加载更具有灵活性。

步骤S22，从所述服务器获取待加载的网页数据。

具体的，用户终端通过客户端向服务器发送网页页面加载请求，服务器根据该网页页面加载请求返回该网页的网页数据。其中，客户端可以为网页浏览器，网页数据可以为该网页的超文本标记语言（Hypertext MarkupLanguage，HTML）文档，其中包括该网页中的文字、待加载图片文件及该待加载图片文件的统一资源定位符（Uniform Resource Locator，URL）等信息数据。

步骤S23，分析所述网页数据，获取所述网页数据中待加载图片文件的URL。

步骤S24，根据所述待加载图片文件的URL从所述服务器获取所述待加载图片文件的尺寸。

步骤S25，判断所述待加载图片文件的尺寸是否小于预设阈值。

此步骤可以参考第一实施例中步骤S12中的相应内容，这里不再赘述。

若步骤S25的判断结果为是，则执行步骤S26：由所述服务器下载所述待加载图片文件，将所下载的待加载图片文件加载并显示于网页中。

此步骤可以参考第一实施例中步骤S13中的相应内容，这里不再赘述。

若步骤S25的判断结果为否，则执行步骤S27：读取本地图片文件，将所述本地图片文件加载并显示于所述网页中。

当步骤S25的判断结果为待加载图片文件的尺寸大于或等于预设阈值时，直接从用户终端的本地存储器中读取预设图片文件，用该预设图片文件代替原待加载图片文件加载并显示于网页的相应位置中，显示效果可如图3所示。预设图片文件可以为TIFF(TaglmageFileFormat)、GIF(GraphicsInterchange Format，图像互换格式)、JPEG（joint Photographic Experts Group，联合图像专家组)、PNG(Portable Network Graphics，可移植性网络图像)、BMP（bitmap，位图）等格式中的任一种。

由于从本地存储于读取预设图片文件的速度远远高于从服务器下载待加载图片文件的速度，且读取本地存储器中的预设图片文件无需网络流量，因此用预设图片文件代替尺寸超过预设阈值的待加载图片文件可极大的减少网页图片加载的总时间，从而提高网页图片加载的速度，且可以节省网络流量。

步骤S28，侦测用户通过作用于所述网页中的所述本地预设图片文件显示区域上的动作所发出的下载指令。

用户通过作用于网页中的本地预设图片文件显示区域的动作所发出的下载指令可包括：用户在网页中本地预设图片文件显示区域上的滑动手势或点击动作等。根据预设，可将用户的特定滑动手势（如：画圈、向某个特定方向滑动、将图片拖曳到特定区域等）、或点击网页中的本地预设图片文件显示区域的动作（可包括：单击、双击等）作为下载指令。

下载指令可以是用户通过手指在用户终端触摸屏上所做的动作、或通过鼠标在网页中本地预设图片文件显示区域所做的动作、或通过手指在触摸板上所做的动作发出的指令。

当侦测到用户在本地预设图片文件显示区域上的上述动作时，可认为用户需要下载该显示区域的原始待加载图片文件。

步骤S29，根据所述下载指令，下载所述待加载图片文件，将所下载的待加载图片文件加载并显示于所述网页中。

本发明实施例提供的网页图片加载方法，通过判断待加载网页图片文件的尺寸是否小于预设阈值，当待加载网页图片文件的尺寸大于或等于预设阈值时，读取本地图片文件，将所述本地图片文件加载并显示于所述网页中，可减少网页中待加载图片文件的总下载时间，从而有效提高网页加载的速度，并可节省网络流量。

第三实施例

图4为第三实施例提供的网页图片加载方法的流程图。如图4所示，本实施例的网页图片加载方法包括以下步骤：

步骤S31，从服务器获取待加载图片文件的尺寸。

此步骤可以参考第一实施例中步骤S11中的相应内容，这里不再赘述。

步骤S32，判断所述待加载图片文件的尺寸是否小于预设阈值。

此步骤可以参考第一实施例中步骤S12中的相应内容，这里不再赘述。

若步骤S32的判断结果为是，则执行步骤S33：由所述服务器下载所述待加载图片文件，将所下载的待加载图片文件加载并显示于网页中。

此步骤可以参考第一实施例中步骤S13中的相应内容，这里不再赘述。

若步骤S32的判断结果为否，则执行步骤S34：显示提示窗口，所述提示窗口中包括所述待加载图片文件的尺寸以及用于询问用户是否下载所述待加载图片文件的选择界面。

具体的，当步骤S32的判断结果为待加载图片文件的尺寸大于或等于预设阈值时，则可显示如图5所示的提示窗口，提示窗口中可包括待加载图片文件的尺寸以及用于询问用户是否下载待加载图片文件的选择界面。提示窗口用于提示用户待加载图片文件的大小，以及与用户进行交互，以便根据用户的指令选择是否下载待加载图片文件。

步骤S35，监测用户在所述选择界面输入的选择指令，当监测到下载指令时，下载所述待加载图片文件，将所下载的待加载图片文件加载并显示于所述网页中。

选择指令可包括下载指令与不下载指令，其中默认可将用户在选择界面的双击动作，或用户通过选择界面调用麦克风输入的预设语音口令作为下载指令。例如，假设预设将用户在如图5所示的选择界面中（标有“是否下载？”字样的区域）的双击动作作为下载指令，当侦测到用户在如图5所示的选择界面的双击动作时，根据待加载图片文件的URL从服务器下载该待加载图片文件，然后将该待加载图片文件中的图片数据加载并显示在网页中。

通过提示窗口提示用户待加载图片文件的大小，并通过选择界面询问用户是否下载，然后根据监测到的下载指令下载待加载图片文件，可使得用户可以根据自己的需求自由选择是否下载待加载图片文件，从而提高了在网页图片加载时与用户的交互性，进而可使得网页图片的加载更具有灵活性。

本发明实施例提供的网页图片加载方法，通过判断待加载网页图片文件的尺寸是否小于预设阈值，当待加载网页图片文件的尺寸大于或等于预设阈值时，读取本地图片文件，将所述本地图片文件加载并显示于所述网页中，可减少网页中待加载图片文件的总下载时间，从而有效提高网页加载的速度，并可节省网络流量。

第四实施例

图6为第四实施例提供的网页图片加载装置的结构示意图。本实施例提供的网页图片加载装置可以用于实现第一实施例中的网页图片加载方法。如图6所示，网页图片加载装置10包括：待加载图片文件尺寸获取模块11、判断模块12、第一处理模块13以及第二处理模块14。

其中，待加载图片文件尺寸获取模块11用于从服务器获取待加载图片文件的尺寸。

判断模块12用于判断所述待加载图片文件尺寸获取模块11获取的所述待加载图片文件的尺寸是否小于预设阈值。

若所述判断模块12的判断结果为是，则第一处理模块13由所述服务器下载所述待加载图片文件，将所下载的待加载图片文件加载并显示于网页中。

若所述判断模块12的判断结果为否，则第二处理模块14读取本地预设图片文件，将所述本地预设图片文件加载并显示于所述网页中。

本实施例网页图片加载装置10的各功能模块实现各自功能的具体过程，请参见上述图1至图5所示实施例中描述的具体内容，此处不再赘述。

本发明实施例提供的网页图片加载装置，通过判断待加载网页图片文件的尺寸是否小于预设阈值，当待加载网页图片文件的尺寸大于或等于预设阈值时，读取本地图片文件，将所述本地图片文件加载并显示于所述网页中，可减少网页中待加载图片文件的总下载时间，从而有效提高网页加载的速度，并可节省网络流量。

第五实施例

图7为第五实施例提供的网页图片加载装置的结构示意图。本实施例提供的网页图片加载装置可以用于实现第二实施例中的网页图片加载方法。如图7所示，网页图片加载装置20包括：预设阈值设置模块21、待加载图片文件尺寸获取模块22、判断模块23、第一处理模块24以及第二处理模块25、下载指令侦测模块26、待加载图片文件显示模块27。

其中，预设阈值设置模块21用于根据用户输入的数值，设置预设阈值。

待加载图片文件尺寸获取模块22还包括：第一获取单元221、第二获取单元222、第三获取单元223。其中第一获取单元221用于从所述服务器获取待加载的网页数据。第二获取单元222用于分析所述第一获取单元221获取的所述网页数据，获取所述网页数据中待加载图片文件的URL。第三获取单元223用于根据所述第二获取单元222获取的所述待加载图片文件的URL从所述服务器获取所述待加载图片文件的尺寸。

判断模块23用于判断所述第三获取单元223获取的所述待加载图片文件的尺寸是否小于预设阈值。

若所述判断模块23的判断结果为是，第一处理模块24用于由所述服务器下载所述待加载图片文件，将所下载的待加载图片文件加载并显示于网页中。

若所述判断模块23的判断结果为否，第二处理模块25用于读取本地图片文件，将所述本地图片文件加载并显示于所述网页中。

下载指令侦测模块26用于侦测用户通过作用于所述网页中的所述本地预设图片文件显示区域上的动作所发出的下载指令。

待加载图片文件显示模块27用于根据所述下载指令侦测模块26侦测到的所述下载指令，下载所述待加载图片文件，将所下载的待加载图片文件加载并显示于所述网页中。

本实施例网页图片加载装置20的各功能模块实现各自功能的具体过程，请参见上述图1至图5所示实施例中描述的具体内容，此处不再赘述。

本发明实施例提供的网页图片加载装置，通过判断待加载网页图片文件的尺寸是否小于预设阈值，当待加载网页图片文件的尺寸大于或等于预设阈值时，读取本地图片文件，将所述本地图片文件加载并显示于所述网页中，可减少网页中待加载图片文件的总下载时间，从而有效提高网页加载的速度，并可节省网络流量。

第六实施例

图8为第六实施例提供的网页图片加载装置的结构图。本实施例的网页图片加载装置可用于实现第三实施例中的网页图片加载方法。如图8所示，于本实施例中，所述网页图片加载装置30包括：待加载图片文件尺寸获取模块31、判断模块32、第一处理模块33、下载提示模块34、监测模块35。

其中，待加载图片文件尺寸获取模块31用于从服务器获取待加载图片文件的尺寸。

判断模块32用于判断所述待加载图片文件尺寸获取模块31获取的所述待加载图片文件的尺寸是否小于预设阈值。

若所述判断模块32的判断结果为是，第一处理模块33用于由所述服务器下载所述待加载图片文件，将所下载的待加载图片文件加载并显示于网页中。

若所述判断模块32的判断结果为否，下载提示模块34用于显示提示窗口，所述提示窗口中包括所述待加载图片文件的尺寸以及用于询问用户是否下载所述待加载图片文件的选择界面。

监测模块35用于监测用户在所述下载提示模块34显示的所述选择界面输入的选择指令，当监测到下载指令时，下载所述待加载图片文件，将所下载的待加载图片文件加载并显示于所述网页中。

本实施例网页图片加载装置30的各功能模块实现各自功能的具体过程，请参见上述图1至图5所示实施例中描述的具体内容，此处不再赘述。

本发明实施例提供的网页图片加载装置，通过判断待加载网页图片文件的尺寸是否小于预设阈值，当待加载网页图片文件的尺寸大于或等于预设阈值时，读取本地图片文件，将所述本地图片文件加载并显示于所述网页中，可减少网页中待加载图片文件的总下载时间，从而有效提高网页加载的速度，并可节省网络流量。

需要说明的是，本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。对于装置类实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

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

本领域普通技术人员可以理解实现上述实施例的全部或部分步骤可以通过硬件来完成，也可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中，上述提到的存储介质可以是只读存储器，磁盘或光盘等。

以上所述，仅是本发明的较佳实施例而已，并非对本发明作任何形式上的限制，虽然本发明已以较佳实施例揭露如上，然而并非用以限定本发明，任何熟悉本专业的技术人员，在不脱离本发明技术方案范围内，当可利用上述揭示的技术内容做出些许更动或修饰为等同变化的等效实施例，但凡是未脱离本发明技术方案内容，依据本发明的技术实质对以上实施例所作的任何简单修改、等同变化与修饰，均仍属于本发明技术方案的范围内。

Claims (12)

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

从服务器获取待加载图片文件的尺寸；

判断所述待加载图片文件的尺寸是否小于预设阈值；

若是，则由所述服务器下载所述待加载图片文件，将所下载的待加载图片文件加载并显示于网页中；以及

若否，则读取本地预设图片文件，将所述本地预设图片文件加载并显示于所述网页中。

2.如权利要求1所述的网页图片加载方法，其特征在于，所述从服务器获取待加载图片文件的尺寸的步骤之前，还包括：

根据用户输入的数值，设置预设阈值。

3.如权利要求1所述的网页图片加载方法，其特征在于，所述从服务器获取待加载图片文件的尺寸的步骤包括：

从所述服务器获取待加载的网页数据；

分析所述网页数据，获取所述网页数据中待加载图片文件的统一资源定位符；

根据所述待加载图片文件的统一资源定位符从所述服务器获取所述待加载图片文件的尺寸。

4.如权利要求1所述的网页图片加载方法，其特征在于，还包括：

若所述待加载图片文件的尺寸大于或等于预设阈值，则显示提示窗口，所述提示窗口中包括所述待加载图片文件的尺寸以及用于询问用户是否下载所述待加载图片文件的选择界面。

5.如权利要求4所述的网页图片加载方法，其特征在于，还包括：

监测用户在所述选择界面输入的选择指令，当监测到下载指令时，下载所述待加载图片文件，将所下载的待加载图片文件加载并显示于所述网页中。

6.如权利要求1所述的网页图片加载方法，其特征在于，所述若否，则读取本地预设图片文件，将所述本地预设图片文件加载并显示于所述网页中的步骤之后还包括：

侦测用户通过作用于所述网页中的所述本地预设图片文件显示区域上的动作所发出的下载指令；

根据所述下载指令，下载所述待加载图片文件，将所下载的待加载图片文件加载并显示于所述网页中。

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

待加载图片文件尺寸获取模块，用于从服务器获取待加载图片文件的尺寸；

判断模块，用于判断所述待加载图片文件尺寸获取模块获取的所述待加载图片文件的尺寸是否小于预设阈值；

第一处理模块，用于若所述判断模块的判断结果为是，则由所述服务器下载所述待加载图片文件，将所下载的待加载图片文件加载并显示于网页中；以及

第二处理模块，用于若所述判断模块的判断结果为若否，则读取本地预设图片文件，将所述本地预设图片文件加载并显示于所述网页中。

8.如权利要求7所述的网页图片加载方法，其特征在于，还包括：预设阈值设置模块，用于根据用户输入的数值，设置预设阈值。

9.如权利要求7所述的网页图片加载方法，其特征在于，所述待加载图片文件尺寸获取模块包括：

第一获取单元，用于从所述服务器获取待加载的网页数据；

第二获取单元，用于分析所述第一获取单元获取的所述网页数据，获取所述网页数据中待加载图片文件的统一资源定位符；

第三获取单元，用户根据所述第二获取单元获取的所述待加载图片文件的统一资源定位符从所述服务器获取所述待加载图片文件的尺寸。

10.如权利要求7所述的网页图片加载方法，其特征在于，还包括：下载提示模块，用于若所述待加载图片文件的尺寸大于或等于预设阈值，则显示提示窗口，所述提示窗口中包括所述待加载图片文件的尺寸以及用于询问用户是否下载所述待加载图片文件的选择界面。

11.如权利要求10所述的网页图片加载方法，其特征在于，还包括：监测模块，用于监测用户在所述下载提示模块显示的所述选择界面输入的选择指令，当监测到下载指令时，下载所述待加载图片文件，将所下载的待加载图片文件加载并显示于所述网页中。

12.如权利要求7所述的网页图片加载方法，其特征在于，还包括：

下载指令侦测模块，用于侦测用户通过作用于所述网页中的所述本地预设图片文件显示区域上的动作所发出的下载指令；

待加载图片文件显示模块，用于根据所述下载指令侦测模块侦测到的所述下载指令，下载所述待加载图片文件，将所下载的待加载图片文件加载并显示于所述网页中。