专利名称：加速图片在网页上显示的方法和系统的制作方法
技术领域：
本发明涉及网络技术领域，尤其涉及一种加速图片在网页上显示的方法和 系统。
技术背景目前，随着网络技术的发展，为了满足用户通过网络浏览各种信息的需求，传统的C/S(Client/Server，客户/服务器)系统逐步向B/S (Browser/Server,浏 览器/服务器)系统转型。为了争取更多的用户， 一些提供电子报刊，电子书， 电子杂志等阅读工具的网络公司，把他们的阅读软件转向了 Internet Explorer 等网页浏览器，把带阅读格式的文件制成了图片，并嵌入HTML(Hypertext Markup Language,超文本标记语言)文件中，使用户在浏览网页的时候图文并茂。但是， 当网页上的图片过多、过大，或者网络传输慢的时候，用户需要等待很长时间 才能将网页上的图片下载下来，网站为用户提供高质量服务的预期目的得不到 实现。为了加快图片在网页上的显示速度，保证用户能够快速浏览网站上的图片， 在现有技术中， 一些依赖图片展示的网站，例如提供电子地图、旅游信息、 图片素材等内容的网站，通常采用提升网站服务器的性能、增加网络带宽、购 买附加软件等方式来加快图片在网页上的显示速度。虽然采用这些方式能够加 速图片在网页上的显示速度，使用户快速地浏览网站上的图片，但是，在不同 程度上却增加了网站的运营成本。 发明内容本发明的实施例提供一种加速图片在网页上显示的方法和系统，能够以低 成本的方式实现图片在网页上的快速显示。为达到上述目的，本发明的实施例采用如下技术方案一种加速图片在网页上显示的方法，当所述原图片在网页上显示之前，所述方法包括制作可视区域，所述可视区域为网页实际能够显示的区域；对所述原图片进行判断，若所述原图片为大图或多图，则制作与所述原图 片尺寸大小相同的固定图层；制作伪背景小图，所述伪背景小图为占用空间远小于原图片、用于支撑所 述固定图层的图片；将所述原图片的背景设为所述伪背景小图，生成新图层，置于所述固定图 层之上，并保存原图片的路径；将所述新图层嵌入所述可视区域；判断所述新图层是否位于所述可视区域，若位于所述可视区域，则判断所 述进入可视区域的新图层路径是否为原图片的路径，若不是原图片的路径，则 将所述伪背景小图用原图片替换，并将所述进入可视区域的新图层緩存起来。一种加速图片在网页上显示的系统，包括第一制作单元，用于制作可视区域，所述可视区域为网页实际能够显示的 区域；判断单元，用于判断所述原图片为大图、多图或多小图；第二制作单元，用于在所述判断单元判定所述原图片为大图或多图时，制作与所述原图片尺寸大小相同的固定图层；第三制作单元，用于制作伪背景小图，所述伪背景小图为占用空间远小于 原图片、用于支撑所述固定图层的图片；生成单元，用于将所述原图片的背景设为所述伪背景小图，生成新图层，置于所述固定图层之上；保存单元，用于保存原图片的路径；嵌入单元，用于将所述新图层嵌入所述可视区域；第一判断单元，用于判断所述新图层是否位于所述可视区域；第二判断单元，用于判断所述进入可视区域的新图层路径是否为原图片的路径；处理单元，用于将所述伪背景小图用原图片替换，并将所述进入可视区域 的新图层緩存起来。本发明实施例提供的加速图片在网页上显示的方法和系统，预先载入一个 伪背景小图，并通知用户进行等待，釆用切分压缩图和分部载入的策略，按照 展示的需要精确地载入所需大图或多图。与现有技术相比，用户不需要通过提 升服务器性能和购买附加软件等方式来加快图片在网页上的显示速度，对不需 要的部分或图片，服务器将不会发送给客户端，从而有效节约了带宽，降低了 成本。
为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施 例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述 中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付 出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。图i为本发明加速图片在网页上显示的方法实施例一流程图； 图2为本发明加速图片在网页上显示的方法实施例二流程图； 图3为本发明加速图片在网页上显示的方法实施例三流程图； 图4为本发明加速图片在网页上显示的方法实施例四流程图；图5为本发明加速图片在网页上显示的系统实施例一结构示意图； 图6为本发明加速图片在网页上显示的系统实施例二结构示意图。
具体实施例方式
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清 楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是 全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造 性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。 本发明的实施例提供一种加速图片在网页上显示的方法和系统。 为使本发明技术方案的优点更加清楚，下面结合附图和实施例对本发明作 -洋细i兌明。
本发明的实施例提供一种加速图片在网页上显示的方法，能够以低成本的 方式实现图片在网页上的快速显示。 实施例一
如图1所示，所述加速图片在网页上显示的方法，当所述原图片在网页上显 示之前，所述方法包括
5101、 制作可视区域，所述可视区域为网页实际能够显示的区域；
5102、 对所述原图片进行判断，若所述原图片为大图或多图，则制作与所 述原图片尺寸大小相同的固定图层；
5103、 制作伪背景小图，所述伪背景小图为占用空间远小于原图片、用于 支撑所述固定图层的图片；
5104、 将所述原图片的背景设为所述伪背景小图，生成新图层，置于所述 固定图层之上，并保存原图片的路径；
5105、 将所述新图层嵌入所述可视区域；S106、判断所述新图层是否位于所述可视区域，若位于所述可视区域，则
判断所述进入可视区域的新图层路径是否为原图片的路径，若不是原图片的路 径，则将所述伪背景小图用原图片替换，并将所述进入可视区域的新图层緩存 起来。
本发明的实施例加速图片在网页上显示的方法，预先载入一个伪背景小图， 并通知用户进行等待，采用切分压缩图和分部载入的策略，按照展示的需要精 确地载入所需大图或多图。与现有技术相比，用户不需要通过提升服务器性能 和购买附加软件等方式来加快图片在网页上的显示速度，对不需要的部分或图 片，服务器将不会发送给客户端，从而有效节约了带宽，降低了成本。
实施例二
本实施例提供了当所述图片为大图时加速图片在网页上显示的方法，其中， 所述大图为图片的尺寸超过可视区域，或者图片占用的^f兹盘空间大于或者等于
100k。在本实施例中，所述图片的格式不能为网页浏览器所识别。 如图2所示，该实施例的具体实现过程包括
5201、 制作可视区域，所述可视区域为网页实际能够显示的区域；
5202、 对所述原图片进行判断，若所述原图片为大图，则制作与所述原图 片大小相同的固定图层；
5203、 将所述原图片转换为网页浏览器所能识别的格式；
其中，需要确保所述图片是可以被网页浏览器所识别的图片格式，例如 gif、 jpg、 png等，如果是其他格式，则需要将所述图片的格式转化为上述格式。
5204、 将所述原图片切分为多张小其中，在切割小图时， 一定要保证所述图片比较小，占用的磁盘空间为10k 至50k，以使所述小图能够在任何网络条件下快速下载。由于本发明是为了加快图片在网页上的显示速度，用户可以根据自己的服务器性能和网络带宽，适当 的切分大图，并压缩成网页浏览器所能识别的图片格式。对于那些已经是小图 或大小适中的图片，则不需要进行切分。
5205、 制作伪背景小其中，所述伪背景小图一定要足够小，占用的磁盘空间小于或者等于5k, 并且所述伪背景小图要适合平铺、压縮和拉伸。
5206、 按照所述小图的尺寸制作小图层，并将所述小图进行拼接，置于所 述固定图层之上，将所述小图层的背景设为所述伪背景小图，并保存原图片的 路径；
把切分好的小图按照原大图切分次序拼接好，做成相同尺寸的html容器， 例如div、 p、 span等，这些容器的背景设定为伪图；然后制作可视区域的html 容器，例如div、 body、 iframe等，把所述制作好的图层嵌入进来。
5207、 将所述小图层嵌入所述可视区域；
5208、 判断所述小图层是否位于所述可视区域；
其中，所述判断所述小图层是否位于所述可视区域的步骤包括 S208a 、传入可视区域的实时坐标和尺寸的参数； S208b、计算所述小图层的实时坐标和尺寸；
S208c、计算可一见区^^的实时的四点坐标，以及小图层的四点坐标； S208d、判断所述小图层的四点坐标中的任何一点是否位于所述可视区域的 四点坐标的区间内，若是，则所述小图层位于所述可^L区域。
5209、 若所述小图层不位于所述可视区域，则不替换原图片；
5210、 若所述小图层位于所述可视区域，则判断所述进入可视区域的小图 层路径是否为原图片的路径；其中，所述判断所述进入可视区域的小图层路径是否为原图片的路径的步
骤包括
S210a、传入进入可视区域的小图层的对象参数； S210b、获取所述小图层的当前显示图片的路径值；
S210c、将所述当前显示图片的路径值与储存的路径值进行比较，若不相 等，则所述进入可视区域的小图层路径不是原图片的路径。
5211、 若所述进入可视区域的小图层路径不是原图片的路径，则将所述伪 背景小图用小图片替换，并将所述进入可视区域的小图层缓存起来；
5212、 移动或滚动所述可视区域，重新进行步骤S208;
5213、 若所述进入可视区域的小图层路径是原图片的路径，则不替换小图片。
实施例三
本实施例提供了当所述图片为多图时加速图片在网页上显示的方法。其中， 所述多图的格式不能被网页浏览器所识别。如图3所示，该实施例的具体实现过 程包括
5301、 制作可视区域，所述可视区域为网页实际能够显示的区域；
5302、 对所述原图片进行判断，若所述原图片为多图，则制作与所述原图 片大小相同的固定图层；
5303、 将所述原图片转换为网页浏览器所能识别的格式；
其中，需要确保所述图片是可以被网页浏览器所识别的图片格式，例如 gif、 jpg、 png等，如果是其他格式，则需要将所述图片的格式转化为上述格式。
5304、 制作伪背景小其中，所述伪背景小图占用的磁盘空间小于或者等于5k。5305、 将所述多图的路径都设为所述伪背景小图的路径，将所述多图的尺
寸设为原图片的尺寸，生成新图层，置于所述固定图层之上，并保存原图片的
路径；
5306、 将所述新图层嵌入所述可^L区域；
5307、 判断所述新图层是否位于所述可视区域；
其中，所述判断所述新图层是否位于所述可视区域的步骤S208包括 S307a、传入可一见区域的实时坐标和尺寸的参凄史； S307b、计算所述新图层的实时坐标和尺寸；
S307c、计算可—见区域的实时的四点坐标，以及新图层的四点坐标； S307d、判断所述新图层的四点坐标中的任何一点是否位于所述可视区域的 四点坐标的区间内，若是，则所述新图层位于所述可视区域。
5308、 若所述新图层不位于所述可视区域，则不替换原图片；
5309、 若所述新图层位于所述可视区域，则判断所述进入可视区域的新图 层路径是否为原图片的路径；
其中，所述判断所述进入可视区域的新图层路径是否为原图片的路径的步 骤包括
S309a、传入进入可视区域的新图层的对象参数； S309b、获取所述新图层的当前显示图片的路径值；
S309c、将所述当前显示图片的路径值与储存的路径值进行比较，若不相 等，则所述进入可视区域的新图层路径不是原图片的路径。
5310、 若所述进入可视区域的新图层路径不是原图片的路径，则将所述伪 背景小图用原图片替换，并将所述进入可视区域的新图层緩存起来；
5311、 移动或滚动所述可视区域，重新进行步骤S307;S312、若所述进入可视区域的新图层路径是原图片的路径，则不替换原图片。
因而，利用本发明的实施例加速图片在网页上显示的方法，能够以低成本 的方式实现图片在网页上的快速显示。
实施例四
本实施例提供了当所述图片为多小图时加速图片在网页上显示的方法。如
图4所示，该实施例的具体实现过程包括
5401、 制作可视区域，所述可视区域为网页实际能够显示的区域；
5402、 对所述原图片进行判断，若所述原图片为多小图，则将所述多小图 按照一定次序合成为一张整其中，所述多小图为占用的磁盘空间小于或等于5k的图片，所述整图占用 的,兹盘空间在20k至50k之间。
5403、 将所述整图调整到可以快速下载的范围；
5404、 传入需要显示图片的位置坐标和显示尺寸参数，设置图片的真实尺 寸为传入的尺寸参数；
5405、 将所述图片定位到位置坐标；
5406、 将所述位置坐标平移到可视区域的顶端。
本发明的实施例加速图片在网页上显示的方法，将尺寸过小的图片合成为 一张整图，将所述整图调整到可以快速下载的范围，并传入需要显示的位置坐 标和显示尺寸参数，对所述进行定位和平移至可视区域。与现有技术相比，本
发明能够加快尺寸过小的图片在网页上的显示速度，有效节约了网络带宽，降 低了成本。
本发明的实施例还提供一种加速图片在网页上显示的系统，能够以低成本的方式实现图片在网页上的快速显示。 实施例一本实施例提供了当所述原图片为大图或多图时，加速图片在网页上显示的系统。如图5所示，所述加速图片在网页上显示的系统，包括 第一制作单元501,用于制作可视区域，所述可视区域为网页实际能够显示 的区域；判断单元502,用于判断所述原图片为大图、多图或多小图； 第二制作单元503，用于在所述判断单元502判定所述原图片为大图或多图时，制作与所述原图片尺寸大小相同的固定图层；第三制作单元504,用于制作伪背景小图，所述伪背景小图为占用空间远小于原图片、用于支撑所述固定图层的图片；生成单元505,用于将所述原图片的背景设为所述伪背景小图，生成新图层，置于所述固定图层之上；保存单元506，用于保存原图片的路径； 嵌入单元507,用于将所述新图层嵌入所述可视区域； 第一判断单元508,用于判断所述新图层是否位于所述可视区域； 第二判断单元509，用于判断所述进入可视区域的新图层路径是否为原图片的路径；处理单元510，用于将所述伪背景小图用原图片替换，并将所述进入可视区 域的新图层缓存起来。本发明的实施例加速图片在网页上显示的系统，预先载入一个伪背景小图， 并通知用户进行等待，采用切分压缩图和分部载入的策略，按照展示的需要精确地载入所需大图或多图。与现有技术相比，用户不需要通过提升服务器性能 和购买附加软件等方式来加快图片在网页上的显示速度，对不需要的部分或图 片，服务器将不会发送给客户端，从而有效节约了带宽，降低了成本。其中，如图5所示，当所述图片的格式不能被网页浏览器识别时，所述系统 还包括转换单元511,用于将所述原图片转换为网页浏览器所能识别的格式。 如图5所示，当所述原图片为大图时，所述系统还包括 切分单元512，用于将所述原图片切分为多张小图；则所述生成单元505,按照所述小图的尺寸制作图层，并将所述小图进行拼 接，置于所述固定图层之上，将所述小图层的背景设为所述伪背景小图。其中，当所述原图片为多图时，所述生成单元505,将所述多图的路径都设 为所述伪背景小图的路径，将所述多图的尺寸设为原图片的尺寸，生成新图层。其中，所述大图为图片的尺寸超过可视区域，或者图片占用的磁盘空间大 于或者等于100k,所述小图占用的磁盘空间在10k至50k之间；所述伪背景小图占用的磁盘空间小于或者等于Sk。因而，利用本发明的实施例加速图片在网页上显示的系统，能够以低成本的方式实现图片在网页上的快速显示。 实施例二本实施例提供了当所述原图片为大图或多图时，加速图片在网页上显示的系统。如图6所示，所述加速图片在网页上显示的系统，包括 第一制作单元601,用于制作可视区域，所述可^L区域为网页实际能够显示 的区域；判断单元602，用于判断所述原图片为大图、多图或多小图； 合成单元603,用于在所述判断单元602判断所述原图片为多小图时，将所 述多小图按照一定次序合成为一张整图；调整单元604 ，用于将所述整图调整到可以快速下载的范围； 设置单元605，用于传入需要显示图片的位置坐标和显示尺寸参数，设置图 片的真实尺寸为传入的尺寸参数；定位单元606，用于将所述图片定位到位置坐标； 平移单元607,用于将所述位置坐标平移到可^L区域的顶端。 本发明的实施例加速图片在网页上显示的系统，将尺寸过小的图片合成为 一张整图，将所述整图调整到可以快速下载的范围，并传入需要显示的位置坐 标和显示尺寸参数，对所述进行定位和平移至可纟见区域。与现有技术相比，本 发明能够加快尺寸过小的图片在网页上的显示速度，有效节约了网络带宽，降 低了成本。以上所述，仅为本发明实施例的具体实施方式
，但本发明实施例的保护范 围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内， 可轻易想到的变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明 实施例的保护范围应该以权利要求的保护范围为准。
权利要求
1、一种加速图片在网页上显示的方法，其特征在于，当所述原图片在网页上显示之前，所述方法包括制作可视区域，所述可视区域为网页实际能够显示的区域；对所述原图片进行判断，若所述原图片为大图或多图，则制作与所述原图片尺寸大小相同的固定图层；制作伪背景小图，所述伪背景小图为占用空间远小于原图片、用于支撑所述固定图层的图片；将所述原图片的背景设为所述伪背景小图，生成新图层，置于所述固定图层之上，并保存原图片的路径；将所述新图层嵌入所述可视区域；判断所述新图层是否位于所述可视区域，若位于所述可视区域，则判断所述进入可视区域的新图层路径是否为原图片的路径，若不是原图片的路径，则将所述伪背景小图用原图片替换，并将所述进入可视区域的新图层缓存起来。
2、 根据权利要求1所述的加速图片在网页上显示的方法，其特征在于，若 所述新图层没有位于所述可视区域，则不替换原图片；若所述新图层位于所述可视区域，且所述进入可视区域的新图层路径为原 图片的路径，则不替换原图片。
3、 根据权利要求1所述的加速图片在网页上显示的方法，其特征在于，当 所述图片不能被网页浏览器所识别时，在所述制作伪背景小图的步骤之前，还 包括将所述原图片转换为网页浏览器所能识别的格式。
4、 根据权利要求3所述的加速图片在网页上显示的方法，其特征在于，当 所述原图片为大图时，在所述制作伪背景小图的步骤之前，还包括将所述原图片切分为多张小图。
5、 根据权利要求4所述的加速图片在网页上显示的方法，其特征在于，所 述将所述原图片的背景设为所述伪背景小图，生成新图层，置于所述固定图层 之上的步骤包括按照所述小图的尺寸制作小图层，并将所述小图层进4亍拼接，置于所述固 定图层之上，将所述小图层的背景设为所述伪背景小图。
6、 根据权利要求1所述的加速图片在网页上显示的方法，其特征在于，当 所述原图片为多图时，所述将所述原图片的背景设为所述伪背景小图，生成新 图层，置于所述固定图层之上的步骤包括将所述多图的路径都设为所述伪背景小图的路径，将所述多图的尺寸设为 原图片的尺寸，生成新图层，置于所述固定图层之上。
7、 根据权利要求4所述的加速图片在网页上显示的方法，其特征在于，所 述大图为图片的尺寸超过可视区域，或者图片占用的磁盘空间大于或者等于 100k，所述小图占用的磁盘空间在10k至50k之间。
8、 根据权利要求1至7中任一项所述的加速图片在网页上显示的方法，其 特征在于，所述伪背景小图占用的》兹盘空间小于或者等于5k。
9、 根据权利要求1所述的加速图片在网页上显示的方法，其特征在于，所 述判断所述新图层是否位于所述可^L区域的步骤包括传入可视区域的实时坐标和尺寸的参数； 计算所述新图层的实时坐标和尺寸； 计算可视区域的实时的四点坐标，以及新图层的四点坐标； 判断所述新图层的四点坐标中的任何一点是否位于所述可视区域的四点坐 标的区间内，若是，则所述新图层位于所述可视区域。
10、 根据权利要求1所述的加速图片在网页上显示的方法，其特征在于，所述判断所述进入可视区域的新图层路径是否为原图片的路径的步骤包括 传入进入可视区域的新图层的对象参数； 获取所述新图层的当前显示图片的路径值；将所述当前显示图片的路径值与储存的路径值进行比较，若不相等，则所 述进入可视区域的新图层路径不是原图片的路径。
11、 根据权利要求1所述的加速图片在网页上显示的方法，其特征在于， 若所述原图片为多小图，贝'J将所述多小图按照一定次序合成为一张整图； 将所述整图调整到可以快速下载的范围；传入需要显示图片的位置坐标和显示尺寸参数，设置图片的真实尺寸为传 入的尺寸参数；将所述图片定位到位置坐标； 将所述位置坐标平移到可视区域的顶端。
12、 根据权利要求11所述的加速图片在网页上显示的方法，其特征在于， 所述多小图为占用的磁盘空间小于或等于5k的图片，所迷整图占用的磁盘空间 在20k至50k之间。
13、 一种加速图片在网页上显示的系统，其特征在于，包括 第一制作单元，用于制作可视区域，所述可;f见区域为网页实际能够显示的区域；判断单元，用于判断所述原图片为大图、多图或多小图； 第二制作单元，用于在所述判断单元判定所述原图片为大图或多图时，制 作与所述原图片尺寸大小相同的固定图层；第三制作单元，用于制作伪背景小图，所述伪背景小图为占用空间远小于原图片、用于支撑所述固定图层的图片；生成单元，用于将所述原图片的背景:^殳为所述伪背景小图，生成新图层，置于所述固定图层之上；保存单元，用于保存原图片的路径；嵌入单元，用于将所述新图层嵌入所述可^L区域；第一判断单元，用于判断所述新图层是否位于所述可视区域；第二判断单元，用于判断所述进入可视区域的新图层路径是否为原图片的路径；处理单元，用于将所述伪背景小图用原图片替换，并将所述进入可视区域 的新图层緩存起来。
14、 根据权利要求13所述的加速图片在网页上显示的系统，其特征在于， 还包括转换单元，用于将所述原图片转换为网页浏览器所能识别的格式。
15、 根据权利要求13所述的加速图片在网页上显示的系统，其特征在于， 当所述原图片为大图时，所述系统还包括切分单元，用于将所述原图片切分为多张小图；则所述生成单元，按照所述小图的尺寸制作小图层，并将所述小图进行4并 接，置于所述固定图层之上，将所述小图层的背景设为所述伪背景小图。
16、 根据权利要求13所述的加速图片在网页上显示的系统，其特征在于， 当所述原图片为多图时，所述生成单元，将所述多图的^4圣都设为所述伪背景 小图的路径，将所述多图的尺寸设为原图片的尺寸，生成新图层。
17、 根据权利要求13所述的加速图片在网页上显示的系统，其特征在于，当所述判断单元判断所述原图片为多小图时，所述系统还包括 合成单元，用于将所述多小图按照一定次序合成为一张整图； 调整单元，用于将所述整图调整到可以快速下载的范围； 设置单元，用于传入需要显示图片的位置坐标和显示尺寸参数，设置图片的真实尺寸为传入的尺寸参数；定位单元，用于将所述图片定位到位置坐标； 平移单元，用于将所述位置坐标平移到可视区域的顶端。
全文摘要
本发明实施例公开了一种加速图片在网页上显示的方法和系统，当所述原图片在网页上显示之前，所述方法包括制作可视区域；对所述原图片进行判断，若所述原图片为大图或多图，则制作与所述原图片尺寸大小相同的固定图层；制作伪背景小图；将所述原图片的背景设为所述伪背景小图，生成新图层，置于所述固定图层之上，并保存原图片的路径；将所述新图层嵌入所述可视区域；判断所述新图层是否位于所述可视区域，若位于所述可视区域，则判断所述进入可视区域的新图层路径是否为原图片的路径，若不是原图片的路径，则将所述伪背景小图用原图片替换，并将所述进入可视区域的新图层缓存起来。本发明适用于图片在网页上的显示。
文档编号G06F17/30GK101324895SQ20081011713
公开日2008年12月17日 申请日期2008年7月24日 优先权日2008年7月24日
发明者夏松江, 敏 李 申请人:北大方正集团有限公司;北京方正阿帕比技术有限公司