CN102789470B - The method and apparatus of the picture in loading webpage - Google Patents
The method and apparatus of the picture in loading webpage Download PDFInfo
- Publication number
- CN102789470B CN102789470B CN201110132557.7A CN201110132557A CN102789470B CN 102789470 B CN102789470 B CN 102789470B CN 201110132557 A CN201110132557 A CN 201110132557A CN 102789470 B CN102789470 B CN 102789470B
- Authority
- CN
- China
- Prior art keywords
- image data
- picture
- picture identification
- img label
- webpage
- 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.)
- Active
Links
Abstract
The method and apparatus that the invention discloses a kind of picture loaded in webpage, belongs to computer realm.Described method includes: send the access request of a webpage to server；Receiving the corresponding html document of webpage that server returns, html document includes the img label of the picture in webpage, and the src attribute in img label is replaced by picture identification；According to the picture identification in img label, obtain the image data meeting data URI specification that picture identification is corresponding；The image data of acquisition is added in img label as src property value, removes the picture identification substituting src attribute, and load corresponding picture according to image data.Described device includes: asks, receive, obtain and load-on module.By the present invention in that and substitute the src attribute in img label by picture identification, according to the picture identification in img label, obtain the image data meeting data URI specification that picture identification is corresponding, and load corresponding picture, avoid hash-collision problem, it is possible to the picture being properly loaded in webpage.
Description
Technical field
The present invention relates to computer realm, particularly to the method and apparatus of a kind of picture loaded in webpage.
Background technology
Along with the fast development of network technology, Web content is more and more abundanter, also can be embedding except word in webpage
Enter various picture.The Android browser of client is when accessing webpage, except loading in webpage
Word, in addition it is also necessary to load the picture in webpage.
Android browser generally loads the picture in webpage by the src attribute in img label at present,
Loading procedure is specific as follows:
Android browser sends the access request of a webpage to server, and this webpage that server returns is corresponding
HTML (Hyper Text Mark-up Language, HTML) document, html document
Including the img label of the picture in this webpage, img label includes src attribute, and src property value points to picture
Document location URL (URL, Uniform/Universal Resource Locator).Then
The picture file position URL that Android browser indicates according to src attribute initiates a HTTP
(HyperText Transfer Protocol, HTML (Hypertext Markup Language)) asks, and obtains corresponding figure from server
Sheet data, and load corresponding picture according to image data.For the ease of quickly loading, Android browser
Typically can cache the image data obtained from server, owing to the URL length of picture is different, therefore, Android
Browser would generally be with the cryptographic Hash of URL for indexed cache image data.But the URL of different pictures can
Can generate identical cryptographic Hash, i.e. hash-collision, follow-up with the cryptographic Hash of URL in caching for index loading
Picture, it is possible to picture entanglement occurs.
The entanglement problem occurred when loading currently for the picture in the webpage that hash-collision is caused, existing skill
Art does not also have corresponding solution.
Summary of the invention
In order to correctly load the picture in webpage, embodiments provide a kind of loading in webpage
The method and apparatus of picture.Described technical scheme is as follows:
A kind of method of the picture loaded in webpage, described method includes:
The access request of a webpage is sent to server；
Receiving the corresponding html document of described webpage that described server returns, described html document includes
The img label of the picture in described webpage, the src attribute in described img label is replaced by picture identification；
According to the picture identification in img label, obtain described picture identification corresponding meet data URI specification
Image data；
The image data of acquisition is added in described img label as src property value, removes and substitute src genus
Property picture identification, and according to described image data load corresponding picture.
A kind of device of the picture loaded in webpage, described device includes:
Request module, for sending the access request of a webpage to server；
Receiver module, for receiving the corresponding html document of described webpage that described server returns, described
Html document includes the img label of the picture in described webpage, and the src attribute in described img label substitutes
For picture identification；
Acquisition module, for according to the picture identification in img label, obtains the symbol that described picture identification is corresponding
Close the image data of data URI specification；
Load-on module, for the image data of acquisition is added in described img label as src property value,
Remove the picture identification substituting src attribute, and load corresponding picture according to described image data.
The technical scheme that the embodiment of the present invention provides has the benefit that
By using picture identification to substitute the src attribute in img label, according to the picture identification in img label,
Obtain the image data meeting data URI specification that picture identification is corresponding, and load corresponding picture, it is to avoid
Hash-collision problem, it is possible to the picture that is properly loaded in webpage.
Accompanying drawing explanation
Fig. 1 is the method flow diagram of the picture loaded in webpage provided in the embodiment of the present invention 1；
Fig. 2 is the other method flow chart of the picture loaded in webpage provided in the embodiment of the present invention 1；
Fig. 3 is the apparatus structure schematic diagram of the picture loaded in webpage provided in the embodiment of the present invention 2；
Fig. 4 is another apparatus structure schematic diagram of the picture loaded in webpage provided in the embodiment of the present invention 2.
Detailed description of the invention
For making the object, technical solutions and advantages of the present invention clearer, below in conjunction with accompanying drawing to the present invention
Embodiment is described in further detail.
Embodiment 1
See Fig. 1, a kind of method present embodiments providing picture loaded in webpage, including:
101: send the access request of a webpage to server；
102: receiving the corresponding html document of webpage that server returns, html document includes in webpage
The img label of picture, the src attribute in img label is replaced by picture identification；
103: according to the picture identification in img label, what acquisition picture identification was corresponding meets data URI
The image data of (Uniform Resource Identifier, universal resource identifier) specification；
Wherein, data URI specification is data URI scheme, is and comprises the data phase being embedded in the page
The specification closed.
104: the image data of acquisition is added in img label as src property value, remove and substitute src
The picture identification of attribute, and load corresponding picture according to image data.
The present embodiment substitutes the src attribute in img label, according in img label by using picture identification
Picture identification, obtains the image data meeting data URI specification that picture identification is corresponding, and loads corresponding
Picture, it is to avoid hash-collision problem, it is possible to the picture that is properly loaded in webpage.
The method of the picture being described in detail below in above-mentioned loading webpage.
200: user end to server sends the access request of a certain webpage；
This access request can be specifically that the browser of client sends, such as Android browser etc., this reality
Execute example and do not limit concrete browser.Wherein, client can be mobile phone etc., and the present embodiment does not limit tool
The client of body.
201: after server receives the access request of a certain webpage of client-access, return this webpage corresponding
Html document；
Wherein, html document includes the img label of the picture in this webpage, the src attribute in img label
It is replaced by picture identification.Picture identification is regular length.
202: client receives html document, and travels through the img label in html document；
For each the img label traversed, perform following steps:
203: client, with the picture identification in img label for index, checks in caching sessionStorage
Whether comprise the image data meeting data URI specification that this picture identification is corresponding；
204: if caching sessionStorage in comprise this picture identification corresponding meet data URI specification
Image data, from caching, obtain the image data meeting data URI specification corresponding to picture identification, hold
Row 208；
Step 205-207 be if caching sessionStorage in not this picture identification corresponding meet data
The image data of URI specification, client from server obtain picture identification corresponding meet data URI specification
Image data.
205: if caching sessionStorage in not this picture identification corresponding meet data URI specification
Image data, the picture identification in img label is sent to server by HTTP request by client；
One or more picture identification in img label can be sent by client by a HTTP request
To server.When sending multiple picture identification simultaneously, save HTTP request quantity, accelerate picture
Loading velocity, improves Consumer's Experience.
206: server receives picture identification, reads the corresponding image data of locally stored picture identification, will
The image data read is processed into the image data meeting data URI specification, will meet data URI specification
Image data return client；
The image data read is processed into the image data meeting data URI specification, concrete processing procedure
May include that and the image data read is carried out Base64 coding, add before image data in encoded
Add picture/mb-type mark, such as JPEG, GIF, PNG etc., obtain meeting the image data of data URI specification.
207: client receives the image data meeting data URI specification that server returns, perform 208；
Further, client, with picture identification for index, meets data URI specification by what server returned
Image data be stored in caching sessionStorage in.
208: this image data is added in img label as src property value by client, remove and substitute src
The picture identification of attribute, and load corresponding picture according to this image data.
The present embodiment substitutes the src attribute in img label, according in img label by using picture identification
Picture identification, obtains the image data meeting data URI specification that picture identification is corresponding, and loads corresponding
Picture, it is to avoid hash-collision problem, it is possible to the picture that is properly loaded in webpage.Meanwhile, client is led to
Cross a HTTP request and multiple picture identification can be sent to server, save HTTP request quantity,
Accelerate picture loading velocity, improve Consumer's Experience.
Embodiment 2
See Fig. 3, present embodiments provide the device of a kind of picture loaded in webpage, including:
Request module 301, for sending the access request of a webpage to server；
Receiver module 302, for receiving the corresponding html document of webpage that server returns, HTML literary composition
Shelves include the img label of the picture in webpage, and the src attribute in img label is replaced by picture identification；
Acquisition module 303, for according to the picture identification in img label, obtains corresponding the meeting of picture identification
The image data of data URI specification；
Load-on module 304, for the image data of acquisition is added in img label as src property value,
Remove the picture identification substituting src attribute, and load corresponding picture according to image data.
See Fig. 4, acquisition module 303, including:
Whether inspection unit 303a, for the picture identification in img label for index, checking in caching and wrap
Containing the image data meeting universal resource identifier data URI specification that picture identification is corresponding；
First acquiring unit 303b, if data URI that meet comprising picture identification in caching corresponding are advised
The image data of model, obtains the image data meeting data URI specification that picture identification is corresponding from caching；
And second acquisition unit 303c, if for caching in do not have picture identification corresponding meet data URI
The image data of specification, according to the picture identification in img label, obtains picture identification from server corresponding
Meet the image data of data URI specification.
Second acquisition unit 303c, specifically for
By HTTP request, the one or more picture identification in img label are sent to server, service
Device reads the locally stored corresponding image data of picture identification, is processed into by the image data read and meets
The image data of data URI specification also returns；Receive the picture meeting data URI specification that server returns
Data.
This device also includes: memory module 305, after being used for performing second acquisition unit 303c, with picture
It is designated index, the image data meeting data URI specification obtained from server is stored in caching.
The device that this enforcement provides, can be client, or be placed in a functional module of client, with
The client of embodiment of the method belongs to same design, and the process of implementing refers to embodiment of the method.
The present embodiment substitutes the src attribute in img label, according in img label by using picture identification
Picture identification, obtains the image data meeting data URI specification that picture identification is corresponding, and loads corresponding
Picture, it is to avoid hash-collision problem, it is possible to the picture that is properly loaded in webpage.Meanwhile, client is led to
Cross a HTTP request and multiple picture identification can be sent to server, save HTTP request quantity,
Accelerate picture loading velocity, improve Consumer's Experience.
All or part of content in the technical scheme that above example provides can be realized by software programming,
Its software program is stored in the storage medium that can read, storage medium such as: the hard disk in computer, light
Dish or floppy disk.
The foregoing is only presently preferred embodiments of the present invention, not in order to limit the present invention, all the present invention's
Within spirit and principle, any modification, equivalent substitution and improvement etc. made, should be included in the present invention's
Within protection domain.
Claims (10)
1. the method for the picture loaded in webpage, it is characterised in that described method includes:
User end to server sends the access request of a webpage；
Described client receives the corresponding html document of described webpage that described server returns, described
Html document includes the img label of the picture in described webpage, and the src attribute in described img label substitutes
For picture identification；
Described client according to the picture identification in img label, obtain described picture identification corresponding meet number
Image data according to URI specification；
The image data of acquisition is added in described img label as src property value by described client, removes
Substitute the picture identification of src attribute, and load corresponding picture according to described image data.
Method the most according to claim 1, it is characterised in that described according to the picture in img label
Mark, obtains the image data meeting data URI specification that described picture identification is corresponding, including:
With the picture identification in img label for index, check and whether caching comprises described picture identification correspondence
The image data meeting data URI specification；
If comprising the image data meeting data URI specification that described picture identification is corresponding in Huan Cun, postpone
Deposit the image data meeting data URI specification that the described picture identification of middle acquisition is corresponding；
If there is no the image data meeting data URI specification that described picture identification is corresponding in Huan Cun, according to
Picture identification in img label, from described server obtain described picture identification corresponding meet data URI
The image data of specification.
Method the most according to claim 2, it is characterised in that described according to the picture in img label
Mark, obtains, from described server, the image data meeting data URI specification that described picture identification is corresponding,
Including:
By HTTP request, the picture identification in img label is sent to described server, described server
Read the locally stored corresponding image data of described picture identification, the described image data read is processed
Become meet the image data of data URI specification and return；
Receive the image data meeting data URI specification that described server returns.
Method the most according to claim 3, it is characterised in that the described described picture number that will read
According to being processed into the image data meeting data URI specification, including:
The described image data read is carried out Base64 coding, adds before image data in encoded
Picture/mb-type mark obtains meeting the image data of data URI specification.
Method the most according to claim 3, it is characterised in that described by asynchronous HTTP request general
Picture identification in img label is sent to described server, including:
By HTTP request, the one or more picture identification in img label are sent to described server.
Method the most according to claim 2, it is characterised in that described according to the picture in img label
Mark, from described server obtain the image data meeting data URI specification corresponding to described picture identification it
After, including:
With picture identification for index, the image data meeting data URI specification that will obtain from described server
It is stored in caching.
7. the device of the picture loaded in webpage, it is characterised in that described device is applied to client,
Including:
Request module, for sending the access request of a webpage to server；
Receiver module, for receiving the corresponding html document of described webpage that described server returns, described
Html document includes the img label of the picture in described webpage, and the src attribute in described img label substitutes
For picture identification；
Acquisition module, for according to the picture identification in img label, obtains the symbol that described picture identification is corresponding
Close the image data of data URI specification；
Load-on module, for the image data of acquisition is added in described img label as src property value,
Remove the picture identification substituting src attribute, and load corresponding picture according to described image data.
Device the most according to claim 7, it is characterised in that described acquisition module, including:
Inspection unit, for the picture identification in img label for index, checking in caching whether comprise institute
State the image data meeting data URI specification that picture identification is corresponding；
First acquiring unit, if data URI that meet comprising described picture identification in caching corresponding are advised
The image data of model, obtains, from caching, the picture number meeting data URI specification that described picture identification is corresponding
According to；
Second acquisition unit, if data URI that meet not having described picture identification corresponding in caching are advised
The image data of model, according to the picture identification in img label, obtains described picture identification from described server
The corresponding image data meeting data URI specification.
Device the most according to claim 8, it is characterised in that second acquisition unit, specifically for
By HTTP request, the one or more picture identification in img label are sent to described server,
Described server reads the locally stored corresponding image data of described picture identification, the described figure that will read
Sheet data are processed into and meet the image data of data URI specification and return；
Receive the image data meeting data URI specification that described server returns.
Device the most according to claim 8, it is characterised in that described device also includes: storage mould
Block, after being used for performing described second acquisition unit,
With picture identification for index, the image data meeting data URI specification that will obtain from described server
It is stored in caching.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201110132557.7A CN102789470B (en) | 2011-05-20 | 2011-05-20 | The method and apparatus of the picture in loading webpage |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201110132557.7A CN102789470B (en) | 2011-05-20 | 2011-05-20 | The method and apparatus of the picture in loading webpage |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN102789470A CN102789470A (en) | 2012-11-21 |
| CN102789470B true CN102789470B (en) | 2016-08-24 |
Family
ID=47154874
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201110132557.7A Active CN102789470B (en) | 2011-05-20 | 2011-05-20 | The method and apparatus of the picture in loading webpage |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN102789470B (en) |
Families Citing this family (20)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103942199A (en) * | 2013-01-18 | 2014-07-23 | 腾讯科技（北京）有限公司 | Method and device for obtaining picture information on webpages and terminal |
| CN104077310B (en) * | 2013-03-28 | 2018-08-10 | 联想(北京)有限公司 | Load the method, apparatus and system of resource file |
| CN103324740B (en) * | 2013-06-28 | 2017-08-25 | 深圳市九洲电器有限公司 | A kind of image display method, device and set top box |
| CN104424333A (en) * | 2013-09-11 | 2015-03-18 | 北大方正集团有限公司 | Method and system for loading table data |
| CN103491171A (en) * | 2013-09-24 | 2014-01-01 | 成都金山数字娱乐科技有限公司 | Network resource asynchronous loading method and device |
| CN104574264A (en) * | 2013-10-16 | 2015-04-29 | 北大方正集团有限公司 | Picture processing method and device |
| CN103685518B (en) * | 2013-12-16 | 2016-09-28 | 北京奇立软件技术有限公司 | The method of the image-text page, client and system is provided for mobile terminal |
| CN104125273A (en) * | 2014-07-16 | 2014-10-29 | 百度在线网络技术（北京）有限公司 | Image transmission method in web page, image server, network server and client |
| CN104461515A (en) * | 2014-11-23 | 2015-03-25 | 国云科技股份有限公司 | Method for caching jsp page images |
| CN104598616A (en) * | 2015-01-30 | 2015-05-06 | 百度在线网络技术（北京）有限公司 | Page loading method, page loading device, server and page loading system |
| CN104679432B (en) * | 2015-03-04 | 2018-01-30 | 成都品果科技有限公司 | A kind of method based on the cross-platform man-machine interaction browsing pictures of mobile terminal browser |
| CN104965877A (en) * | 2015-06-12 | 2015-10-07 | 郑州悉知信息技术有限公司 | Webpage picture acquisition method, picture cache server, coordination server and system |
| CN105094804B (en) * | 2015-06-18 | 2019-04-26 | 北京奇虎科技有限公司 | The method and apparatus of animation are added in the page |
| CN104991933A (en) * | 2015-07-06 | 2015-10-21 | 无锡天脉聚源传媒科技有限公司 | Picture display method and apparatus |
| CN105446625A (en) * | 2015-11-26 | 2016-03-30 | 努比亚技术有限公司 | Picture pasting method and apparatus based on browser |
| CN107301182B (en) * | 2016-04-15 | 2020-06-30 | 北京京东尚科信息技术有限公司 | Method and device for displaying webpage embedded with picture |
| CN107220289A (en) * | 2017-04-24 | 2017-09-29 | 深圳中兴网信科技有限公司 | Method, device and terminal based on web browser Photomap showing piece |
| CN107729467A (en) * | 2017-10-12 | 2018-02-23 | 江苏鸿信系统集成有限公司 | Web graph text mixing content store method based on PhoneGap |
| CN109344349B (en) * | 2018-09-28 | 2020-12-29 | 北京三快在线科技有限公司 | Data caching method and device and electronic equipment |
| CN111506840A (en) * | 2019-01-11 | 2020-08-07 | 北京京东尚科信息技术有限公司 | Loading method and system of client embedded webpage, electronic equipment and storage medium |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US6363418B1 (en) * | 1998-10-16 | 2002-03-26 | Softbook Press, Inc. | On-line image caching control for efficient image display |
| CN101364979A (en) * | 2007-08-10 | 2009-02-11 | 鸿富锦精密工业（深圳）有限公司 | Downloaded material parsing and processing system and method |
| CN101662364A (en) * | 2009-09-17 | 2010-03-03 | 北京飞天诚信科技有限公司 | Method and system for safe login |
| CN101820439A (en) * | 2010-02-03 | 2010-09-01 | 深圳市迅雷网络技术有限公司 | Display method, device and client for files |
-
2011
- 2011-05-20 CN CN201110132557.7A patent/CN102789470B/en active Active
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US6363418B1 (en) * | 1998-10-16 | 2002-03-26 | Softbook Press, Inc. | On-line image caching control for efficient image display |
| CN101364979A (en) * | 2007-08-10 | 2009-02-11 | 鸿富锦精密工业（深圳）有限公司 | Downloaded material parsing and processing system and method |
| CN101662364A (en) * | 2009-09-17 | 2010-03-03 | 北京飞天诚信科技有限公司 | Method and system for safe login |
| CN101820439A (en) * | 2010-02-03 | 2010-09-01 | 深圳市迅雷网络技术有限公司 | Display method, device and client for files |
Non-Patent Citations (1)
| Title |
|---|
| Web页面描述语言HTML(二);谭立湘;《微型机与应用》;19981231(第9期);第34页 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN102789470A (en) | 2012-11-21 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN102789470B (en) | The method and apparatus of the picture in loading webpage | |
| CN102868719B (en) | A kind of Network Access Method based on buffer memory and server | |
| CN104049986B (en) | plug-in loading method and device | |
| CN103685604B (en) | A kind of domain name pre-parsed method and device | |
| US8935798B1 (en) | Automatically enabling private browsing of a web page, and applications thereof | |
| CN104461491B (en) | The operation method and system of a kind of Hybrid components | |
| CN110096660B (en) | Method and device for loading page pictures and electronic equipment | |
| US20090070413A1 (en) | Displaying Content on a Mobile Device | |
| CN103338249B (en) | Caching method and device | |
| US8739024B2 (en) | Method and apparatus for processing world wide web page | |
| CN107315646B (en) | Method and device for controlling data flow between page components | |
| TWI584149B (en) | Web page access request response method and device | |
| CN102646135A (en) | Webpage collecting method, device and system | |
| CN103152367A (en) | Cache dynamic maintenance updating method and system | |
| CN103248707B (en) | File access method, system and equipment | |
| CN102880679B (en) | A kind of info web storage means and device | |
| CN106557584A (en) | A kind of web site collection method and device | |
| CN104980464B (en) | A kind of network request processing method, network server and network system | |
| CN104021137B (en) | A kind of client based on catalogue mandate is locally opened and closed the method and system of file | |
| CN106156291A (en) | The caching method of static resource and system thereof based on Localstroage | |
| KR101265164B1 (en) | System for providing shorten URL browsing with branding , method thereof, and web client thereof | |
| CA2527885A1 (en) | Verifying content of resources in markup language documents | |
| CN104253835A (en) | User behavior data acquisition method and system | |
| CN105808727A (en) | Website cross-screen adaptation technology architecture and adaptation method based on HTML5 (Hypertext Markup Language 5) | |
| CN110633432A (en) | Method, device, terminal equipment and medium for acquiring data |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| C14 | Grant of patent or utility model | ||
| GR01 | Patent grant |