[发明专利]一种定位图片系统及方法

说明书

技术领域

本发明涉及图片处理技术领域，尤指一种在网页中定位及显示图片的方法。

背景技术

为了使网站丰富多彩，更有表现力，网页中往往需要应用到大量的图片，但如何处理这些图片，并且使其不影响网页载入和解析是一个不小的问题，这直接关系到用户体验。

目前的做法是，需要哪张图片就处理哪张图片，在网页上需要显示图片的区域单独引用并加载某一张或某一组特定图片。此方法在做图片切换时，如果做了两张不同的图片时，若网络信号或网络速度不佳，后续图片不能及时加载并显示出来，并且如果图片较大加载需要等待较长的时间，这样会经常出现图片丢失，未加载等现象，影响用户浏览网页信息。

发明内容

本发明为了解决上述技术在网速不佳状态下无法顺畅显示图片的问题，提供一种利用多幅合成图片提高网页中图片的加载及显示速度，提高用户访问网页时的流畅度。

为了实现本发明以上发明目的，本发明是通过以下技术方案实现的：

这种定位图片系统，包括：图片合成模块，用于将多幅图片生成一个合成图片文件；图片定位模块，用于在合成图片中定位所需显示的图片；图片显示模块，用于显示定位后的图片；所述图片定位模块加载图片合成模块生成的合成图片文件并定位所需显示的文件后通过图片显示模块在网页上进行展示。

所述合成模块包括图片输入模块和图片输出模块，所述图片输出模块用于将图片输入模块输入的多幅图片按照系统参数输出为一个合成图片文件。

所述系统参数包括图片尺寸，图片分辨率，图片排布位置及方式。

所述图片定位模块采用CSS样式进行处理，包括属性定义模块和位置定义模块；所述属性定义模块用于加载所需的合成图片以及定义图片显示方式；所述位置定义模块通过设定像素值定义欲显示的图片在合成图片中的位置。

所述图片显示方式包括平铺、重复。

所述图片显示模块包括图片对象模块和图片截取模块；所述图片对象模块用于在网页上显示图片；所述图片截取模块根据网页上的图片对象的尺寸属性，截取对应尺寸的定位图片并在图片对象中显示。

将欲在网页中显示的多个图片文件按照合成规则合并为一个合成图片文件，通过在网页中需要显示图片的位置通过定义CSS(层叠样式表)加载合成图片文件并定位合成图片文件中单个图片文件的位置，实现所需图片在网页中的显示。

网页中需要显示图片的位置建立图片对象并定义一个CSS样式并将其背景属性值定义为加载合成图片文件；

设置背景属性中的合成图片的显示方式为不重复显示；

设置背景属性中的边距参数来获取合成图片中单个图片的位置参数；

根据网页中图片对象的高度值和宽度值对定位后的单个图片进行截取并在图片对象中显示。

本发明通过将多幅图片按照一定的合成规则合并在一个合成图片文件中，当浏览网页时，只需加载一张图片文件，便等于加载了此网页所需显示的所有图片。再通过对CSS(层叠样式表)的属性设置，将此合成图片文件设置为背景图片，通过设置背景图片的边距值使得背景图片进行相对移动，使得网页中图片显示位置能够显示所需的包含在合并图片文件中的对应图片。这种对同一图片文件单次加载，多次使用的应用方式无疑大大降低了网页中较多图片显示时的延时以及图片显示不全现象。

附图说明

下面结合附图和具体实施方式对本发明作进一步详细说明：

图1为定位图片系统的第一实施例示意图；

图2为定位图片方法的第一实施例流程示意图；

图3为定位图片系统的第二实施例示意图；

图4为定位图片系统的第二实施例的通过CSS定位并显示合成图片文件中单个图片文件的流程示意图；

图5为定位图片系统的第三实施例的合成图片文件示意图；

图中：

1图片合并模块1.1图片输入模块1.2图片输出模块2图片定位模块2.1属性定义模块2.2位置定义模块3图像显示模块3.1图片对象模块3.2图片截取模块。

具体实施方式

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，以下说明和附图对于本发明是示例性的，并且不应被理解为限制本发明。以下说明描述了众多具体细节以方便对本发明理解。然而，在某些实例中，熟知的或常规的细节并未说明，以满足说明书简洁的要求。