CN103853417A - Rolling and pagination display method and device for network dynamic picture - Google Patents
Rolling and pagination display method and device for network dynamic picture Download PDFInfo
- Publication number
- CN103853417A CN103853417A CN201210504533.4A CN201210504533A CN103853417A CN 103853417 A CN103853417 A CN 103853417A CN 201210504533 A CN201210504533 A CN 201210504533A CN 103853417 A CN103853417 A CN 103853417A
- Authority
- CN
- China
- Prior art keywords
- picture
- dynamic picture
- label
- dynamic
- display
- 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.)
- Granted
Links
Images
Landscapes
- Information Transfer Between Computers (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The application discloses a rolling and pagination display method and a rolling and pagination display device for a network dynamic picture. The method comprises the steps of: downloading the network dynamic picture from a server to local by a picture access and download module; determining the valuing range of a visual area of a current webpage in real time according to the rolling value of a scroll bar by a visual area determining module; traversing the dynamic pictures downloaded to the local by a traversal processing module; aiming at each dynamic picture, judging whether the preset position of the dynamic picture is within the valuing range of the visual area; if yes, building a display label to display the corresponding picture; otherwise, not building the corresponding display label, and deleting the display label in the case that the corresponding display label is built; refreshing the webpage by a display module, and executing the display label to upload and display the corresponding picture.According to the rolling and pagination display method and device for the network dynamic picture, the rolling and pagination display of the dynamic picture can be achieved by rolling the scroll bar, the occupation of an internal storage and a GDI object can be reduced, and the processing efficiency of a client is improved.
Description
Technical field
The application relates to network information Display Processing Technology field, relates in particular to a kind of rolling Pagination Display method and apparatus of network dynamic picture.
Background technology
On current internet, there is a large amount of dynamic pictures.Modal dynamic picture is graphic interchange format (GIF, Graphics Interchange Format) picture.An important feature of dynamic picture is that it can deposit multiple image in a file, and can read and be shown on screen by width being stored in the multiple image data in file, thereby the simplest animation of loaded and displayed one has formed dynamic effect.
Client, for example browser or other can browsing page client, under some scene, need access to browse a large amount of dynamic pictures, for example, at the result of page searching of dynamic picture search engine, need loaded and displayed to meet in a large number the dynamic picture of search condition.Under this scene, existing dynamic picture display technique adopts click paging technique to carry out Pagination Display dynamic picture conventionally.Its shortcoming is:
Display paging Text Link or button in display page, in the time that user wishes to check the dynamic picture of lower one page, need to find lower corresponding Text Link or the button of one page, and click this Text Link or button, just can demonstrate the dynamic picture of next paging.Therefore this prior art complex operation: first user need to search Text Link that lower one page is corresponding or the position of button in current page, after finding, need to click this Text Link or button and could trigger the dynamic picture that shows next paging, not only search operation is wasted time and energy, and need user to carry out clicking operation, user's operational ton is larger, complex operation.
At present, in the technology of the static images in display web page, in order to solve the above-mentioned Similar Problems of Pagination Display static images, occur a kind of according to the rolling of scroll bar, roll in the page technology of Pagination Display static images, that is: first acquiescence is downloaded the static images of the first paging, and the static images of loaded and displayed the first paging in current page; In the time that scroll bar rolls downwards, download again the static images of next paging, and the static images of next paging of loaded and displayed in current page.Just can realize the static images of all pagings of loaded and displayed of successively rolling by this simple operations of rolling scroll bar in the same page, save user and search, click the troublesome operation of Text Link or button.In the time that user need to return to the static images of checking a upper paging, do not need equally to search, click Text Link or button, but the scroll bar that scrolls up.
But above-mentioned prior art is effective in the time of the loaded and displayed of real static images, if still directly apply to the loaded and displayed of dynamic picture, there will be following technical matters:
Above-mentioned prior art adopts rolling Pagination Display picture, when after the picture of the complete all pagings of loaded and displayed, all figure sector-meeting loaded and displayed are on same webpage, figure sector-meeting of every loaded and displayed takies internal memory and Graphics Device Interface (GDI, the Graphics Device Interface) object of the respective amount of local device.For the loaded and displayed of static images, a static images only can take a small amount of internal memory and GDI object conventionally, and for example a static images takies a GDI object conventionally.And to loaded and displayed dynamic picture, the quantity of its amount of ram taking and GDI object can sharp increase.The quantity of the GDI object that for example dynamic picture of loaded and displayed takies is conventionally 20 to 30.Adopt the technology of above-mentioned existing rolling Pagination Display dynamic picture, in having loaded multiple pagings, on current web page, the shared internal memory of the dynamic picture of loaded and displayed and the quantity of GDI object can sharply increase.For example suppose that each paging comprises 18 dynamic pictures, load after 12 pagings will be on current web page 198 dynamic pictures of loaded and displayed, more than 4000 of shared GDI object Ke Da, and common client software is only supported several thousand GDI objects, therefore can cause the reduction of the treatment effeciency of the client for browsing this webpage, in the situation that local device performance falls behind relatively, also may directly cause this client collapse.
Summary of the invention
In view of this, fundamental purpose of the present invention is to provide a kind of Pagination Display method and apparatus of dynamic picture, to reduce the taking of internal memory and GDI object, improves the treatment effeciency of client.
Technical scheme of the present invention is achieved in that
A rolling Pagination Display method for network dynamic picture, comprising:
From server download network dynamic picture to this locality;
Determine in real time the span of current web page viewing area according to the roll value of scroll bar;
Described in traversal, download to local dynamic picture; For each dynamic picture, judge this dynamic picture in the precalculated position of current web page whether in the span of described current web page viewing area; If it is show corresponding picture in the case of not creating the display label that this dynamic picture is corresponding at this precalculated position establishment display label; Otherwise do not create corresponding display label, and delete this display label in the situation that creating corresponding display label;
Refreshed web page, carries out described display label with picture corresponding to loaded and displayed.
A rolling Pagination Display device for network dynamic picture, comprising:
Picture access download module, for from server download network dynamic picture to this locality;
Viewing area determination module, for determining in real time the span of current web page viewing area according to the roll value of scroll bar;
Traversal processing module downloads to local dynamic picture described in traveling through; For each dynamic picture, judge this dynamic picture in the precalculated position of current web page whether in the span of described current web page viewing area; If it is the display label that this dynamic picture is corresponding, create display label and show corresponding picture in the case of not creating; Otherwise do not create corresponding display label, and delete this display label in the situation that creating corresponding display label;
The first display module, for refreshed web page, carries out described display label with picture corresponding to loaded and displayed.
Compared with prior art, the present invention first downloads to this locality by the dynamic picture on network, then determine the span of current web page viewing area, judge that each downloads to the precalculated position of local dynamic picture in current web page whether in current web page viewing area, if in viewing area, create display label and show that corresponding picture (can directly show corresponding dynamic picture, also can first show the staticize picture of this dynamic picture, after triggering, mouse shows again this dynamic picture), otherwise do not create corresponding display label and show corresponding picture, and in the situation that creating corresponding display label, need to delete this display label, thereby make the dynamic picture in a Gai viewing area, loaded and displayed precalculated position in the viewing area of current web page.Adopt the present invention, both can realize the object of utilizing the rolling operation of scroll bar to realize rolling Pagination Display dynamic picture, simultaneously due to the dynamic picture that can realize in a real-time loading display of visually region, the quantity of the dynamic picture of loaded and displayed greatly reduces simultaneously, reduce taking of internal memory to local device and GDI object, improve the treatment effeciency of client, reduced due to the probability that taking in a large number of internal memory and GDI object is caused to client collapse.
Accompanying drawing explanation
Fig. 1 is a kind of process flow diagram of the rolling Pagination Display method of network dynamic picture of the present invention;
Fig. 2 is the contrast schematic diagram of a kind of viewing area, scroll bar and overall content;
Fig. 3 is a kind of process flow diagram of the further embodiment of the method for the invention;
Fig. 4 is that a kind of embodiment of the rolling Pagination Display device of network dynamic picture of the present invention forms schematic diagram;
Fig. 5 is the composition schematic diagram of picture access download module described in a kind of embodiment;
Fig. 6 is that another embodiment of the rolling Pagination Display device of network dynamic picture of the present invention forms schematic diagram.
Embodiment
Below in conjunction with drawings and the specific embodiments, the present invention is further described in more detail.
Method of the present invention is by the client executing with network information function of browse, and described client can be for example browser, can be also other client with web browser kernel.Step as described in specifically can being realized by page script language (as javascript).The present invention goes for any webpage that need to show multiple dynamic pictures, especially goes for the demonstration of the result of page searching in network dynamic picture search engine.
Fig. 1 is a kind of process flow diagram of the rolling Pagination Display method of network dynamic picture of the present invention.Referring to Fig. 1, the method mainly comprises:
Once after the span of step 103 viewing area changes, download to local dynamic picture described in traversal; For each dynamic picture, judge this dynamic picture in the precalculated position of current web page whether in the span of described current web page viewing area; If it is show corresponding picture in the case of not creating the display label that this dynamic picture is corresponding at this precalculated position establishment display label; Otherwise do not create corresponding display label, and delete this display label in the situation that creating corresponding display label.
In this step, one more specifically traversal processing implementation is: if current dynamic picture in the precalculated position of current web page in the span of described current web page viewing area, judge whether this dynamic picture has created corresponding display label, if it is travel through next dynamic picture, otherwise the described pre-position at this dynamic picture creates corresponding display label, need the corresponding picture showing in this display label internal labeling, then travel through next dynamic picture; If this dynamic picture in the precalculated position of current web page not in the span of current web page viewing area, judge whether this dynamic picture has created corresponding display label, if it is delete this display label, then travel through next dynamic picture, otherwise travel through next dynamic picture.
In described step 101, the described concrete mode from server download network dynamic picture to this locality can be:
A kind of mode is: initiates the request of obtaining all dynamic pictures of current web page to server, and described dynamic picture is downloaded to this locality in the address of the dynamic picture returning according to server.
Or another kind of mode is: first initiate the request of the dynamic picture that obtains the first paging to server, and described dynamic picture is downloaded to local in the address of the dynamic picture returning according to server; Then monitor the roll value of current web page scroll bar, (for example exceed for the first time the integral multiple of current web page viewing area height value in roll value in batches according to the rolling of scroll bar, 1 times, 2 times, 3 times ... the request of by that analogy) obtaining the dynamic picture of next paging to server initiation, and described dynamic picture is downloaded to local in the address of the dynamic picture returning according to server.
By the treatment step of the above-mentioned second way, can reach the effect of paging request download dynamic picture, further shorten the delay of the web displaying causing due to download dynamic picture.
In described step 102, describedly determine according to the roll value of scroll bar that in real time the concrete mode of the span of current web page viewing area can have multiple.For example Fig. 2 is the contrast schematic diagram of a kind of viewing area, scroll bar and overall content.Referring to Fig. 2, in one embodiment, describedly determine according to the roll value of scroll bar that in real time the concrete mode of the span of current web page viewing area comprises: determine the height h of described viewing area and respectively arrange the height m of dynamic picture; The roll value p of real-time listening current web page scroll bar, determine in real time real-time apart from d(those skilled in the art all the knowing of top, described viewing area to webpage entirety content top according to this roll value p, describedly determine that according to described roll value p the concrete grammar of described d is relevant with the definition of described roll value d, if for example described roll value d is directly defined as the real-time distance of top, viewing area to webpage entirety content top, d=p; If described roll value d is defined as the real-time distance of bottom, viewing area to webpage entirety content top, d=p-h); The integral part of d/m is added to the 1 initial row number c as viewing area, the termination row number z by the integral part of (d+h)/m as viewing area, the span of described viewing area is: [c, z];
Corresponding, in described step 103, described judge dynamic picture in the precalculated position of current web page whether in the span of described current web page viewing area, specifically comprise: the row number of for example, determining this dynamic picture place according to the predetermined arrangement rule of the numbering of this dynamic picture and current web page (every row will show several pictures); Then judge that this row number is whether at the span [c of described viewing area, z] within, if it is judge that this dynamic picture is in the precalculated position of current web page in the span in described viewing area, otherwise judge that this dynamic picture is in the precalculated position of current web page not in the span in described viewing area.
Certainly,, in another kind of embodiment, the span of described viewing area also can directly be used: [d, d+h]; Corresponding, described judge dynamic picture in the precalculated position of current web page whether in the span of described current web page viewing area, be specially: the row number i that determines this dynamic picture place according to the predetermined arrangement rule of the numbering of this dynamic picture and current web page, judge that whether i × h is at described [d, d+h] within, if it is judge that this dynamic picture is in the precalculated position of current web page in the span in described viewing area, otherwise judge that this dynamic picture is in the precalculated position of current web page not in the span in described viewing area.The calculated amount of certain this processing mode is slightly larger, and as above an embodiment is not high for treatment effeciency.
In described step 103, if the dynamic picture of current traversal is in the precalculated position of current web page in the span in described viewing area and also do not set up corresponding display label, in one embodiment, direct loaded and displayed dynamic picture in described viewing area.Describedly create the concrete grammar that display label shows corresponding picture do not create corresponding display label in precalculated position in the situation that and be: newly-built picture tag, the address that this picture tag is set be described dynamic picture at local buffer address, this picture tag is inserted into the precalculated position of described dynamic picture at current web page; After refreshed web page, carry out afterwards described picture tag, at dynamic picture described in webpage position loaded and displayed corresponding to this picture tag.
If the dynamic picture of current traversal is in the precalculated position of current web page in the span in described viewing area and also do not set up corresponding display label, in another kind of embodiment, the first static images of this dynamic picture of loaded and displayed in described viewing area, shows corresponding dynamic picture when reloading after the instruction that the dynamic picture that this static images of preview is corresponding detected.That is: describedly the display label that this dynamic picture is corresponding, create display label and show corresponding picture in the case of not creating, specifically comprise: create text label as display label, the call instruction of local operation system picture processing filter is set in text label, the processing address of this call instruction is set to described dynamic picture at local buffer address, being equivalent at the corresponding picture showing of need of text label internal labeling is the static images of this picture processing filter output, then on described precalculated position, inserts text label.In the time of follow-up refreshed web page, the described display label of described execution specifically comprises with picture corresponding to loaded and displayed: carry out described text label, call local operation system picture processing filter and from described dynamic picture, extract a frame picture, using this frame picture extracting as static images loaded and displayed in webpage position corresponding to described text label.
In a specific embodiment of the present invention, described local operation system picture processing filter is the picture processing filter that can extract a frame from described dynamic picture.Concrete picture processing filter corresponding in different operating system can be different.For example, the picture processing filter in the IE browser in windows operating system, is a kind of Cascading Style Sheet (CSS, Cascading Style Sheet) pattern of uniqueness, and these picture processing filters are mainly the various special-effects for realizing image.Wherein having a kind of picture processing filter is AlphaImageLoader filter, this AlphaImageLoader filter can be in object container border, between the background of object and content, show a pictures, and shearing to this picture and varying sized operation are provided.If what be written into is PNG form, also can carry out to this PNG picture the transparency processing of 0%-100%.By the dynamic gif picture of this AlphaImageLoader filter processes and displays, this AlphaImageLoader filter can carry out the cutting of picture automatically, only shows the first frame of gif picture, and what show is a static images.
In the present embodiment, the filter that utilizes script that the CSS of text label is set in step 103 is AlphaImageLoader filter, and described client need to adopt IE browser kernel in this case.In described step 103, text label described in client call, AlphaImageLoader filter by the call instruction in text label in can call operation system reads described dynamic picture from described buffer address, this AlphaImageLoader filter extracts the first frame picture of described dynamic picture again, by this first frame picture loaded and displayed to institute's text label the corresponding position in webpage.Thereby the staticize that can realize network dynamic picture shows.Certainly, for other filter, be likely also from dynamic picture, to extract the picture of other frame as static images loaded and displayed.
After this, in the time of dynamic picture corresponding to static images described in user needs preview, instruction from preview dynamic picture to client that can send, for example this instruction is generally that mouse moves on the picture of the staticize in webpage and sends, client need to be by static images mobilism again.Then, in the time that user does not need preview dynamic picture, can send the instruction that stops dynamic picture described in preview to client, for example this instruction is generally that the dynamic picture that mouse shifts out described preview sends to other position of webpage, and client need to be by the staticize again of the dynamic picture of described preview.
Fig. 3 is a kind of process flow diagram of the further embodiment of the method for the invention.Referring to Fig. 3, in this further embodiment, further comprise:
Whether step 105, client detection mouse move on described some static images of loaded and displayed after above-mentioned staticize is processed, and if it is carry out subsequent treatment for this static images.
In prior art, in order to realize the staticize of dynamic picture and to be switched to again dynamic picture after instruction receiving, conventionally need to initiate twice http to server and ask and download two pictures, once for static images is downloaded in request, once for dynamic picture is downloaded in request, the bandwidth resources of network are not only wasted, and when static images is switched to dynamic picture, need to again wait for the download of dynamic picture, operation delay is longer, the fluency of client browse displays dynamic picture is poor, and user experiences bad.
And in the present invention, by the aforesaid operations of Fig. 3, because described dynamic picture has downloaded to local, client can directly read this dynamic picture of local cache, do not need again to download, then script language calling inserts order, this dynamic picture is inserted into the position of original text label, webpage just can normally show dynamic picture like this, thereby realize staticize picture and be switched to the procedure for displaying of dynamic picture, and corresponding HTTP request is reduced into once, the i.e. described request of once downloading dynamic picture, therefore the computational resource that can save client device and initiate unnecessary request, and saving is due to the bandwidth resources of the shared network of unnecessary download, and can promote the static images treatment effeciency of mobilism again, reduce time delay, the fluency of dynamic picture is browsed in lifting, and then lifting user experiences.
Thereby by aforesaid operations, can, in not needing preview dynamic picture, described dynamic picture be restored to static images, thereby can realize the staticize again of dynamic picture.Afterwards, can also return to step 104, if after detecting that mouse moves on static images, again show dynamic picture, so circulation.
In addition, the present invention's employing is called local operation system picture processing filter the first frame picture of described dynamic picture is carried out to extraction process, rather than carries out extraction process by client.Like this, can save the computational resource of client, improve the treatment effeciency of picture extraction process, can not cause carrying out picture extraction process and causing client process Speed Reduction and then block whole webpage due to client, can avoid the problem of the client collapse that multiple dynamic pictures of extraction process cause simultaneously due to client yet.
Simultaneously, because adopting above-mentioned default static, the present invention shows described dynamic picture, mouse just shows the mode of dynamic picture after triggering afterwards, can be in the time of multiple dynamic pictures of same web displaying, user seems, just can not see multiple dynamic picture one startings, reduce user's vision is disturbed, not have giddy sensation.
Corresponding with described method of the present invention, the invention also discloses a kind of rolling Pagination Display device of network dynamic picture.Fig. 4 is that a kind of embodiment of the rolling Pagination Display device of network dynamic picture of the present invention forms schematic diagram.Referring to Fig. 4, this device comprises::
Picture access download module 401, for from server download network dynamic picture to this locality.
Viewing area determination module 402, for determining in real time the span of current web page viewing area according to the roll value of scroll bar.
The first display module 404, for refreshed web page, carries out described display label with picture corresponding to loaded and displayed.
In described traversal processing module 403, more specifically processing mode is: if in described span, judge whether this dynamic picture has created corresponding display label, if it is travel through next dynamic picture, otherwise the described pre-position at this dynamic picture creates corresponding display label, need the corresponding picture showing in this display label internal labeling, then travel through next dynamic picture; If this dynamic picture in the precalculated position of current web page not in the span of current web page viewing area, judge whether this dynamic picture has created corresponding display label, if it is delete this display label, then travel through next dynamic picture, otherwise travel through next dynamic picture;
In one embodiment, described picture access download module 401 can be specifically for: initiate the request of obtaining all dynamic pictures of current web page to server, and described dynamic picture is downloaded to local in the address of the dynamic picture returning according to server.In another kind of embodiment, described picture access download module can ask to download dynamic picture in batches, is illustrated in figure 5 the composition schematic diagram of picture access download module described in a kind of embodiment.Referring to Fig. 5, described picture access download module 401 specifically comprises:
For the staticize that realizes dynamic picture acquiescence shows, in described traversal processing module 403, specifically comprise that the first label sets up module, for described dynamic picture in the precalculated position of current web page in the span of described current web page viewing area, and in the case of not creating the display label that this dynamic picture is corresponding, create text label as display label, the call instruction of local operation system picture processing filter is set in text label, the processing address of this call instruction is set to described dynamic picture at local buffer address, on described precalculated position, insert text label,
Described the first display module 404 is specifically for refreshed web page, carry out described text label, call local operation system picture processing filter and from described dynamic picture, extract a frame picture, using this frame picture extracting as static images loaded and displayed in webpage position corresponding to described text label.
Fig. 6 is that another embodiment of the rolling Pagination Display device of network dynamic picture of the present invention forms schematic diagram.Referring to Fig. 6, in this embodiment, described device further comprises:
The second label is set up module 406, described by text label corresponding to the static images of preview for deleting, newly-built picture tag, the address that this picture tag is set be described dynamic picture at local buffer address, this picture tag is inserted into the webpage position that deleted described text label is corresponding.
The second display module 407, sets up for carrying out described the second label the picture tag that module 406 is set up, at dynamic picture described in webpage position loaded and displayed corresponding to this picture tag.
By the embodiment of Fig. 6, not only can realize the staticize output of network dynamic picture, in the time of needs preview dynamic picture, can also show dynamic picture, complete the switching of static images to dynamic picture.
In this embodiment, described device can further include:
The second detection module 408, for example, for detection of whether receiving the instruction dynamic picture of described the second display module loaded and displayed (detect mouse whether shift out) that stops the dynamic picture of the second display module loaded and displayed described in preview, if it is trigger described the 3rd label and set up module 409.
The 3rd label is set up module 409, for deleting the picture tag corresponding to dynamic picture of described preview, newly-built text label, the call instruction of local operation system picture processing filter is set in text label, the processing address of this call instruction is set to described dynamic picture at local buffer address, text label is inserted into the webpage position of deleted described picture tag.
The 3rd display module 410, set up for carrying out described the 3rd label the text label that module 409 is set up, call local operation system picture processing filter and from described dynamic picture, extract a frame picture, using this frame picture extracting as static images loaded and displayed in webpage position corresponding to described text label.
By the embodiment described in Fig. 6, the staticize again of the dynamic picture of described preview.Thereby realize the random switching of dynamic picture and static images.
In a kind of embodiment of device of the present invention, described local operation system picture processing filter is the AlphaImageLoader filter of IE browser in windows operating system.Described client is the client that adopts IE browser kernel.
In the several embodiment that provide in the application, should be understood that disclosed apparatus and method can realize by another way.For example, device embodiment described above is only schematic, for example, the division of described module, be only that a kind of logic function is divided, when actual realization, can have other dividing mode, for example multiple modules or assembly can in conjunction with or can be integrated into another system or device, or some features can ignore, or do not carry out.
Each embodiment of the present invention can realize by the data processor of being carried out as computing machine by data processing equipment.Obviously, data processor has formed the present invention.In addition, be conventionally stored in a data processor in storage medium by directly program being read out to storage medium or by by installation or copy in the memory device (as hard disk and or internal memory) of data processing equipment and carry out.Therefore, such storage medium has also formed the present invention.Storage medium can use the recording mode of any type, such as paper storage medium (as paper tape etc.), magnetic storage medium (as floppy disk, hard disk, flash memory etc.), optical storage media (as CD-ROM etc.), magnetic-optical storage medium (as MO etc.) etc.
The foregoing is only preferred embodiment of the present invention, in order to limit the present invention, within the spirit and principles in the present invention not all, any modification of making, be equal to replacement, improvement etc., within all should being included in the scope of protection of the invention.
Claims (11)
1. a rolling Pagination Display method for network dynamic picture, is characterized in that, comprising:
From server download network dynamic picture to this locality;
Determine in real time the span of current web page viewing area according to the roll value of scroll bar;
Described in traversal, download to local dynamic picture; For each dynamic picture, judge this dynamic picture in the precalculated position of current web page whether in the span of described current web page viewing area; If it is show corresponding picture in the case of not creating the display label that this dynamic picture is corresponding at this precalculated position establishment display label; Otherwise do not create corresponding display label, and delete this display label in the situation that creating corresponding display label;
Refreshed web page, carries out described display label with picture corresponding to loaded and displayed.
2. method according to claim 1, is characterized in that, described from server download network dynamic picture to this locality, specifically comprises:
Initiate the request of obtaining all dynamic pictures of current web page to server, and described dynamic picture is downloaded to local in the address of the dynamic picture returning according to server;
Or, first initiate the request of the dynamic picture that obtains the first paging to server, and described dynamic picture is downloaded to local in the address of the dynamic picture returning according to server; Then monitor the roll value of current web page scroll bar, initiate in batches the request of the dynamic picture that obtains next paging according to the rolling of scroll bar to server, and described dynamic picture is downloaded to local in the address of the dynamic picture returning according to server.
3. method according to claim 1, is characterized in that,
The described span of determining in real time current web page viewing area according to the roll value of scroll bar, specifically comprises: determine the height h of described viewing area and respectively arrange the height m of dynamic picture; The roll value p of real-time listening current web page scroll bar, arrives the real-time apart from d of webpage entirety content top according to top, the in real time definite described viewing area of this roll value p; The integral part of d/m is added to the 1 initial row number c as viewing area, the termination row number z by the integral part of (d+h)/m as viewing area, the span of described viewing area is: [c, z];
Corresponding, described judge dynamic picture in the precalculated position of current web page whether in the span of described current web page viewing area, specifically comprise: the row number of determining this dynamic picture place according to the predetermined arrangement rule of the numbering of this dynamic picture and current web page; Then judge that this row number is whether at the span [c of described viewing area, z] within, if it is judge that this dynamic picture is in the precalculated position of current web page in the span in described viewing area, otherwise judge that this dynamic picture is in the precalculated position of current web page not in the span in described viewing area.
4. method according to claim 1, is characterized in that, describedly the display label that this dynamic picture is corresponding, creates display label and shows corresponding picture in the case of not creating, and specifically comprises:
Create text label as display label, the call instruction of local operation system picture processing filter is set in text label, the processing address of this call instruction is set to described dynamic picture at local buffer address, inserts text label on described precalculated position;
The described display label of described execution is with picture corresponding to loaded and displayed, specifically comprise: carry out described text label, call local operation system picture processing filter and from described dynamic picture, extract a frame picture, using this frame picture extracting as static images loaded and displayed in webpage position corresponding to described text label.
5. method according to claim 4, is characterized in that, the method is detecting after the instruction of the dynamic picture that described in preview, static images is corresponding, further comprising:
Delete the text label that described static images is corresponding;
Newly-built picture tag, the address that this picture tag is set be described dynamic picture at local buffer address, this picture tag is inserted into the webpage position that deleted described text label is corresponding;
Carry out described picture tag, at dynamic picture described in webpage position loaded and displayed corresponding to this picture tag.
6. method according to claim 5, is characterized in that, the method is detecting after the instruction that stops dynamic picture described in preview, further comprising:
Delete the picture tag that described dynamic picture is corresponding;
Newly-built text label, the call instruction of local operation system picture processing filter is set in text label, the processing address of this call instruction is set to described dynamic picture at local buffer address, text label is inserted into the webpage position of deleted described picture tag;
Carry out described text label, call local operation system picture processing filter and from described dynamic picture, extract a frame picture, using this frame picture extracting as static images loaded and displayed in webpage position corresponding to described text label.
7. a rolling Pagination Display device for network dynamic picture, is characterized in that, comprising:
Picture access download module, for from server download network dynamic picture to this locality;
Viewing area determination module, for determining in real time the span of current web page viewing area according to the roll value of scroll bar;
Traversal processing module downloads to local dynamic picture described in traveling through; For each dynamic picture, judge this dynamic picture in the precalculated position of current web page whether in the span of described current web page viewing area; If it is the display label that this dynamic picture is corresponding, create display label and show corresponding picture in the case of not creating; Otherwise do not create corresponding display label, and delete this display label in the situation that creating corresponding display label;
The first display module, for refreshed web page, carries out described display label with picture corresponding to loaded and displayed.
8. device according to claim 7, is characterized in that, described picture access download module specifically comprises:
Acquiescence download module, for first initiate the request of the dynamic picture that obtains the first paging to server, and described dynamic picture is downloaded to local in the address of the dynamic picture returning according to server;
Batch download module, for monitoring the roll value of current web page scroll bar, initiate in batches the request of the dynamic picture that obtains next paging to server according to the rolling of scroll bar, and described dynamic picture is downloaded to local in the address of the dynamic picture returning according to server.
9. device according to claim 7, is characterized in that,
In described traversal processing module, specifically comprise that the first label sets up module, for described dynamic picture in the precalculated position of current web page in the span of described current web page viewing area and do not creating the display label that this dynamic picture is corresponding, create text label as display label, the call instruction of local operation system picture processing filter is set in text label, the processing address of this call instruction is set to described dynamic picture at local buffer address, inserts text label on described precalculated position;
Described the first display module is specifically for refreshed web page, carry out described text label, call local operation system picture processing filter and from described dynamic picture, extract a frame picture, using this frame picture extracting as static images loaded and displayed in webpage position corresponding to described text label.
10. the device of stating according to claim 9, is characterized in that, this device further comprises:
First detection module, for detection of the instruction of whether receiving the dynamic picture that static images is corresponding described in preview, if it is triggers described the second label and sets up module;
The second label is set up module, for deleting the text label that described static images is corresponding, newly-built picture tag, the address that this picture tag is set be described dynamic picture at local buffer address, this picture tag is inserted into the webpage position that deleted described text label is corresponding;
The second display module, for refreshing the page, carries out described the second label and sets up the picture tag that module is set up, at dynamic picture described in webpage position loaded and displayed corresponding to this picture tag.
11. devices according to claim 10, is characterized in that, this device further comprises:
The second detection module, for detection of whether receiving the instruction that stops the dynamic picture of the second display module loaded and displayed described in preview, if it is triggers described the 3rd label and sets up module;
The 3rd label is set up module, for deleting the picture tag that described dynamic picture is corresponding, newly-built text label, the call instruction of local operation system picture processing filter is set in text label, the processing address of this call instruction is set to described dynamic picture at local buffer address, text label is inserted into the webpage position of deleted described picture tag;
The 3rd display module, be used for refreshing the page, carry out described the 3rd label and set up the text label that module is set up, call local operation system picture processing filter and from described dynamic picture, extract a frame picture, using this frame picture extracting as static images loaded and displayed in webpage position corresponding to described text label.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201210504533.4A CN103853417B (en) | 2012-11-30 | 2012-11-30 | The rolling Pagination Display method and apparatus of network dynamic picture |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201210504533.4A CN103853417B (en) | 2012-11-30 | 2012-11-30 | The rolling Pagination Display method and apparatus of network dynamic picture |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN103853417A true CN103853417A (en) | 2014-06-11 |
| CN103853417B CN103853417B (en) | 2017-08-04 |
Family
ID=50861155
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201210504533.4A Active CN103853417B (en) | 2012-11-30 | 2012-11-30 | The rolling Pagination Display method and apparatus of network dynamic picture |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN103853417B (en) |
Cited By (23)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104267961A (en) * | 2014-09-30 | 2015-01-07 | 腾讯科技（深圳）有限公司 | Scroll bar generation method and device |
| CN104267918A (en) * | 2014-09-17 | 2015-01-07 | 深圳市九洲电器有限公司 | Picture display method and system |
| CN104392410A (en) * | 2014-11-28 | 2015-03-04 | 北京搜狗科技发展有限公司 | Method and equipment for integrating pictures in skin system and skin drawing method |
| CN104484235A (en) * | 2014-11-24 | 2015-04-01 | 北京奇虎科技有限公司 | Memory optimization method and device based on waterfall stream technology |
| CN104699805A (en) * | 2015-03-20 | 2015-06-10 | 努比亚技术有限公司 | Music search method and music search device |
| CN105045592A (en) * | 2015-07-24 | 2015-11-11 | 北京金山安全软件有限公司 | Picture display method and device |
| CN105549926A (en) * | 2015-09-25 | 2016-05-04 | 深圳市美贝壳科技有限公司 | Method for solving sliding block jump of mobile terminal |
| CN105677678A (en) * | 2014-11-20 | 2016-06-15 | 腾讯科技（武汉）有限公司 | Determination method for first screen positions of pages, webpage information display method and system |
| CN106095995A (en) * | 2016-06-21 | 2016-11-09 | 武汉斗鱼网络科技有限公司 | A kind of picture loading method based on viewing area and device |
| CN106156153A (en) * | 2015-04-14 | 2016-11-23 | 腾讯科技（深圳）有限公司 | A kind of method and apparatus Loaded Image |
| WO2016202215A1 (en) * | 2015-06-19 | 2016-12-22 | 阿里巴巴集团控股有限公司 | Method and device for previewing dynamic image, and method and device for displaying expression package |
| CN106407227A (en) * | 2015-08-03 | 2017-02-15 | 天脉聚源（北京）科技有限公司 | Dynamic webpage display method and system |
| CN106682016A (en) * | 2015-11-10 | 2017-05-17 | 腾讯科技（深圳）有限公司 | Method and device for loading pictures based on mobile terminal browser |
| CN107016088A (en) * | 2017-04-05 | 2017-08-04 | 福建中金在线信息科技有限公司 | The method and device of picture processing in a kind of webpage article |
| CN107239566A (en) * | 2017-06-14 | 2017-10-10 | 掌阅科技股份有限公司 | User journal generation method, electronic equipment and computer-readable storage medium |
| CN107678863A (en) * | 2016-08-01 | 2018-02-09 | 北京国双科技有限公司 | The page assembly means of communication and device |
| WO2018076795A1 (en) * | 2016-10-31 | 2018-05-03 | 华为技术有限公司 | Page refreshing method and device |
| WO2018133651A1 (en) * | 2017-01-18 | 2018-07-26 | 腾讯科技（深圳）有限公司 | Data loading method and device, storage medium and electronic device |
| CN109684573A (en) * | 2017-10-18 | 2019-04-26 | 北京京东尚科信息技术有限公司 | Target Photo display methods and device, storage medium, electronic equipment |
| CN109948101A (en) * | 2019-03-21 | 2019-06-28 | Oppo广东移动通信有限公司 | Page switching method, device, storage medium and electronic equipment |
| CN105183846B (en) * | 2015-09-07 | 2019-08-02 | 百度在线网络技术（北京）有限公司 | The method for pushing and device of webpage information |
| CN111221600A (en) * | 2018-11-26 | 2020-06-02 | 福建省天奕网络科技有限公司 | Management method and terminal for Layaair engine rolling |
| CN111782995A (en) * | 2020-05-29 | 2020-10-16 | 北京沃东天骏信息技术有限公司 | Method and device for paging and loading graphics |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101794567A (en) * | 2010-02-10 | 2010-08-04 | 中兴通讯股份有限公司 | Method and terminal for loading pictures |
| CN102279854A (en) * | 2010-06-08 | 2011-12-14 | 腾讯科技（北京）有限公司 | Method and device for displaying webpage contents |
| US20120011430A1 (en) * | 2010-07-09 | 2012-01-12 | Stefan Parker | Infinite Scrolling |
| CN102760133A (en) * | 2011-04-28 | 2012-10-31 | 腾讯科技（深圳）有限公司 | Webpage loading method, webpage loading system, browser, terminal and server |
-
2012
- 2012-11-30 CN CN201210504533.4A patent/CN103853417B/en active Active
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101794567A (en) * | 2010-02-10 | 2010-08-04 | 中兴通讯股份有限公司 | Method and terminal for loading pictures |
| CN102279854A (en) * | 2010-06-08 | 2011-12-14 | 腾讯科技（北京）有限公司 | Method and device for displaying webpage contents |
| US20120011430A1 (en) * | 2010-07-09 | 2012-01-12 | Stefan Parker | Infinite Scrolling |
| CN102760133A (en) * | 2011-04-28 | 2012-10-31 | 腾讯科技（深圳）有限公司 | Webpage loading method, webpage loading system, browser, terminal and server |
Non-Patent Citations (1)
| Title |
|---|
| 月藏锋: "js延迟加载页面图片（当图片出现在窗口可视区域的时候加载）", 《HTTP://WWW.CNBLOGS.COM/SOFTLIVE/ARCHIVE/2012/06/18/2553694.HTML》 * |
Cited By (33)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104267918A (en) * | 2014-09-17 | 2015-01-07 | 深圳市九洲电器有限公司 | Picture display method and system |
| CN104267918B (en) * | 2014-09-17 | 2017-09-29 | 深圳市九洲电器有限公司 | A kind of image display method and system |
| CN104267961B (en) * | 2014-09-30 | 2017-08-01 | 腾讯科技（深圳）有限公司 | The generation method and device of scroll bar |
| CN104267961A (en) * | 2014-09-30 | 2015-01-07 | 腾讯科技（深圳）有限公司 | Scroll bar generation method and device |
| CN105677678A (en) * | 2014-11-20 | 2016-06-15 | 腾讯科技（武汉）有限公司 | Determination method for first screen positions of pages, webpage information display method and system |
| CN104484235A (en) * | 2014-11-24 | 2015-04-01 | 北京奇虎科技有限公司 | Memory optimization method and device based on waterfall stream technology |
| CN104484235B (en) * | 2014-11-24 | 2017-12-05 | 北京奇安信科技有限公司 | A kind of Memory Optimize Method and device based on waterfall Flow Technique |
| CN104392410A (en) * | 2014-11-28 | 2015-03-04 | 北京搜狗科技发展有限公司 | Method and equipment for integrating pictures in skin system and skin drawing method |
| CN104392410B (en) * | 2014-11-28 | 2018-04-27 | 北京搜狗科技发展有限公司 | Picture integration method, skin method for drafting and equipment in integumentary system |
| CN104699805A (en) * | 2015-03-20 | 2015-06-10 | 努比亚技术有限公司 | Music search method and music search device |
| CN106156153A (en) * | 2015-04-14 | 2016-11-23 | 腾讯科技（深圳）有限公司 | A kind of method and apparatus Loaded Image |
| CN106156153B (en) * | 2015-04-14 | 2022-05-27 | 腾讯科技（深圳）有限公司 | Method and device for loading picture |
| WO2016202215A1 (en) * | 2015-06-19 | 2016-12-22 | 阿里巴巴集团控股有限公司 | Method and device for previewing dynamic image, and method and device for displaying expression package |
| CN106257415A (en) * | 2015-06-19 | 2016-12-28 | 阿里巴巴集团控股有限公司 | Realize the method and apparatus of dynamic picture preview, expression bag methods of exhibiting and device |
| US10650486B2 (en) | 2015-06-19 | 2020-05-12 | Alibaba Group Holding Limited | Previewing dynamic images and expressions |
| CN105045592A (en) * | 2015-07-24 | 2015-11-11 | 北京金山安全软件有限公司 | Picture display method and device |
| CN106407227A (en) * | 2015-08-03 | 2017-02-15 | 天脉聚源（北京）科技有限公司 | Dynamic webpage display method and system |
| CN105183846B (en) * | 2015-09-07 | 2019-08-02 | 百度在线网络技术（北京）有限公司 | The method for pushing and device of webpage information |
| CN105549926A (en) * | 2015-09-25 | 2016-05-04 | 深圳市美贝壳科技有限公司 | Method for solving sliding block jump of mobile terminal |
| CN106682016A (en) * | 2015-11-10 | 2017-05-17 | 腾讯科技（深圳）有限公司 | Method and device for loading pictures based on mobile terminal browser |
| CN106095995A (en) * | 2016-06-21 | 2016-11-09 | 武汉斗鱼网络科技有限公司 | A kind of picture loading method based on viewing area and device |
| CN107678863A (en) * | 2016-08-01 | 2018-02-09 | 北京国双科技有限公司 | The page assembly means of communication and device |
| WO2018076795A1 (en) * | 2016-10-31 | 2018-05-03 | 华为技术有限公司 | Page refreshing method and device |
| WO2018133651A1 (en) * | 2017-01-18 | 2018-07-26 | 腾讯科技（深圳）有限公司 | Data loading method and device, storage medium and electronic device |
| CN107016088A (en) * | 2017-04-05 | 2017-08-04 | 福建中金在线信息科技有限公司 | The method and device of picture processing in a kind of webpage article |
| CN107239566A (en) * | 2017-06-14 | 2017-10-10 | 掌阅科技股份有限公司 | User journal generation method, electronic equipment and computer-readable storage medium |
| CN109684573A (en) * | 2017-10-18 | 2019-04-26 | 北京京东尚科信息技术有限公司 | Target Photo display methods and device, storage medium, electronic equipment |
| CN109684573B (en) * | 2017-10-18 | 2021-10-15 | 北京京东尚科信息技术有限公司 | Target picture display method and device, storage medium and electronic equipment |
| CN111221600A (en) * | 2018-11-26 | 2020-06-02 | 福建省天奕网络科技有限公司 | Management method and terminal for Layaair engine rolling |
| CN111221600B (en) * | 2018-11-26 | 2023-05-23 | 福建省天奕网络科技有限公司 | Layaair engine rolling management method and terminal |
| CN109948101A (en) * | 2019-03-21 | 2019-06-28 | Oppo广东移动通信有限公司 | Page switching method, device, storage medium and electronic equipment |
| CN111782995A (en) * | 2020-05-29 | 2020-10-16 | 北京沃东天骏信息技术有限公司 | Method and device for paging and loading graphics |
| CN111782995B (en) * | 2020-05-29 | 2024-05-17 | 北京沃东天骏信息技术有限公司 | Graphics paging loading method and device |
Also Published As
| Publication number | Publication date |
|---|---|
| CN103853417B (en) | 2017-08-04 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN103853417A (en) | Rolling and pagination display method and device for network dynamic picture | |
| NL2008222C2 (en) | Selective rendering of off-screen content. | |
| CN106570098B (en) | Page refreshing method and device | |
| CN107992301B (en) | User interface implementation method, client and storage medium | |
| US9286390B2 (en) | Presentation of rich search results in delineated areas | |
| CN103856507A (en) | Network dynamic picture static display method and device | |
| EP2573751A1 (en) | Display control program, recording medium whereupon display program is recorded, display control device, and display control method | |
| CN105242817A (en) | Page element real-time highlighted display method and apparatus | |
| CN109683978B (en) | Stream type layout interface rendering method and device and electronic equipment | |
| CN112287258A (en) | Page rendering method, device, equipment and storage medium | |
| US9679075B1 (en) | Efficient delivery of animated image files | |
| WO2023284442A1 (en) | Page processing method and apparatus, electronic device, and readable storage medium | |
| CN103164541A (en) | Image presentation method and equipment | |
| US10572572B2 (en) | Dynamic layout generation for an electronic document | |
| US10867119B1 (en) | Thumbnail image generation | |
| CN103942202A (en) | High self-adaptation zooming method and device for webpage text field | |
| US20120089899A1 (en) | Method and system for redisplaying a web page | |
| CN107391534B (en) | Page display method, page file return method, page display device, page file return device and computer storage medium | |
| CN111427637B (en) | Page rendering method and device | |
| WO2014032545A1 (en) | Webpage display method and apparatus | |
| US20140337709A1 (en) | Method and apparatus for displaying web page | |
| US20170270218A1 (en) | Mapping of Defined Regions Within a Webpage | |
| CN103514203A (en) | Method and system for browsing webpage in reading mode | |
| Tair | The importance of responsive logo design across a wide range of devices on the web | |
| CN115630241A (en) | Page display method and device, electronic equipment and storage medium |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |