CN114416209B - Page loading method, device and readable storage medium - Google Patents
Page loading method, device and readable storage medium Download PDFInfo
- Publication number
- CN114416209B CN114416209B CN202210090130.3A CN202210090130A CN114416209B CN 114416209 B CN114416209 B CN 114416209B CN 202210090130 A CN202210090130 A CN 202210090130A CN 114416209 B CN114416209 B CN 114416209B
- Authority
- CN
- China
- Prior art keywords
- image
- target
- page
- target image
- adjusted
- 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
- 238000011068 loading method Methods 0.000 title claims abstract description 44
- 238000000034 method Methods 0.000 claims description 23
- 238000012545 processing Methods 0.000 claims description 13
- 238000004590 computer program Methods 0.000 claims description 9
- 238000012544 monitoring process Methods 0.000 claims description 6
- 238000004422 calculation algorithm Methods 0.000 claims description 5
- 238000005457 optimization Methods 0.000 claims description 3
- 230000000007 visual effect Effects 0.000 claims description 3
- 230000006870 function Effects 0.000 description 9
- 230000008569 process Effects 0.000 description 8
- 238000010586 diagram Methods 0.000 description 5
- 230000004044 response Effects 0.000 description 5
- 238000003672 processing method Methods 0.000 description 3
- 239000002131 composite material Substances 0.000 description 2
- 238000001514 detection method Methods 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 230000003287 optical effect Effects 0.000 description 2
- 239000007787 solid Substances 0.000 description 2
- 238000012546 transfer Methods 0.000 description 2
- 230000005540 biological transmission Effects 0.000 description 1
- 230000008859 change Effects 0.000 description 1
- 238000004891 communication Methods 0.000 description 1
- 238000013500 data storage Methods 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 238000000605 extraction Methods 0.000 description 1
- 239000000835 fiber Substances 0.000 description 1
- 238000009499 grossing Methods 0.000 description 1
- 230000010365 information processing Effects 0.000 description 1
- 230000010354 integration Effects 0.000 description 1
- 230000000750 progressive effect Effects 0.000 description 1
- 239000004065 semiconductor Substances 0.000 description 1
- 230000001960 triggered effect Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Data Mining & Analysis (AREA)
- Information Transfer Between Computers (AREA)
Abstract
The embodiment of the application discloses a page loading method, a page loading device and a readable storage medium, which comprise the following steps: displaying a target page; determining a target image corresponding to the target page; adjusting the image size of the target image to be a preset size, and displaying the adjusted image in the target page; after the target image is loaded, the adjusted image is dynamically switched to the target image, and the scheme can improve the experience of a user for browsing the webpage.
Description
Technical Field
The present application relates to the field of information processing technologies, and in particular, to a page loading method, a page loading device, and a storage medium.
Background
With the development of communication technology, users can open web pages at any time, browse the web pages and acquire various information. Currently users open web pages mainly through browsers in computers, mobile terminals, etc. After receiving the indication information of opening the webpage sent by the user, the browser can display the webpage to the user after acquiring webpage version data, webpage layout data and other webpage basic data required by the webpage returned by the webpage server.
However, when a large number of images exist in the web page, the browser needs to load all the images, and if a certain image is not loaded, a blank or a box appears in the web page, so that the user experience of browsing the web page is poor.
Disclosure of Invention
In view of the above, the application provides a page loading method, a page loading device and a storage medium, which can improve the experience of browsing web pages by users.
The application provides a page loading method, which comprises the following steps:
displaying a target page;
determining a target image corresponding to the target page;
adjusting the image size of the target image to be a preset size, and displaying the adjusted image in the target page;
and after the target image is loaded, dynamically switching the adjusted image into the target image.
Optionally, in some embodiments, the dynamically switching the adjusted image to the target image after the target image is loaded includes:
after the target image is loaded, performing fuzzy processing on the adjusted image;
And dynamically switching the processed image into the target image.
Optionally, in some embodiments, the dynamically switching the processed image to the target image includes:
determining the display position of the processed image in the target page;
and displaying the target image on the processed image by taking the display position as a reference, and hiding the processed image.
Optionally, in some embodiments, displaying the target image on the processed image based on the display position includes:
Determining a center position of the target image;
And overlaying the target image onto the processed image according to the display position and the center position.
Optionally, in some embodiments, after the target image is loaded, blurring the adjusted image includes:
after the target image is loaded, determining a display area in the target page;
And blurring processing is carried out on the adjusted image based on a preset blurring algorithm, and the processed image is filled in the display area.
Optionally, in some embodiments, the determining the target image corresponding to the image address information includes:
extracting image tag information from the target page;
And determining the target image corresponding to the image tag information.
Optionally, in some embodiments, the determining the target image corresponding to the image tag information includes:
identifying an image address in the image tag information;
And acquiring a target image corresponding to the image address.
Correspondingly, the application also provides a page loading device, which comprises:
The display module is used for displaying the target page;
the determining module is used for determining a target image corresponding to the target page;
The adjusting module is used for adjusting the image size of the target image to be a preset size and displaying the adjusted image in the target page;
and the switching module is used for dynamically switching the adjusted image into the target image after the target image is loaded.
Furthermore, the application provides a readable storage medium storing a computer program which, when executed by a processor, performs the above method.
According to the page loading method provided by the application, after the target page is displayed, the target image corresponding to the target page is determined, then, the image size of the target image is adjusted to be the preset size, the adjusted image is displayed in the target page, finally, after the target image is completely loaded, the adjusted image is dynamically switched to the target image, when more images to be displayed in the target page are displayed, the target image can be adjusted to be the image with the preset size, and when the target image is completely loaded, the adjusted image is dynamically switched to be the target image, so that the situation that a certain image is not loaded well and blank or square frame appears in a webpage can be avoided, and therefore, the experience of a user for browsing the webpage can be improved.
Drawings
In order to more clearly illustrate the technical solutions of the embodiments of the present application, the drawings that are needed in the description of the embodiments will be briefly described below, it being obvious that the drawings in the following description are only some embodiments of the present application, and that other drawings may be obtained according to these drawings without inventive effort for a person skilled in the art.
FIG. 1 is a schematic view of a page loading method according to an embodiment of the present application;
FIG. 2 is a schematic flow chart of a page loading method according to an embodiment of the present application;
FIG. 3 is a schematic diagram of image blurring processing provided by an embodiment of the present application;
FIG. 4 is an interface schematic diagram of a page loading method according to an embodiment of the present application;
FIG. 5 is another interface schematic diagram of a page loading method according to an embodiment of the present application;
Fig. 6 is a schematic structural diagram of a page loading device according to an embodiment of the present application.
Detailed Description
The following description of the embodiments of the present application will be made in detail and with reference to the accompanying drawings, wherein it is apparent that the embodiments described are only some, but not all embodiments of the present application. All other embodiments, which can be made by those skilled in the art based on the embodiments of the application without making any inventive effort, are intended to fall within the scope of the application. The various embodiments described below and their technical features can be combined with each other without conflict.
It should be understood that although the terms first, second, third, etc. may be used herein to describe various information, these information should not be limited by these terms. These terms are only used to distinguish one type of information from another. For example, first information may also be referred to as second information, and similarly, second information may also be referred to as first information, without departing from the scope herein. The word "if" as used herein may be interpreted as "at … …" or "at … …" or "in response to a determination" depending on the context. Furthermore, as used herein, the singular forms "a", "an" and "the" are intended to include the plural forms as well, unless the context indicates otherwise. It will be further understood that the terms "comprises," "comprising," "includes," and/or "including" specify the presence of stated features, steps, operations, elements, components, items, categories, and/or groups, but do not preclude the presence, presence or addition of one or more other features, steps, operations, elements, components, items, categories, and/or groups. The terms "or", "and/or", "including at least one of", and the like, as used herein, may be construed as inclusive, or mean any one or any combination. For example, "including at least one of: A. b, C "means" any one of the following: a, A is as follows; b, a step of preparing a composite material; c, performing operation; a and B; a and C; b and C; a and B and C ", again as examples," A, B or C "or" A, B and/or C "means" any of the following: a, A is as follows; b, a step of preparing a composite material; c, performing operation; a and B; a and C; b and C; a and B and C). An exception to this definition will occur only when a combination of elements, functions, steps or operations are in some way inherently mutually exclusive.
It should be understood that, although the steps in the flowcharts in the embodiments of the present application are shown in order as indicated by the arrows, these steps are not necessarily performed in order as indicated by the arrows. The steps are not strictly limited in order and may be performed in other orders, unless explicitly stated herein. Moreover, at least some of the steps in the figures may include multiple sub-steps or stages that are not necessarily performed at the same time, but may be performed at different times, the order of their execution not necessarily occurring in sequence, but may be performed alternately or alternately with other steps or at least a portion of the other steps or stages.
The words "if", as used herein, may be interpreted as "at … …" or "at … …" or "in response to a determination" or "in response to a detection", depending on the context. Similarly, the phrase "if determined" or "if detected (stated condition or event)" may be interpreted as "when determined" or "in response to determination" or "when detected (stated condition or event)" or "in response to detection (stated condition or event), depending on the context.
It should be noted that, in this document, step numbers such as 101 and 102 are used for the purpose of more clearly and briefly describing the corresponding contents, and not to constitute a substantial limitation on the sequence, and those skilled in the art may execute 101 and then execute 102 when they are implemented, which is within the scope of the present application.
The application provides a page loading method, a page loading device, terminal equipment and a readable storage medium.
The page loading device may be integrated in a server or a terminal, where the server may include a server or a distributed server that operates independently, or may include a server cluster formed by a plurality of servers, and the terminal may include a mobile phone, a tablet computer, or a personal computer (PC, personal Computer).
For example, referring to fig. 1, the present application provides a page loading device integrated in a terminal 10, when a user 20 browses a web page through the terminal 10, firstly, the terminal 10 displays a page currently browsed by the user 20 (i.e. a target page), the terminal 10 determines that a target image corresponding to the target page is an image a, an image b and an image c, then, the terminal 10 adjusts the image sizes of the image a, the image b and the image c to be a preset size respectively, and displays the adjusted image in the target page, and finally, when the target image is loaded, dynamically switches the adjusted image to the target image, for example, after the image a is loaded, dynamically switches the adjusted image a to the image a.
According to the page loading scheme provided by the application, when more images are to be displayed in the target page, the target image can be adjusted to be the image with the preset size, and when the target image is loaded, the adjusted image is dynamically switched to be the target image, so that the situation that a certain image is not loaded well and blank or square box appears in the webpage can be avoided, and therefore, the experience of browsing the webpage by a user can be improved.
The following will describe in detail. It should be noted that the following description order of embodiments is not a limitation of the priority order of embodiments.
A page loading method, comprising: displaying a target page, determining a target image corresponding to the target page, adjusting the image size of the target image to be a preset size, and displaying the adjusted image in the target page; and after the target image is loaded, dynamically switching the adjusted image into the target image.
Referring to fig. 2, fig. 2 is a flowchart illustrating a page loading method according to an embodiment of the application. The specific flow of the page loading method can be as follows:
101. and displaying the target page.
For example, a page access request may be obtained, where the page access request carries a page address, and according to the page address, a target page may be displayed, specifically, the target page may be displayed in a browser, where the browser may be a browser supporting H5, and the browser may be a google browser or a firefox browser, etc., where the page access request may be a hypertext transfer protocol (HyperText Transfer Protocol, HTTP) request, and the page access request may include an IP address of a device used by a user, for example, a server obtains an application access request in a Packet Capture (PCAP) manner, or obtains the page access request by using a deployed splitter, a splitter, or through a bypass traffic copy function of a network device.
Wherein, H5 is also called HTML5, and HTML5 is a language description mode for constructing Web content. HTML5 is the next generation standard for the internet, a language way to build and present internet content. HTML5 is a language description of the way Web content is built. HTML5 is the next generation standard for the internet, a language way to build and present internet content.
102. And determining a target image corresponding to the target page.
In the present application, the image arbitrarily describes the pixel point, intensity, and color by numerals. The amount of description information file storage is large, and the described objects lose detail or generate jaggies in the zooming process. In the aspect of display, after the object is resolved with a certain resolution, the color information of each point is digitally presented, and the object can be directly and quickly displayed on a screen. Resolution and gray scale are the main parameters affecting the display. The image is suitable for representing objects with a great deal of details (such as light and shade change, complex scene and rich outline color), such as: photographs, drawings, etc., and the image software may process complex images to obtain clearer images or generate special effects, and optionally, the target image corresponding to the target page refers to an image associated with the target page, for example, the target page is a web page, and the images that can be displayed on the web page include a person image a, a table image b and a wind Jing Tuxiang c, and then the images associated with the target page are a person image a, a table image b and a wind scene image c, that is, the target images are the person image a, the table image b and the wind scene image c.
Further, an association relationship between the page and the image may be pre-established, for example, the page address and the image are bound to realize establishment of the association relationship between the page and the image, and for example, a target page and image tag information may be established to associate, that is, optionally, in some embodiments, the step of determining the target image corresponding to the image address information includes:
(11) Extracting image tag information from a target page;
(12) And determining the target image corresponding to the image tag information.
For example, in html web pages, an image is inserted into the web page using img tags (i.e., image tag information), which function to create placeholders for referenced images, rather than being inserted into the web page, and linked to the web page.
Further, img tags have two essential attributes: a src attribute and an alt attribute, the src attribute being used to specify an address of an image to be embedded in a web page; the alt attribute is a substitute text used for specifying an image, and when the image is not displayed, the attribute value content is displayed, that is, it can be understood that the image tag information can be parsed to obtain an image address, and a corresponding image can be obtained, that is, optionally, the step of determining a target image corresponding to the image tag information specifically includes:
(21) Identifying an image address in the image tag information;
(22) And acquiring a target image corresponding to the image address.
Wherein the value of the src attribute is a uniform resource locator (Uniform Resource Locator, URL) of the image file, it points to the absolute path or relative path of the image file, the absolute URL points to other sites, the relative URL points to the file in the site, src is an abbreviation of source, point to the location of external resource, the pointed content will be embedded into the document where the current label is located; the resource pointed to by the src resource is downloaded and applied to the document when the src resource is requested, such as js script, img picture and frame elements. A distinction is made between src and href, which can be used in admixture. src is used to replace the current element and href is used to establish a connection between the current document and the referenced resource.
103. And adjusting the image size of the target image to be a preset size, and displaying the adjusted image in the target page.
After the target image is acquired, the image size of the target image may be adjusted to a preset size, optionally, in some embodiments, the image size of the adjusted image is smaller than the image size of the target image, for example, the image size of the target image is 10×10, and the image size of the adjusted image is 5*5; for another example, the image size of the target image is 10×10, and the image size of the adjusted image is 10×5, so that the overhead of image transmission can be reduced, and the loading rate of the image can be further improved, that is, the speed of displaying the target image on the page can be increased.
Of course, the size of the target image may also be measured, for example, the image size of the target image is 5*5, and the adjusted image size is 10×5; for another example, the image size of the target image is 5*5 and the adjusted image size is 5×10.
Optionally, the image shape of the target image can be adjusted, for example, the image shape of the target image is adjusted from rectangular to circular, hexagonal or triangular, so that the self-adaptive adjustment can be performed according to the display content of the webpage, and the experience of browsing the webpage by the user is improved.
104. And after the target image is loaded, dynamically switching the adjusted image into the target image.
For example, when the target image is loaded, the process of dynamically displaying the adjusted image in the target page to switch the adjusted image into the target image is performed, for example, after the target image is loaded, the adjusted image is hidden and the target image is called out, so that effective information (content of the target image) can be displayed to a user as soon as possible, and the problem of resource blockage during multi-resource loading can be avoided, thereby improving the experience of the user for browsing the webpage.
Optionally, in some embodiments, after the target image is loaded, the adjusted image may be subjected to blurring processing, and finally, the processed image is dynamically switched to the target image, optionally, the adjusted image may be subjected to blurring processing by using a gaussian blurring algorithm, where the principle of gaussian blurring is that normal distribution is applied in image processing, so-called "blurring", which is understood that each pixel takes an average value of surrounding pixels, and referring to fig. 3, 1 and 2 in the drawing are pixel values, 2 is a middle point, the surrounding points are all 1, and the middle point takes the average value of the surrounding points, so that the average value becomes 1. Numerically, this is a kind of "smoothing". Graphically, the middle point loses detail, the normal distribution is a bell-shaped curve, the closer to the center, the larger the value is, the farther from the center, the smaller the value is, when the average value is calculated, the center point is taken as the origin, the other points are distributed with weights according to the positions of the points on the normal curve, a weighted average value can be obtained, and then, the blurred image is filled in the corresponding area to display the processed image, namely, the step of "blurring the adjusted image after the target image is loaded" specifically comprises the following steps:
(31) After the target image is loaded, determining a display area in the target page;
(32) And blurring processing is carried out on the adjusted image based on a preset blurring algorithm, and the processed image is filled in the display area.
For example, the display area is a middle area of the target page, after the blurring process is performed on the adjusted image, the processed image is displayed in the middle area of the target page, further, after the processed image is displayed, the processed image is dynamically switched to the target image, specifically, the target image is displayed in the middle area with the middle area of the target page as a reference, that is, the step of "dynamically switching the processed image to the target image" may specifically include:
(41) Determining the display position of the processed image in the target page;
(42) And displaying the target image on the processed image by taking the display position as a reference, and hiding the processed image.
For example, the center position of the target image may be determined, and after the center position is aligned with the center point of the display position, the target image is overlaid on the processed image, that is, the step of "displaying the target image on the processed image with the display position as a reference and hiding the processed image" may specifically include:
(51) Determining the center position of a target image;
(52) And overlaying the target image onto the processed image according to the display position and the center position.
For example, referring to fig. 4, a center position a of the target image a is determined, then a center point H of the display position H is determined, the center position a is aligned with the center point H, then the target image a is overlaid on the processed image B, and then the processed image B is hidden and closed, so as to save the overhead, and the whole page loading process is completed.
According to the page loading method provided by the application, after the target page is displayed, the target image corresponding to the target page is determined, then, the image size of the target image is adjusted to be the preset size, the adjusted image is displayed in the target page, finally, after the target image is loaded, the adjusted image is dynamically switched to the target image, when more images to be displayed in the target page are displayed, the target image can be adjusted to be the image with the preset size, and when the target image is loaded, the adjusted image is dynamically switched to be the target image, so that the situation that a certain image is not loaded well and blank or square box appears in a webpage can be avoided, and therefore, the experience of a user for browsing the webpage can be improved.
In order to further understand the page loading scheme of the present application, a specific description will be given below by taking a terminal browsing page as an example, referring to fig. 5, first, scroll, wheel, mousewheel and resize in the monitor event addeventlist of the browser are added. The method comprises the steps of respectively setting img labels on pages when a horizontal and vertical scrolling rectangle of a browser and a mouse wheel rotate around any axis, double-clicking a middle mouse key and adjusting window sizes, and judging the current visual area of the browser according to a scroll by utilizing a window monitoring event, namely offsetTop < CLIENTHEIGHT +scroll Top.
Alternatively, in some embodiments, performance optimization may be performed using a throttle function. If the function is directly tied to a scroll event, the function is triggered by high frequencies when the page is scrolled, which greatly affects the browser's performance. The throttle function means that only one function is allowed to be executed once in N seconds, img tag src in a page is pointed to a small picture without directly loading a large-size picture, and a small-size picture is loaded into src first, which is equivalent to magnifying the small picture to serve as a placeholder for the picture. In a web page or article, a temporary substitute image is found first and placed at the position of the final image, so that the temporary substitute image is only a temporary and alternative graph.
And finally, loading a callback of the large-size picture by using an img label onload method to replace the small picture with the large picture. Otherwise, when src is empty, a request is sent to the server. When loading the page, the data-src attribute value of the img tag in the visible area is assigned to the src, then the event is monitored, and the picture seen by the user is loaded. Therefore, lazy loading is realized, finally, progressive loading of pictures is realized, small images can not be seen as pixel points by setting a filter: blur (20 px), and the large images are presented on a page after loading.
The loading of the images in the webpage is completed, and the images to be displayed can be loaded according to the need by adding the scrolling event and/or the sliding event of the monitoring page, so that the situation that a certain image is not loaded well and a blank or a box appears in the webpage can be avoided, and the experience of a user for browsing the webpage can be improved.
Referring to fig. 6, fig. 6 is a schematic structural diagram of a page loading device according to an embodiment of the present application, where the page loading device specifically includes: the display module 301, the determining module 302, the adjusting module 303 and the switching module 304 may specifically be as follows:
the display module 301 may be configured to display a target page.
For example, a page access request may be obtained, where the page access request carries a page address, and according to the page address, a target page is displayed, and specifically, the target page may be displayed in a browser, where the browser may be a browser supporting H5, and the browser may be a google browser or a firefox browser, etc.
The determining module 302 may be configured to determine a target image corresponding to the target page.
Optionally, the target image corresponding to the target page refers to an image associated with the target page, for example, the target page is a web page, and the image that may be displayed by the web page includes a person image a, a form image b and a wind Jing Tuxiang c, then the image associated with the target page is the person image a, the form image b and the wind Jing Tuxiang c, further, the target page may be established to be associated with the image tag information, and optionally, in some embodiments, the determining module 302 may specifically include:
the extraction unit is used for extracting image tag information from the target page;
And the first determining unit is used for determining the target image corresponding to the image tag information.
Alternatively, in some embodiments, the determining unit may be specifically configured to: and identifying the image address in the image tag information, and acquiring a target image corresponding to the image address.
The adjusting module 303 may be configured to adjust an image size of the target image to a preset size, and display the adjusted image in the target page.
After the target image is acquired, the adjustment module 303 may adjust the image size of the target image to a preset size, optionally in some embodiments, the adjusted image size is less than the image size of the target image.
The switching module 304 may be configured to dynamically switch the adjusted image to the target image after the target image is loaded.
For example, when the target image is loaded, the switching module 304 may dynamically display a process of switching the adjusted image to the target image in the target page, e.g., after the target image is loaded, the switching module 304 hides the adjusted image and calls out the target image.
Optionally, in some embodiments, the switching module 304 may specifically include:
the second determining unit is used for determining a display area in the target page after the target image is loaded;
And the processing unit is used for carrying out blurring processing on the adjusted image based on a preset blurring algorithm and filling the processed image into the display area.
Optionally, in some embodiments, the processing unit may specifically include:
A determining subunit, configured to determine a display position of the processed image in the target page;
And the display subunit is used for displaying the target image on the processed image by taking the display position as a reference and hiding the processed image.
Optionally, in some embodiments, the display subunit may be specifically configured to: and determining the center position of the target image, and overlaying the target image on the processed image according to the display position and the center position.
According to the page loading device provided by the application, after the display module 301 displays the target page, the determining module 302 determines the target image corresponding to the target page, then the adjusting module 303 adjusts the image size of the target image to be the preset size, and displays the adjusted image in the target page, finally, the switching module 304 dynamically switches the adjusted image to the target image after the target image is loaded, when more images to be displayed in the target page are needed, the target image can be adjusted to be the image with the preset size, and when the target image is loaded, the adjusted image is dynamically switched to be the target image, so that the situation that a certain image is not loaded well and blank or square frame appears in the webpage can be avoided, and therefore, the experience of browsing the webpage by a user can be improved.
The application also provides an electronic device, which comprises a memory and a processor, wherein the memory stores an interface processing program, and the interface processing program is executed by the processor to realize the steps of the interface processing method in any embodiment.
The application also provides a readable storage medium, the readable storage medium stores an interface processing program, and the interface processing program realizes the steps of the interface processing method in any embodiment when being executed by a processor.
In the embodiments of the electronic device and the readable storage medium provided by the present application, all technical features of any one of the embodiments of the interface processing method may be included, and the expansion and explanation contents of the description are substantially the same as those of each embodiment of the method, which are not repeated herein.
Embodiments of the present application also provide a computer program product comprising computer program code which, when run on a computer, causes the computer to perform the method as in the various possible embodiments described above.
The embodiment of the application also provides a chip, which comprises a memory and a processor, wherein the memory is used for storing a computer program, and the processor is used for calling and running the computer program from the memory, so that the device provided with the chip executes the method in the various possible implementation manners.
It can be understood that the above scenario is merely an example, and does not constitute a limitation on the application scenario of the technical solution provided by the embodiment of the present application, and the technical solution of the present application may also be applied to other scenarios. For example, as one of ordinary skill in the art can know, with the evolution of the system architecture and the appearance of new service scenarios, the technical solution provided by the embodiment of the present application is also applicable to similar technical problems.
The foregoing embodiment numbers of the present application are merely for the purpose of description, and do not represent the advantages or disadvantages of the embodiments.
The steps in the method of the embodiment of the application can be sequentially adjusted, combined and deleted according to actual needs.
The units in the device of the embodiment of the application can be combined, divided and deleted according to actual needs.
In the present application, the same or similar term concept, technical solution and/or application scenario description will be generally described in detail only when first appearing and then repeatedly appearing, and for brevity, the description will not be repeated generally, and in understanding the present application technical solution and the like, reference may be made to the previous related detailed description thereof for the same or similar term concept, technical solution and/or application scenario description and the like which are not described in detail later.
In the present application, the descriptions of the embodiments are emphasized, and the details or descriptions of the other embodiments may be referred to.
The technical features of the technical scheme of the application can be arbitrarily combined, and all possible combinations of the technical features in the above embodiment are not described for the sake of brevity, however, as long as there is no contradiction between the combinations of the technical features, the application shall be considered as the scope of the description of the application.
From the above description of the embodiments, it will be clear to those skilled in the art that the above-described embodiment method may be implemented by means of software plus a necessary general hardware platform, but of course may also be implemented by means of hardware, but in many cases the former is a preferred embodiment. Based on such understanding, the technical solution of the present application may be embodied essentially or in a part contributing to the prior art in the form of a software product stored in a storage medium (e.g. ROM/RAM, magnetic disk, optical disk) as above, comprising instructions for causing a terminal device (which may be a mobile phone, a computer, a server, a controlled terminal, or a network device, etc.) to perform the method of each embodiment of the present application.
In the above embodiments, it may be implemented in whole or in part by software, hardware, firmware, or any combination thereof. When implemented in software, may be implemented in whole or in part in the form of a computer program product. The computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, the processes or functions in accordance with embodiments of the present application are produced in whole or in part. The computer may be a general purpose computer, a special purpose computer, a network of computers, or other programmable devices. The computer instructions may be stored in a computer-readable storage medium or transmitted from one computer-readable storage medium to another computer-readable storage medium, for example, the computer instructions may be transmitted from one website, computer, server, or data center to another website, computer, server, or data center by a wired (e.g., coaxial cable, fiber optic, digital subscriber line), or wireless (e.g., infrared, wireless, microwave, etc.). Computer readable storage media can be any available media that can be accessed by a computer or data storage devices, such as servers, data centers, etc., that contain an integration of one or more available media. Usable media may be magnetic media (e.g., floppy disks, storage disks, magnetic tape), optical media (e.g., DVD), or semiconductor media (e.g., solid state storage disk Solid STATE DISK (SSD)), etc.
The foregoing description is only of the preferred embodiments of the present application, and is not intended to limit the scope of the application, but rather is intended to cover any equivalents of the structures or equivalent processes disclosed herein or in the alternative, which may be employed directly or indirectly in other related arts.
Claims (9)
1. A method for loading a page, comprising:
displaying a target page;
Judging the current visible area of the target page by utilizing scroll, wheel, mousewheel and resize in a monitoring event addEventListener, wherein the monitoring event addEventListener adopts a throttling function to perform performance optimization;
Determining a target image corresponding to the target page according to the visible area;
Directing src of the img tag corresponding to the target image to an adjusted image, wherein the adjusted image comprises the target image with a preset size or a temporarily replaced image, and displaying the adjusted image in the target page;
assigning a data-src attribute value of the img tag to the src to load the target image;
And progressively loading the target image by setting a filter-blur (20 px), and dynamically switching the processed image into the target image after the target image is loaded.
2. The method of claim 1, wherein the dynamically switching the processed image to the target image comprises:
determining the display position of the processed image in the target page;
and displaying the target image on the processed image by taking the display position as a reference, and hiding the processed image.
3. The method according to claim 2, wherein displaying the target image on the processed image based on the display position includes:
Determining a center position of the target image;
And overlaying the target image onto the processed image according to the display position and the center position.
4. The method of claim 1, wherein blurring the adjusted image after the target image is loaded, comprises:
after the target image is loaded, determining a display area in the target page;
And blurring processing is carried out on the adjusted image based on a preset blurring algorithm, and the processed image is filled in the display area.
5. The method according to any one of claims 1 to 4, wherein the determining, according to the visible area, a target image corresponding to the target page includes:
extracting image tag information from the target page according to the visual area;
And determining the target image corresponding to the image tag information.
6. The method of claim 5, wherein determining the target image to which the image tag information corresponds comprises:
identifying an image address in the image tag information;
And acquiring a target image corresponding to the image address.
7. A page loading apparatus, comprising:
The display module is used for displaying a target page, and judging the current visual area of the target page by utilizing scroll, wheel, mousewheel and resize in a monitoring event addEventListener, wherein the monitoring event addEventListener adopts a throttling function to perform performance optimization;
The determining module is used for determining a target image corresponding to the target page according to the visible area;
the adjusting module is used for pointing the src of the img label corresponding to the target image to an adjusted image, wherein the adjusted image comprises the target image with a preset size or a temporarily replaced image, and the adjusted image is displayed in the target page;
The switching module is used for endowing the data-src attribute value of the img tag to the src so as to load the target image; and progressively loading the target image by setting a filter-blur (20 px), and dynamically switching the processed image into the target image after the target image is loaded.
8. The apparatus of claim 7, wherein the switching module comprises:
the processing unit is used for carrying out fuzzy processing on the adjusted image;
And the switching unit is used for dynamically switching the processed image into the target image.
9. A readable storage medium, characterized in that it stores a computer program which, when executed by a processor, implements the page loading method of any one of claims 1 to 6.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210090130.3A CN114416209B (en) | 2022-01-25 | 2022-01-25 | Page loading method, device and readable storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210090130.3A CN114416209B (en) | 2022-01-25 | 2022-01-25 | Page loading method, device and readable storage medium |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN114416209A CN114416209A (en) | 2022-04-29 |
| CN114416209B true CN114416209B (en) | 2024-06-07 |
Family
ID=81278019
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202210090130.3A Active CN114416209B (en) | 2022-01-25 | 2022-01-25 | Page loading method, device and readable storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114416209B (en) |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109241470A (en) * | 2018-09-27 | 2019-01-18 | 北京小米移动软件有限公司 | Page display method, apparatus and system |
| CN113784194A (en) * | 2020-09-03 | 2021-12-10 | 北京沃东天骏信息技术有限公司 | Embedding method and device of video player |
Family Cites Families (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109086374A (en) * | 2018-07-23 | 2018-12-25 | 北京达佳互联信息技术有限公司 | Webpage loading display method, device, terminal device and readable storage medium storing program for executing |
| CN111859210B (en) * | 2019-04-29 | 2024-04-26 | 百度在线网络技术（北京）有限公司 | Image processing method, device, equipment and storage medium |
| CN112926009A (en) * | 2021-03-29 | 2021-06-08 | 建信金融科技有限责任公司 | Picture resource processing method and device, electronic equipment and medium |
-
2022
- 2022-01-25 CN CN202210090130.3A patent/CN114416209B/en active Active
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109241470A (en) * | 2018-09-27 | 2019-01-18 | 北京小米移动软件有限公司 | Page display method, apparatus and system |
| CN113784194A (en) * | 2020-09-03 | 2021-12-10 | 北京沃东天骏信息技术有限公司 | Embedding method and device of video player |
Also Published As
| Publication number | Publication date |
|---|---|
| CN114416209A (en) | 2022-04-29 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN107885848B (en) | Webpage screen capturing method based on web technology | |
| EP1914640B1 (en) | Multiple screen size render-engine | |
| US6281874B1 (en) | Method and system for downloading graphic images on the internet | |
| CN103412928B (en) | Method and device for realizing browser page intelligent response-type layout on mobile terminal | |
| US9450803B2 (en) | Efficient delivery of content by virtualization of dynamic interaction with the document object model | |
| CN102779167B (en) | The method and system of display web page in the terminal | |
| CN104360882B (en) | Display methods and device are carried out to picture in webpage in a kind of browser | |
| CN104978358B (en) | The method and intercepting page segment of desktop presentation web page fragments are to desktop presentation system | |
| CN108920048B (en) | Large drawing browsing method, system, server and computer readable storage medium | |
| CN107040584B (en) | Method and device for downloading picture by client | |
| CN103853417A (en) | Rolling and pagination display method and device for network dynamic picture | |
| CN107256259B (en) | Page display method and device, electronic equipment and storage medium | |
| US9679075B1 (en) | Efficient delivery of animated image files | |
| US9262389B2 (en) | Resource-adaptive content delivery on client devices | |
| CN102932469B (en) | Method for achieving client browser and client browser | |
| CN112148398B (en) | Image processing method and device | |
| CN113127784A (en) | Large-screen data visual display method and device, storage medium and computer equipment | |
| US20230334113A1 (en) | Image processing method and apparatus, and computer readable storage medium | |
| CN105824874A (en) | Mobile terminal as well as web page rendering method and device thereof | |
| JP2006331142A (en) | Information provision system, and information provision method or the like | |
| CN105808307B (en) | Page display method and device | |
| US20160154774A1 (en) | Efficient delivery of content by virtualization of static interaction with the document object model | |
| US20130031467A1 (en) | So-called hd-web method for high-definition and all-screen compatibile internet contents | |
| CN111581553B (en) | Network image display method, system, electronic equipment and storage medium | |
| CN114416209B (en) | Page loading method, device and readable storage medium |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant |