CN105094930A - 一种定位图片系统及方法 - Google Patents
一种定位图片系统及方法 Download PDFInfo
- Publication number
- CN105094930A CN105094930A CN201510569947.9A CN201510569947A CN105094930A CN 105094930 A CN105094930 A CN 105094930A CN 201510569947 A CN201510569947 A CN 201510569947A CN 105094930 A CN105094930 A CN 105094930A
- Authority
- CN
- China
- Prior art keywords
- picture
- module
- synthesising
- webpage
- file
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Landscapes
- Information Transfer Between Computers (AREA)
Abstract
本发明通过将多幅图片按照一定的合成规则合并在一个合成图片文件中，当浏览网页时，只需加载一张图片文件，便等于加载了此网页所需显示的所有图片。再通过对CSS的属性设置，将此合成图片文件设置为背景图片，通过设置背景图片的边距值使得背景图片进行相对移动，使得网页中图片显示位置能够显示所需的包含在合并图片文件中的对应图片。这种对同一图片文件单次加载，多次使用的应用方式无疑大大降低了网页中较多图片显示时的延时以及图片显示不全现象。
Description
技术领域
本发明涉及图片处理技术领域，尤指一种在网页中定位及显示图片的方法。
背景技术
为了使网站丰富多彩，更有表现力，网页中往往需要应用到大量的图片，但如何处理这些图片，并且使其不影响网页载入和解析是一个不小的问题，这直接关系到用户体验。
目前的做法是，需要哪张图片就处理哪张图片，在网页上需要显示图片的区域单独引用并加载某一张或某一组特定图片。此方法在做图片切换时，如果做了两张不同的图片时，若网络信号或网络速度不佳，后续图片不能及时加载并显示出来，并且如果图片较大加载需要等待较长的时间，这样会经常出现图片丢失，未加载等现象，影响用户浏览网页信息。
发明内容
本发明为了解决上述技术在网速不佳状态下无法顺畅显示图片的问题，提供一种利用多幅合成图片提高网页中图片的加载及显示速度，提高用户访问网页时的流畅度。
为了实现本发明以上发明目的，本发明是通过以下技术方案实现的：
这种定位图片系统，包括：图片合成模块，用于将多幅图片生成一个合成图片文件；图片定位模块，用于在合成图片中定位所需显示的图片；图片显示模块，用于显示定位后的图片；所述图片定位模块加载图片合成模块生成的合成图片文件并定位所需显示的文件后通过图片显示模块在网页上进行展示。
所述合成模块包括图片输入模块和图片输出模块，所述图片输出模块用于将图片输入模块输入的多幅图片按照系统参数输出为一个合成图片文件。
所述系统参数包括图片尺寸，图片分辨率，图片排布位置及方式。
所述图片定位模块采用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图片截取模块。
具体实施方式
为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，以下说明和附图对于本发明是示例性的，并且不应被理解为限制本发明。以下说明描述了众多具体细节以方便对本发明理解。然而，在某些实例中，熟知的或常规的细节并未说明，以满足说明书简洁的要求。
CSS，全称为CascadingStyleSheets，中文名为层叠样式表，也称作层叠样式表，是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。通过样式表可以定义如何显示HTML元素，例如字体标签和颜色属性等。样式通常保存在外部的.css文件中。通过仅仅编辑一个简单的CSS文档，外部样式表能够同时改变站点中所有页面的布局和外观，只需简单地改变样式，然后网站中的所有元素均会自动地更新。
CSS样式包括背景、文本、字体、链接、列表、表格和轮廓。CSS的背景属性允许应用纯色为背景，也允许使用图像作为背景。CSS的文本属性可以改变文字的颜色、字符间距、对齐文本等。CSS的字体属性可以定义文本所使用的字体、大小，风格(如斜体)等。
第一实施例
如图1所示的定位图片系统的第一实施例示意图以及如图2所示的定位图片方法的第一实施例流程示意图，这种定位图片系统，包括：图片合成模块1，用于将多幅图片生成一个合成图片文件；图片定位模块2，用于在合成图片中定位所需显示的图片；图片显示模块3，用于显示定位后的图片；所述图片定位模块加载图片合成模块生成的合成图片文件并定位所需显示的文件后通过图片显示模块在网页上进行展示。
第二实施例
如图3所示的定位图片系统的第二实施例示意图，图片合成模块1包括图片输入模块1.1和图片输出模块1.2，图片输出模块1.2用于将图片输入模块1.1输入的多幅图片按照系统参数输出为一个合成图片文件。
系统参数包括图片尺寸，图片分辨率，图片排布位置及方式。
图片定位模块2采用CSS(层叠样式表)，包括属性定义模块2.1和位置定义模块2.2；所述属性定义模块2.1用于加载所需的合成图片以及定义图片显示方式；所述位置定义模块2.2通过设定像素值定义欲显示的图片在合成图片中的位置。
图片显示方式包括平铺、重复。
图片显示模块3包括图片对象模块3.1和图片截取模块3.2；所述图片对象模块3.1用于在网页上显示图片；所述图片截取模块3.2根据网页上的图片对象的尺寸属性，截取对应尺寸的定位图片并在图片对象中显示。
如图4所示的定位图片系统的第二实施例的通过CSS定位并显示合成图片文件中单个图片文件的流程示意图，通过这种定位图片的方法，
S1在网页中需要显示图片的位置建立图片对象并定义一个CSS样式并将其背景属性值定义为加载合成图片文件；
S2设置背景属性中的合成图片的显示方式为不重复显示；
S3设置背景属性中的边距参数来获取合成图片中单个图片的位置参数；
S4根据网页中图片对象的高度值和宽度值对定位后的单个图片进行截取并在图片对象中显示；
将欲在网页中显示的多个图片文件按照合成规则合并为一个合成图片文件，通过在网页中需要显示图片的位置通过定义CSS加载合成图片文件并定位合成图片文件中单个图片文件的位置，实现所需图片在网页中的显示。
第三实施例
以图5所示定位图片系统的第三实施例的合成图片文件，以两个图片，图片A与图片B为例，首先将图片A、B均处理为100×100像素大小，然后将图片A、B由上至下依次排列，形成100×200像素的合成图片文件，合成图片文件名设为ltlogo.gif并保存备用。此处合成图片文件格式不仅限于GIF格式，任何可通过图片对象显示的图片格式均可供选择。
通过CSS定位并显示合成图片文件中单个图片文件的具体步骤为：
在网页中需要显示图片的位置建立图片对象并定义一个CSS(层叠样式表)样式并将其背景属性值定义为之前保存的100×200像素的合成图片文件；具体的CSS表达式为{background:url("img/ltlogo.gif")no-repeatleft101px；}，通过background的背景属性加载之前保存的合成图片文件ltlogo.gif，no-repeat设置图片的显示方式为不重复，即按原图片文件格式显示，不做拉伸、平铺等处理；left101px用于设置背景属性中的左边距参数来获取合成图片中单个图片的位置参数；若需显示合成图片文件中排列第二的图片，则将左边距设置为101像素，则可显示从左侧向下第101像素开始显示的图片，左侧1至100像素内的图片，即排列第一的图片不会显示。
最后，根据网页上图片对象模块3.1的尺寸属性，图像截取模块3.2对定位后的图片进行截取，使其适合在图片对象模块3.1中显示。
在网页上不同图片对象模块上重复上述方法，通过一次性加载同一个合成图像文件，并通过CSS进行图片定位，使得各个图片对象模块可以显示所需的图片。这种单次加载，多次使用的图片加载和使用方式，能够有效地提高网页中图片显示的流畅度，提高用户体验。
Claims (8)
1.一种定位图片系统，其特征在于，包括：
图片合成模块，用于将多幅图片生成一个合成图片文件；
图片定位模块，用于在合成图片中定位所需显示的图片；
图片显示模块，用于显示定位后的图片；
所述图片定位模块加载图片合成模块生成的合成图片文件并定位所需显示的文件后通过图片显示模块在网页上进行展示。
2.根据权利要求1所述的一种定位图片系统，其特征在于，所述合成模块包括图片输入模块和图片输出模块，所述图片输出模块用于将图片输入模块输入的多幅图片按照系统参数输出为一个合成图片文件。
3.根据权利要求2所述的一种定位图片系统，其特征在于，所述系统参数包括图片尺寸，图片分辨率，图片排布位置及方式。
4.根据权利要求1所述的一种定位图片系统，其特征在于，所述图片定位模块采用CSS样式进行处理，包括属性定义模块和位置定义模块；所述属性定义模块用于加载所需的合成图片以及定义图片显示方式；所述位置定义模块通过设定像素值定义欲显示的图片在合成图片中的位置。
5.根据权利要求4所述的一种定位图片系统，其特征在于，所述图片显示方式包括平铺、重复。
6.根据权利要求1所述的一种定位图片系统，其特征在于，所述图片显示模块包括图片对象模块和图片截取模块；所述图片对象模块用于在网页上显示图片；所述图片截取模块根据网页上的图片对象的尺寸属性，截取对应尺寸的定位图片并在图片对象中显示。
7.一种定位图片方法，其特征在于：将欲在网页中显示的多个图片文件按照合成规则合并为一个合成图片文件，通过在网页中需要显示图片的位置通过定义CSS样式加载合成图片文件并定位合成图片文件中单个图片文件的位置，实现所需图片在网页中的显示。
8.根据权利要求7所述的一种定位图片方法，其特征在于，通过CSS定位并显示合成图片文件中单个图片文件的具体步骤为：
S1在网页中需要显示图片的位置建立图片对象并定义一个CSS样式并将其背景属性值定义为加载合成图片文件；
S2设置背景属性中的合成图片的显示方式为不重复显示；
S3设置背景属性中的边距参数来获取合成图片中单个图片的位置参数；
S4根据网页中图片对象的高度值和宽度值对定位后的单个图片进行截取并在图片对象中显示。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510569947.9A CN105094930A (zh) | 2015-09-09 | 2015-09-09 | 一种定位图片系统及方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510569947.9A CN105094930A (zh) | 2015-09-09 | 2015-09-09 | 一种定位图片系统及方法 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN105094930A true CN105094930A (zh) | 2015-11-25 |
Family
ID=54575440
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201510569947.9A Pending CN105094930A (zh) | 2015-09-09 | 2015-09-09 | 一种定位图片系统及方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN105094930A (zh) |
Cited By (11)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105787871A (zh) * | 2016-03-24 | 2016-07-20 | 广州酷狗计算机科技有限公司 | 图片合成方法及装置 |
| CN106355207A (zh) * | 2016-08-31 | 2017-01-25 | 五矿电子商务有限公司 | 一种比对网页中合并图的方法和装置 |
| CN107437236A (zh) * | 2016-05-27 | 2017-12-05 | 北京京东尚科信息技术有限公司 | 一种图片模糊处理方法及装置 |
| CN107633057A (zh) * | 2017-09-19 | 2018-01-26 | 深圳市茁壮网络股份有限公司 | 一种图片显示方法及装置 |
| CN107688575A (zh) * | 2016-08-04 | 2018-02-13 | 创盛视联数码科技（北京）有限公司 | 图片展示的方法 |
| CN107729361A (zh) * | 2017-09-04 | 2018-02-23 | 广州品唯软件有限公司 | 自动合成图片推送方法、装置及存储介质 |
| CN108805961A (zh) * | 2018-06-11 | 2018-11-13 | 广州酷狗计算机科技有限公司 | 数据处理方法、装置及存储介质 |
| CN109948123A (zh) * | 2018-11-27 | 2019-06-28 | 阿里巴巴集团控股有限公司 | 一种图像合并方法及装置 |
| CN110166812A (zh) * | 2019-05-17 | 2019-08-23 | 广州优视云集科技有限公司 | 一种支持动态调整清晰度的视频预览方法及系统 |
| CN110427584A (zh) * | 2019-07-11 | 2019-11-08 | 北京字节跳动网络技术有限公司 | 页面生成方法、装置、电子设备及计算机可读存储介质 |
| CN112182449A (zh) * | 2020-09-07 | 2021-01-05 | 北京达佳互联信息技术有限公司 | 页面加载方法、装置、电子设备及存储介质 |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102314434A (zh) * | 2010-06-30 | 2012-01-11 | 中兴通讯股份有限公司 | 页面背景图合并显示的方法及装置 |
| CN102737067A (zh) * | 2011-04-15 | 2012-10-17 | 阿里巴巴集团控股有限公司 | 输出网页的方法和系统 |
| US20120296958A1 (en) * | 2011-05-17 | 2012-11-22 | Sony Corporation | Information processing apparatus, information processing system, information processing method, and program |
| CN103577552A (zh) * | 2013-10-17 | 2014-02-12 | 北京奇虎科技有限公司 | 网页图片处理方法及装置 |
| CN104516971A (zh) * | 2014-12-25 | 2015-04-15 | 深圳联友科技有限公司 | 一种合并css 样式文件中背景图片的方法 |
-
2015
- 2015-09-09 CN CN201510569947.9A patent/CN105094930A/zh active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102314434A (zh) * | 2010-06-30 | 2012-01-11 | 中兴通讯股份有限公司 | 页面背景图合并显示的方法及装置 |
| CN102737067A (zh) * | 2011-04-15 | 2012-10-17 | 阿里巴巴集团控股有限公司 | 输出网页的方法和系统 |
| US20120296958A1 (en) * | 2011-05-17 | 2012-11-22 | Sony Corporation | Information processing apparatus, information processing system, information processing method, and program |
| CN103577552A (zh) * | 2013-10-17 | 2014-02-12 | 北京奇虎科技有限公司 | 网页图片处理方法及装置 |
| CN104516971A (zh) * | 2014-12-25 | 2015-04-15 | 深圳联友科技有限公司 | 一种合并css 样式文件中背景图片的方法 |
Non-Patent Citations (1)
| Title |
|---|
| JENNIFERNIEDERSTROBBINS: "《Web前端工程师修炼之道 原书第4版》", 30 September 2014 * |
Cited By (14)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105787871A (zh) * | 2016-03-24 | 2016-07-20 | 广州酷狗计算机科技有限公司 | 图片合成方法及装置 |
| CN107437236A (zh) * | 2016-05-27 | 2017-12-05 | 北京京东尚科信息技术有限公司 | 一种图片模糊处理方法及装置 |
| CN107437236B (zh) * | 2016-05-27 | 2021-08-13 | 北京京东尚科信息技术有限公司 | 一种图片模糊处理方法及装置 |
| CN107688575A (zh) * | 2016-08-04 | 2018-02-13 | 创盛视联数码科技（北京）有限公司 | 图片展示的方法 |
| CN106355207A (zh) * | 2016-08-31 | 2017-01-25 | 五矿电子商务有限公司 | 一种比对网页中合并图的方法和装置 |
| CN107729361B (zh) * | 2017-09-04 | 2021-04-16 | 广州品唯软件有限公司 | 自动合成图片推送方法、装置及存储介质 |
| CN107729361A (zh) * | 2017-09-04 | 2018-02-23 | 广州品唯软件有限公司 | 自动合成图片推送方法、装置及存储介质 |
| CN107633057A (zh) * | 2017-09-19 | 2018-01-26 | 深圳市茁壮网络股份有限公司 | 一种图片显示方法及装置 |
| CN108805961A (zh) * | 2018-06-11 | 2018-11-13 | 广州酷狗计算机科技有限公司 | 数据处理方法、装置及存储介质 |
| CN109948123A (zh) * | 2018-11-27 | 2019-06-28 | 阿里巴巴集团控股有限公司 | 一种图像合并方法及装置 |
| CN109948123B (zh) * | 2018-11-27 | 2023-06-02 | 创新先进技术有限公司 | 一种图像合并方法及装置 |
| CN110166812A (zh) * | 2019-05-17 | 2019-08-23 | 广州优视云集科技有限公司 | 一种支持动态调整清晰度的视频预览方法及系统 |
| CN110427584A (zh) * | 2019-07-11 | 2019-11-08 | 北京字节跳动网络技术有限公司 | 页面生成方法、装置、电子设备及计算机可读存储介质 |
| CN112182449A (zh) * | 2020-09-07 | 2021-01-05 | 北京达佳互联信息技术有限公司 | 页面加载方法、装置、电子设备及存储介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN105094930A (zh) | 一种定位图片系统及方法 | |
| US10210144B2 (en) | Creation and display of a webpage with alternative layouts for different webpage widths | |
| CN102663126B (zh) | 一种在移动终端中显示网页的方法及装置 | |
| Jiang et al. | Responsive web design mode and application | |
| CN105975576B (zh) | 终端内容适配显示方法、装置和终端 | |
| CN108268262A (zh) | 实现将html转换为微信小程序的方法、装置及系统 | |
| CN110263281B (zh) | 一种数据可视化开发中页面分辨率自适应的装置及方法 | |
| Gasston | The book of CSS3: A Developer's Guide to the Future of Web Design | |
| CN101523336B (zh) | 终端装置、内容显示方法 | |
| CN108073435B (zh) | 一种多信息集成显示方法及系统 | |
| US10049095B2 (en) | In-context editing of output presentations via automatic pattern detection | |
| CN104050238A (zh) | 一种地图标注方法和装置 | |
| CN104239284A (zh) | 一种图文自动排版的方法和装置 | |
| CN105224564A (zh) | 一种网页适应屏幕排版方法及装置 | |
| CN104820589A (zh) | 一种动态适配网页的方法及其装置 | |
| CN104391896A (zh) | 基于网页的平面印刷品排版方法及系统 | |
| Li et al. | The design and implementation of responsive web page based on HTML5 and CSS3 | |
| CN109683978A (zh) | 一种流式布局界面渲染的方法、装置以及电子设备 | |
| CN103279345A (zh) | 一种对页面元素进行锁定的方法及装置 | |
| CN114791988A (zh) | 一种基于浏览器的pdf文件解析方法、系统、存储介质 | |
| US10157238B2 (en) | Transformation of marked-up content to a reversible file format for automated browser based pagination | |
| CN112507257A (zh) | 一种网页显示方法、装置、设备以及存储介质 | |
| CN104714802A (zh) | 一种显示html元素的附加信息的方法和装置 | |
| CN102841890B (zh) | 一种用于文档构建的数据加工方法和装置 | |
| US8185818B2 (en) | Mixed techniques for HTML crosstab rendering |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20151125 |
|
| RJ01 | Rejection of invention patent application after publication |