图片的加载方法和装置制造方法及图纸

本申请公开了一种图片的加载方法，包括：获取图片标签，并获取客户端的尺寸信息；根据客户端的尺寸信息从图片标签中获取对应的地址信息；以及根据地址信息加载对应的图片。本申请实施例的方法，基于Javascript来实现，其兼容主流浏览器，根据在图片标签(如img标签)上自定义的加载规则，和当前客户端屏幕的高度做比对，从而选择最优尺寸的图片加载，节省了带宽资源和流量，并提高了页面的展示速度，并且通过设置失败重试功能来实现图片尽可能地加载成功的目的。本申请还公开了一种图片的加载装置。

【技术实现步骤摘要】

本申请涉及互联网
，尤其涉及一种图片的加载方法和装置。
技术介绍
为了能够为用户提供更好的视觉体验，目前的网站页面中会存在大量图片以供用户查看。而网站页面中还可能会存在尺寸过大的图片，此时可简单地通过CSS(级联样式表)样式的设置来实现在小屏幕设备上(如小屏幕的手机等)也能正常显示，但是，此时页面中的实际图片还是用的大尺寸设备时使用的图片，这样会存在浪费资源的情况。虽然，目前可通过HTML5(超文本标记语言)中的标签picture来实现将大尺寸图片的大小调整为适合于小屏幕设备的大小，但是仍存在以下缺点：(1)存在兼容性问题，绝大数主流浏览器还不支持HTML5中的标签picture这一特性；(2)需要以嵌入多个子HTML标签的方式来定义，使用起来不够方便；(3)在网速不佳的情况下，当遇到图片加载失败的情况，且加载失败的图片的相应位置出现空白或带叉的占位符号时，不能再次尝试加载，影响用户体验。
技术实现思路
本申请的目的旨在至少在一定程度上解决上述的技术问题之一。为此，本申请的第一个目的在于提出一种图片的加载方法。该方法基于Javascript来实现，其兼容主流浏览器，根据在图片标签(如img标签)上自定义的加载规则，和当前客户端屏幕的高度做比对，从而选择最优尺寸的图片加载，节省了带宽资源和流量，并提高了页面的展示速度，并且通过设置失败重试功能来实现图片尽可能地加载成功的目的。本申请的第二个目的在于提出一种图片的加载装置。为达到上述目的，本申请第一方面实施例的图片的加载方法，包括：获取图片标签，并获取客户端的尺寸信息；根据所述客户端的尺寸信息从所述图片标签中获取对应的地址信息；以及根据所述地址信息加载对应的图片。本申请实施例的图片的加载方法，可先获取图片标签，并获取客户端的尺寸信息，之后，根据客户端的尺寸信息从图片标签中获取对应的地址信息，并根据地址信息加载对应的图片，即基于Javascript来实现，其兼容主流浏览器，根据在图片标签(如img标签)上自定义的加载规则，和当前客户端屏幕的高度做比对，从而选择最优尺寸的图片加载，节省了带宽资源和流量，并提高了页面的展示速度，并且通过设置失败重试功能来实现图片尽可能地加载成功的目的。为达到上述目的，本申请第二方面实施例的图片的加载装置，包括：第一获取模块，用于获取图片标签，并获取客户端的尺寸信息；第二获取模块，用于根据所述客户端的尺寸信息从所述图片标签中获取对应的地址信息；以及加载模块，用于根据所述地址信息加载对应的图片。本申请实施例的图片的加载装置，可通过第一获取模块获取图片标签，并获取客户端的尺寸信息，第二获取模块根据客户端的尺寸信息从图片标签中获取对应的地址信息，加载模块根据地址信息加载对应的图片，即基于Javascript来实现，其兼容主流浏览器，根据在图片标签(如img标签)上自定义的加载规则，和当前客户端屏幕的高度做比对，从而选择最优尺寸的图片加载，节省了带宽资源和流量，并提高了页面的展示速度，并且通过设置失败重试功能来实现图片尽可能地加载成功的目的。本申请附加的方面和优点将在下面的描述中部分给出，部分将从下面的描述中变得明显，或通过本申请的实践了解到。附图说明本申请上述的和/或附加的方面和优点从下面结合附图对实施例的描述中将变得明显和容易理解，其中，图1是根据本申请一个实施例的图片的加载方法的流程图；图2是根据本申请一个实施例的图片的加载方法的示例图；图3是根据本申请一个实施例的图片的加载装置的结构示意图；图4是根据本申请一个实施例的第二获取模块的结构示意图；以及图5是根据本申请另一个实施例的图片的加载装置的结构示意图。具体实施方式下面详细描述本申请的实施例，所述实施例的示例在附图中示出，其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施例是示例性的，旨在用于解释本申请，而不能理解为对本申请的限制。下面参考附图描述根据本申请实施例的图片的加载方法和装置。图1是根据本申请一个实施例的图片的加载方法的流程图。如图1所示，该图片的加载方法可以包括：S101，获取图片标签，并获取客户端的尺寸信息。具体地，当接收到用户发送针对某个网站页面的浏览请求时，可根据用户的浏览请求提供相应的网页信息，在为用户提供网页信息的过程中，可从该网页信息中读取该页面对应的源码，从源码中通过查找代表图片标签的代码(如<img>等)来获取该页面中所含有的图片标签，并且在读取网页页面对应的源码的同时，获取该用户对应的客户端的尺寸信息。其中，在本申请的实施例中，客户端的尺寸信息(如客户端的屏幕高度)可由客户端直接通过安装在客户端中的jquery工具获取，可以理解，客户端的尺寸信息也可由客户端根据服务器发送的获取指令后通过jquery工具获取的，还可由服务器直接通过安装在服务器中的jquery工具获取。此外，还可以通过其他工具获取客户端的尺寸信息，如JS工具，本申请实施例对于获取客户端的尺寸信息的具体方式不做具体限定。此外，在本申请的实施例中，尺寸信息可包括但不限于客户端的屏幕尺寸大小(如客户端的屏幕高度等)。在本申请的实施例中，客户端可以是手机、平板电脑、PC机(PersonalComputer，个人计算机)、个人数字助理等具有各种操作系统的硬件设备。S102，根据客户端的尺寸信息从图片标签中获取对应的地址信息。其中，在本申请的一个实施例中，图片标签可包括但不限于多个预设尺寸信息及多个预设尺寸信息对应的地址信息。需要说明的是，在本申请的实施例中，图片标签中可具有自定义的图片加载规则。举例而言，可在图片标签中添加一个自定义属性lazyimg来定义图片加载规则，每个图片标签可以添加多个规则，每个规则之间可通过分隔符“|”隔开。每个规则参数之间通过符号“，”分隔，如图片标签的形式可如下：<imgsrc＝”default.jpg”lazyimg＝”height,url|height2,url|height3,url|…|default_url”/>，其中，规则数据定义说明如下：height：客户端的屏幕高度；url：待加载图片的地址信息url(UniformResoureLocator，统一资源定位符)；default_url：默认图片的地址信息url。例如，假设获取到某个页面中的图片标签为“<imgsrc＝”AA.jpg”lazyimg＝”800,url1|600,url2|900,url3|default_url”/>”，可以看出，该图片标签中具有一个自定义属性lazyimg，该属性中具有“800,url1”、“600,url2”、“900,url3”和“default_url”这四种规则，其中，“800”、“600”、“900”分别是预设尺寸，“url1”、“url2”、“url3”分别是预设尺寸所对应的地址信息，此外地址信息中还含有一个默认地址信息“default_url”。在本申请的实施例中，根据客户端的尺寸信息从图片标签中获取对应的地址信息的具体实现过程可如下：可先将客户端的尺寸信息与图片标签中预设尺寸信息进行比对，如果客户端的尺寸信息与图片标签中的一个本文档来自技高网...

【技术保护点】
一种图片的加载方法，其特征在于，包括以下步骤：获取图片标签，并获取客户端的尺寸信息；根据所述客户端的尺寸信息从所述图片标签中获取对应的地址信息；以及根据所述地址信息加载对应的图片。

【技术特征摘要】
1.一种图片的加载方法，其特征在于，包括以下步骤：获取图片标签，并获取客户端的尺寸信息；根据所述客户端的尺寸信息从所述图片标签中获取对应的地址信息；以及根据所述地址信息加载对应的图片。2.如权利要求1所述的图片的加载方法，其特征在于，所述图片标签包括多个预设尺寸信息对应的地址信息，所述根据所述客户端的尺寸信息从所述图片标签中获取对应的地址信息具体包括：将所述客户端的尺寸信息与所述图片标签中预设尺寸信息进行比对；以及如果所述客户端的尺寸信息与所述图片标签中的一个预设尺寸信息匹配，则提取匹配的预设尺寸信息所对应的地址信息。3.如权利要求2所述的图片的加载方法，其特征在于，还包括：如果所述客户端的尺寸信息与所述图片标签中的预设尺寸信息均不匹配，则提取默认的图片所对应的地址信息。4.如权利要求2所述的图片的加载方法，其特征在于，其中，当所述客户端的尺寸信息与预设尺寸信息之间的差值在预设范围之内时，判断所述客户端的尺寸信息与所述预设尺寸信息匹配。5.如权利要求2所述的图片的加载方法，其特征在于，在所述根据所述地址信息加载对应的图片之后，还包括：判断是否加载成功；以及如果加载未成功，则在预设时间之后重新进行加载。6.一种图片的加载装置，其特征在于，包括：第一获取模块...

【专利技术属性】
技术研发人员：彭永波，
申请(专利权)人：阿里巴巴集团控股有限公司，
类型：发明
国别省市：开曼群岛;KY