CN100585600C - 加速图片在网页上显示的方法和系统 - Google Patents

Abstract

本发明实施例公开了一种加速图片在网页上显示的方法和系统，当所述原图片在网页上显示之前，所述方法包括：制作可视区域；对所述原图片进行判断，若所述原图片为大图或多图，则制作与所述原图片尺寸大小相同的固定图层；制作伪背景小图；将所述原图片的背景设为所述伪背景小图，生成新图层，置于所述固定图层之上，并保存原图片的路径；将所述新图层嵌入所述可视区域；判断所述新图层是否位于所述可视区域，若位于所述可视区域，则判断所述进入可视区域的新图层路径是否为原图片的路径，若不是原图片的路径，则将所述伪背景小图用原图片替换，并将所述进入可视区域的新图层缓存起来。本发明适用于图片在网页上的显示。

Description

加速图片在网页上显示的方法和系统

技术领域

本发明涉及网络技术领域，尤其涉及一种加速图片在网页上显示的方法和系统。

背景技术

目前，随着网络技术的发展，为了满足用户通过网络浏览各种信息的需求，传统的C/S(Client/Server，客户/服务器)系统逐步向B/S(Browser/Server，浏览器/服务器)系统转型。为了争取更多的用户，一些提供电子报刊，电子书，电子杂志等阅读工具的网络公司，把他们的阅读软件转向了Internet Explorer等网页浏览器，把带阅读格式的文件制成了图片，并嵌入HTML(Hypertext MarkupLanguage，超文本标记语言)文件中，使用户在浏览网页的时候图文并茂。但是，当网页上的图片过多、过大，或者网络传输慢的时候，用户需要等待很长时间才能将网页上的图片下载下来，网站为用户提供高质量服务的预期目的得不到实现。

为了加快图片在网页上的显示速度，保证用户能够快速浏览网站上的图片，在现有技术中，一些依赖图片展示的网站，例如：提供电子地图、旅游信息、图片素材等内容的网站，通常采用提升网站服务器的性能、增加网络带宽、购买附加软件等方式来加快图片在网页上的显示速度。虽然采用这些方式能够加速图片在网页上的显示速度，使用户快速地浏览网站上的图片，但是，在不同程度上却增加了网站的运营成本。

发明内容

本发明的实施例提供一种加速图片在网页上显示的方法和系统，能够以低成本的方式实现图片在网页上的快速显示。

为达到上述目的，本发明的实施例采用如下技术方案：

一种加速图片在网页上显示的方法，当原图片在网页上显示之前，所述方法包括：

制作可视区域，所述可视区域为网页实际能够显示的区域；

对所述原图片进行判断，若所述原图片为大图或多图，则制作与所述原图片尺寸大小相同的固定图层，其中，所述大图为尺寸超过可视区域、或者占用的磁盘空间大于或者等于100k的图片；

制作伪背景图，所述伪背景图为占用空间远小于原图片、用于支撑所述固定图层的图片，所述伪背景图占用的磁盘空间小于或者等于5k；

将所述原图片的背景设为所述伪背景图，生成新图层，置于所述固定图层之上，并保存原图片的路径；

将所述新图层嵌入所述可视区域；

判断所述新图层是否位于所述可视区域，若位于所述可视区域，则判断进入可视区域的新图层路径是否为原图片的路径，若不是原图片的路径，则将所述伪背景图用原图片替换，并将所述新图层缓存起来。

一种加速图片在网页上显示的系统，包括：

第一制作单元，用于制作可视区域，所述可视区域为网页实际能够显示的区域；

第一判断单元，用于判断原图片为大图、多图或多小图，其中，所述大图为尺寸超过可视区域、或者占用的磁盘空间大于或者等于100k的图片，所述多小图为占用的磁盘空间小于或等于5k的图片；

第二制作单元，用于在所述第一判断单元判定所述原图片为大图或多图时，制作与所述原图片尺寸大小相同的固定图层；

第三制作单元，用于制作伪背景图，所述伪背景图为占用空间远小于原图片、用于支撑所述固定图层的图片，所述伪背景图占用的磁盘空间小于或者等于5k；

生成单元，用于将所述原图片的背景设为所述伪背景图，生成新图层，置于所述固定图层之上；

保存单元，用于保存原图片的路径；

嵌入单元，用于将所述新图层嵌入所述可视区域；

第二判断单元，用于判断所述新图层是否位于所述可视区域；

第三判断单元，用于判断进入可视区域的新图层路径是否为原图片的路径；

处理单元，用于将所述伪背景图用原图片替换，并将所述新图层缓存起来。

本发明实施例提供的加速图片在网页上显示的方法和系统，预先载入一个伪背景小图，并通知用户进行等待，采用切分压缩图和分部载入的策略，按照展示的需要精确地载入所需大图或多图。与现有技术相比，用户不需要通过提升服务器性能和购买附加软件等方式来加快图片在网页上的显示速度，对不需要的部分或图片，服务器将不会发送给客户端，从而有效节约了带宽，降低了成本。

附图说明

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

图1为本发明加速图片在网页上显示的方法实施例一流程图；

图2为本发明加速图片在网页上显示的方法实施例二流程图；

图3为本发明加速图片在网页上显示的方法实施例三流程图；

图4为本发明加速图片在网页上显示的方法实施例四流程图；

图5为本发明加速图片在网页上显示的系统实施例一结构示意图；

图6为本发明加速图片在网页上显示的系统实施例二结构示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

本发明的实施例提供一种加速图片在网页上显示的方法和系统。

为使本发明技术方案的优点更加清楚，下面结合附图和实施例对本发明作详细说明。

本发明的实施例提供一种加速图片在网页上显示的方法，能够以低成本的方式实现图片在网页上的快速显示。

实施例一

如图1所示，所述加速图片在网页上显示的方法，当所述原图片在网页上显示之前，所述方法包括：

S101、制作可视区域，所述可视区域为网页实际能够显示的区域；

S102、对所述原图片进行判断，若所述原图片为大图或多图，则制作与所述原图片尺寸大小相同的固定图层；

S103、制作伪背景小图，所述伪背景小图为占用空间远小于原图片、用于支撑所述固定图层的图片；

S104、将所述原图片的背景设为所述伪背景小图，生成新图层，置于所述固定图层之上，并保存原图片的路径；

S105、将所述新图层嵌入所述可视区域；

S106、判断所述新图层是否位于所述可视区域，若位于所述可视区域，则判断所述进入可视区域的新图层路径是否为原图片的路径，若不是原图片的路径，则将所述伪背景小图用原图片替换，并将所述进入可视区域的新图层缓存起来。

本发明的实施例加速图片在网页上显示的方法，预先载入一个伪背景小图，并通知用户进行等待，采用切分压缩图和分部载入的策略，按照展示的需要精确地载入所需大图或多图。与现有技术相比，用户不需要通过提升服务器性能和购买附加软件等方式来加快图片在网页上的显示速度，对不需要的部分或图片，服务器将不会发送给客户端，从而有效节约了带宽，降低了成本。

实施例二

本实施例提供了当所述图片为大图时加速图片在网页上显示的方法，其中，所述大图为图片的尺寸超过可视区域，或者图片占用的磁盘空间大于或者等于100k。在本实施例中，所述图片的格式不能为网页浏览器所识别。

如图2所示，该实施例的具体实现过程包括：

S201、制作可视区域，所述可视区域为网页实际能够显示的区域；

S202、对所述原图片进行判断，若所述原图片为大图，则制作与所述原图片大小相同的固定图层；

S203、将所述原图片转换为网页浏览器所能识别的格式；

其中，需要确保所述图片是可以被网页浏览器所识别的图片格式，例如：gif、jpg、png等，如果是其他格式，则需要将所述图片的格式转化为上述格式。

S204、将所述原图片切分为多张小图；

其中，在切割小图时，一定要保证所述图片比较小，占用的磁盘空间为10k至50k，以使所述小图能够在任何网络条件下快速下载。由于本发明是为了加快图片在网页上的显示速度，用户可以根据自己的服务器性能和网络带宽，适当的切分大图，并压缩成网页浏览器所能识别的图片格式。对于那些已经是小图或大小适中的图片，则不需要进行切分。

S205、制作伪背景小图；

其中，所述伪背景小图一定要足够小，占用的磁盘空间小于或者等于5k，并且所述伪背景小图要适合平铺、压缩和拉伸。

S206、按照所述小图的尺寸制作小图层，并将所述小图进行拼接，置于所述固定图层之上，将所述小图层的背景设为所述伪背景小图，并保存原图片的路径；

把切分好的小图按照原大图切分次序拼接好，做成相同尺寸的html容器，例如div、p、span等，这些容器的背景设定为伪图；然后制作可视区域的html容器，例如div、body、iframe等，把所述制作好的图层嵌入进来。

S207、将所述小图层嵌入所述可视区域；

S208、判断所述小图层是否位于所述可视区域；

其中，所述判断所述小图层是否位于所述可视区域的步骤包括：

S208a、传入可视区域的实时坐标和尺寸的参数；

S208b、计算所述小图层的实时坐标和尺寸；

S208c、计算可视区域的实时的四点坐标，以及小图层的四点坐标；

S208d、判断所述小图层的四点坐标中的任何一点是否位于所述可视区域的四点坐标的区间内，若是，则所述小图层位于所述可视区域。

S209、若所述小图层不位于所述可视区域，则不替换原图片；

S210、若所述小图层位于所述可视区域，则判断所述进入可视区域的小图层路径是否为原图片的路径；

其中，所述判断所述进入可视区域的小图层路径是否为原图片的路径的步骤包括：

S210a、传入进入可视区域的小图层的对象参数；

S210b、获取所述小图层的当前显示图片的路径值；

S210c、将所述当前显示图片的路径值与储存的路径值进行比较，若不相等，则所述进入可视区域的小图层路径不是原图片的路径。

S211、若所述进入可视区域的小图层路径不是原图片的路径，则将所述伪背景小图用小图片替换，并将所述进入可视区域的小图层缓存起来；

S212、移动或滚动所述可视区域，重新进行步骤S208；

S213、若所述进入可视区域的小图层路径是原图片的路径，则不替换小图片。

实施例三

本实施例提供了当所述图片为多图时加速图片在网页上显示的方法。其中，所述多图的格式不能被网页浏览器所识别。如图3所示，该实施例的具体实现过程包括：

S301、制作可视区域，所述可视区域为网页实际能够显示的区域；

S302、对所述原图片进行判断，若所述原图片为多图，则制作与所述原图片大小相同的固定图层；

S303、将所述原图片转换为网页浏览器所能识别的格式；

其中，需要确保所述图片是可以被网页浏览器所识别的图片格式，例如：gif、jpg、png等，如果是其他格式，则需要将所述图片的格式转化为上述格式。

S304、制作伪背景小图；

其中，所述伪背景小图占用的磁盘空间小于或者等于5k。

S305、将所述多图的路径都设为所述伪背景小图的路径，将所述多图的尺寸设为原图片的尺寸，生成新图层，置于所述固定图层之上，并保存原图片的路径；

S306、将所述新图层嵌入所述可视区域；

S307、判断所述新图层是否位于所述可视区域；

其中，所述判断所述新图层是否位于所述可视区域的步骤S208包括：

S307a、传入可视区域的实时坐标和尺寸的参数；

S307b、计算所述新图层的实时坐标和尺寸；

S307c、计算可视区域的实时的四点坐标，以及新图层的四点坐标；

S307d、判断所述新图层的四点坐标中的任何一点是否位于所述可视区域的四点坐标的区间内，若是，则所述新图层位于所述可视区域。

S308、若所述新图层不位于所述可视区域，则不替换原图片；

S309、若所述新图层位于所述可视区域，则判断所述进入可视区域的新图层路径是否为原图片的路径；

其中，所述判断所述进入可视区域的新图层路径是否为原图片的路径的步骤包括：

S309a、传入进入可视区域的新图层的对象参数；

S309b、获取所述新图层的当前显示图片的路径值；

S309c、将所述当前显示图片的路径值与储存的路径值进行比较，若不相等，则所述进入可视区域的新图层路径不是原图片的路径。

S310、若所述进入可视区域的新图层路径不是原图片的路径，则将所述伪背景小图用原图片替换，并将所述进入可视区域的新图层缓存起来；

S311、移动或滚动所述可视区域，重新进行步骤S307；

S312、若所述进入可视区域的新图层路径是原图片的路径，则不替换原图片。

因而，利用本发明的实施例加速图片在网页上显示的方法，能够以低成本的方式实现图片在网页上的快速显示。

实施例四

本实施例提供了当所述图片为多小图时加速图片在网页上显示的方法。如图4所示，该实施例的具体实现过程包括：

S401、制作可视区域，所述可视区域为网页实际能够显示的区域；

S402、对所述原图片进行判断，若所述原图片为多小图，则将所述多小图按照一定次序合成为一张整图；

其中，所述多小图为占用的磁盘空间小于或等于5k的图片，所述整图占用的磁盘空间在20k至50k之间。

S403、将所述整图调整到可以快速下载的范围；

S404、传入需要显示图片的位置坐标和显示尺寸参数，设置图片的真实尺寸为传入的尺寸参数；

S405、将所述图片定位到位置坐标；

S406、将所述位置坐标平移到可视区域的顶端。

本发明的实施例加速图片在网页上显示的方法，将尺寸过小的图片合成为一张整图，将所述整图调整到可以快速下载的范围，并传入需要显示的位置坐标和显示尺寸参数，对所述进行定位和平移至可视区域。与现有技术相比，本发明能够加快尺寸过小的图片在网页上的显示速度，有效节约了网络带宽，降低了成本。

本发明的实施例还提供一种加速图片在网页上显示的系统，能够以低成本的方式实现图片在网页上的快速显示。

实施例一

本实施例提供了当所述原图片为大图或多图时，加速图片在网页上显示的系统。

如图5所示，所述加速图片在网页上显示的系统，包括：

第一制作单元501，用于制作可视区域，所述可视区域为网页实际能够显示的区域；

判断单元502，用于判断所述原图片为大图、多图或多小图；

第二制作单元503，用于在所述判断单元502判定所述原图片为大图或多图时，制作与所述原图片尺寸大小相同的固定图层；

第三制作单元504，用于制作伪背景小图，所述伪背景小图为占用空间远小于原图片、用于支撑所述固定图层的图片；

生成单元505，用于将所述原图片的背景设为所述伪背景小图，生成新图层，置于所述固定图层之上；

保存单元506，用于保存原图片的路径；

嵌入单元507，用于将所述新图层嵌入所述可视区域；

第一判断单元508，用于判断所述新图层是否位于所述可视区域；

第二判断单元509，用于判断所述进入可视区域的新图层路径是否为原图片的路径；

处理单元510，用于将所述伪背景小图用原图片替换，并将所述进入可视区域的新图层缓存起来。

本发明的实施例加速图片在网页上显示的系统，预先载入一个伪背景小图，并通知用户进行等待，采用切分压缩图和分部载入的策略，按照展示的需要精确地载入所需大图或多图。与现有技术相比，用户不需要通过提升服务器性能和购买附加软件等方式来加快图片在网页上的显示速度，对不需要的部分或图片，服务器将不会发送给客户端，从而有效节约了带宽，降低了成本。

其中，如图5所示，当所述图片的格式不能被网页浏览器识别时，所述系统还包括：

转换单元511，用于将所述原图片转换为网页浏览器所能识别的格式。

如图5所示，当所述原图片为大图时，所述系统还包括：

切分单元512，用于将所述原图片切分为多张小图；

则所述生成单元505，按照所述小图的尺寸制作图层，并将所述小图进行拼接，置于所述固定图层之上，将所述小图层的背景设为所述伪背景小图。

其中，当所述原图片为多图时，所述生成单元505，将所述多图的路径都设为所述伪背景小图的路径，将所述多图的尺寸设为原图片的尺寸，生成新图层。

其中，所述大图为图片的尺寸超过可视区域，或者图片占用的磁盘空间大于或者等于100k，所述小图占用的磁盘空间在10k至50k之间；

所述伪背景小图占用的磁盘空间小于或者等于5k。

因而，利用本发明的实施例加速图片在网页上显示的系统，能够以低成本的方式实现图片在网页上的快速显示。

实施例二

本实施例提供了当所述原图片为大图或多图时，加速图片在网页上显示的系统。

如图6所示，所述加速图片在网页上显示的系统，包括：

第一制作单元601，用于制作可视区域，所述可视区域为网页实际能够显示的区域；

判断单元602，用于判断所述原图片为大图、多图或多小图；

合成单元603，用于在所述判断单元602判断所述原图片为多小图时，将所述多小图按照一定次序合成为一张整图；

调整单元604，用于将所述整图调整到可以快速下载的范围；

设置单元605，用于传入需要显示图片的位置坐标和显示尺寸参数，设置图片的真实尺寸为传入的尺寸参数；

定位单元606，用于将所述图片定位到位置坐标；

平移单元607，用于将所述位置坐标平移到可视区域的顶端。

本发明的实施例加速图片在网页上显示的系统，将尺寸过小的图片合成为一张整图，将所述整图调整到可以快速下载的范围，并传入需要显示的位置坐标和显示尺寸参数，对所述进行定位和平移至可视区域。与现有技术相比，本发明能够加快尺寸过小的图片在网页上的显示速度，有效节约了网络带宽，降低了成本。

以上所述，仅为本发明实施例的具体实施方式，但本发明实施例的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到的变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明实施例的保护范围应该以权利要求的保护范围为准。

Claims (14)

1、一种加速图片在网页上显示的方法，其特征在于，当原图片在网页上显示之前，所述方法包括：

制作可视区域，所述可视区域为网页实际能够显示的区域；

对所述原图片进行判断，若所述原图片为大图或多图，则制作与所述原图片尺寸大小相同的固定图层，其中，所述大图为尺寸超过可视区域、或者占用的磁盘空间大于或者等于100k的图片；

制作伪背景图，所述伪背景图为占用空间远小于原图片、用于支撑所述固定图层的图片，所述伪背景图占用的磁盘空间小于或者等于5k；

将所述原图片的背景设为所述伪背景图，生成新图层，置于所述固定图层之上，并保存原图片的路径；

将所述新图层嵌入所述可视区域；

判断所述新图层是否位于所述可视区域，若位于所述可视区域，则判断进入可视区域的新图层路径是否为原图片的路径，若不是原图片的路径，则将所述伪背景图用原图片替换，并将所述新图层缓存起来。

2、根据权利要求1所述的加速图片在网页上显示的方法，其特征在于，若所述新图层没有位于所述可视区域，则不替换原图片；

若所述新图层位于所述可视区域，且所述进入可视区域的新图层路径为原图片的路径，则不替换原图片。

3、根据权利要求1所述的加速图片在网页上显示的方法，其特征在于，当所述原图片不能被网页浏览器所识别时，在所述制作伪背景图的步骤之前，还包括：

将所述原图片转换为网页浏览器所能识别的格式。

4、根据权利要求3所述的加速图片在网页上显示的方法，其特征在于，当所述原图片为大图时，在所述制作伪背景图的步骤之前，还包括：

将所述原图片切分为多张小图，其中，所述小图占用的磁盘空间在10k至50k之间。

5、根据权利要求4所述的加速图片在网页上显示的方法，其特征在于，所述将所述原图片的背景设为所述伪背景图，生成新图层，置于所述固定图层之上的步骤包括：

按照所述小图的尺寸制作小图层，并将所述小图层进行拼接，置于所述固定图层之上，将所述小图层的背景设为所述伪背景图。

6、根据权利要求1所述的加速图片在网页上显示的方法，其特征在于，当所述原图片为多图时，所述将所述原图片的背景设为所述伪背景图，生成新图层，置于所述固定图层之上的步骤包括：

将所述多图的路径都设为所述伪背景图的路径，将所述多图的尺寸设为原图片的尺寸，生成新图层，置于所述固定图层之上。

7、根据权利要求1所述的加速图片在网页上显示的方法，其特征在于，所述判断所述新图层是否位于所述可视区域的步骤包括：

传入可视区域的实时坐标和尺寸的参数；

计算所述新图层的实时坐标和尺寸；

计算可视区域的实时的四点坐标，以及新图层的四点坐标；

判断所述新图层的四点坐标中的任何一点是否位于所述可视区域的四点坐标的区间内，若是，则所述新图层位于所述可视区域。

8、根据权利要求1所述的加速图片在网页上显示的方法，其特征在于，所述判断所述进入可视区域的新图层路径是否为原图片的路径的步骤包括：

传入进入可视区域的新图层的对象参数；

获取所述新图层的当前显示图片的路径值；

将所述当前显示图片的路径值与储存的路径值进行比较，若不相等，则所述进入可视区域的新图层路径不是原图片的路径。

9、根据权利要求1所述的加速图片在网页上显示的方法，其特征在于，若所述原图片为多小图，则

将所述多小图按照一定次序合成为一张整图，其中，所述多小图为占用的磁盘空间小于或等于5k的图片，所述整图占用的磁盘空间在20k至50k之间；

将所述整图调整到可以快速下载的范围；

传入需要显示图片的位置坐标和显示尺寸参数，设置图片的真实尺寸为传入的尺寸参数；

将所述原图片定位到位置坐标；

将所述位置坐标平移到可视区域的顶端。

10、一种加速图片在网页上显示的系统，其特征在于，包括：

第一制作单元，用于制作可视区域，所述可视区域为网页实际能够显示的区域；

第一判断单元，用于判断原图片为大图、多图或多小图，其中，所述大图为尺寸超过可视区域、或者占用的磁盘空间大于或者等于100k的图片，所述多小图为占用的磁盘空间小于或等于5k的图片；

第二制作单元，用于在所述第一判断单元判定所述原图片为大图或多图时，制作与所述原图片尺寸大小相同的固定图层；

第三制作单元，用于制作伪背景图，所述伪背景图为占用空间远小于原图片、用于支撑所述固定图层的图片，所述伪背景图占用的磁盘空间小于或者等于5k；

生成单元，用于将所述原图片的背景设为所述伪背景图，生成新图层，置于所述固定图层之上；

保存单元，用于保存原图片的路径；

嵌入单元，用于将所述新图层嵌入所述可视区域；

第二判断单元，用于判断所述新图层是否位于所述可视区域；

第三判断单元，用于判断进入可视区域的新图层路径是否为原图片的路径；

处理单元，用于将所述伪背景图用原图片替换，并将所述新图层缓存起来。

11、根据权利要求10所述的加速图片在网页上显示的系统，其特征在于，还包括：

转换单元，用于将所述原图片转换为网页浏览器所能识别的格式。

12、根据权利要求10所述的加速图片在网页上显示的系统，其特征在于，当所述原图片为大图时，所述系统还包括：

切分单元，用于将所述原图片切分为多张小图，其中，所述小图占用的磁盘空间在10k至50k之间；

则所述生成单元，按照所述小图的尺寸制作小图层，并将所述小图进行拼接，置于所述固定图层之上，将所述小图层的背景设为所述伪背景图。

13、根据权利要求10所述的加速图片在网页上显示的系统，其特征在于，当所述原图片为多图时，所述生成单元，将所述多图的路径都设为所述伪背景图的路径，将所述多图的尺寸设为原图片的尺寸，生成新图层。

14、根据权利要求10所述的加速图片在网页上显示的系统，其特征在于，当所述第一判断单元判断所述原图片为多小图时，所述系统还包括：

合成单元，用于将所述多小图按照一定次序合成为一张整图，其中，所述多小图为占用的磁盘空间小于或等于5k的图片，所述整图占用的磁盘空间在20k至50k之间；

调整单元，用于将所述整图调整到可以快速下载的范围；

设置单元，用于传入需要显示图片的位置坐标和显示尺寸参数，设置图片的真实尺寸为传入的尺寸参数；

定位单元，用于将所述原图片定位到位置坐标；

平移单元，用于将所述位置坐标平移到可视区域的顶端。

Images