Webpage picture loading method and device

Abstract

The embodiment of the invention discloses a webpage picture loading method and device. The specific implementation mode of the method comprises the steps that a client side responds to a received request for loading a webpage picture, loads a Sprite map from a content distribution network and obtains an index file, and the Sprite map comprises a thumbnail of the webpage picture; querying the coordinate position of the thumbnail in the Sprite map in the index file according to the address of the webpage picture; and obtaining the thumbnail from the Sprite map according to the inquired coordinate position, and rendering the thumbnail. The server is used for generating a thumbnail based on the original picture in the picture resource library; based on the thumbnail, constructing a Sprite map, and generating an index file, the index file comprising an address of the Sprite map and a coordinate position of the thumbnail in the Sprite map; and publishing the Sprite map, the original map and the index file to a content distribution network. According to the embodiment, the abnormal problems of lagging and even unavailability caused by simultaneous display of massive pictures on a webpage are solved based on a Sprite map technology.

Description

Technical Field

[0001] The embodiments disclosed herein relate to the field of computer technology, specifically to a method and apparatus for loading web page images. Background Technology

[0002] Currently, many websites incorporate various images to convey information more intuitively to users. However, image files are notoriously large. Downloading numerous images consumes significant data, especially under data-based billing systems, potentially leading to higher costs. This is particularly true when using smartphones or other mobile devices to access websites via mobile networks, where users are more sensitive to data usage. Furthermore, displaying a large number of images simultaneously can consume excessive client-side memory resources, causing page lag. While existing optimization techniques for improving webpage image loading can enhance loading speeds on websites with fewer images, they still exhibit various unresolved shortcomings when dealing with massive amounts of images. Summary of the Invention

[0003] The embodiments of this disclosure provide a method and apparatus for loading web page images.

[0004] In a first aspect, embodiments of this disclosure provide a webpage image loading method, applied to a client, comprising: in response to receiving a request to load a webpage image, loading a sprite sheet from a content delivery network and obtaining an index file, wherein the sprite sheet includes a thumbnail of the webpage image; querying the coordinate position of the thumbnail in the sprite sheet according to the address of the webpage image in the index file; obtaining the thumbnail from the sprite sheet according to the queried coordinate position, and rendering the thumbnail.

[0005] In some embodiments, the method further includes: setting the display attribute of a webpage image to not display during initialization to hide the image element.

[0006] In some embodiments, rendering the thumbnail includes rendering the thumbnail based on a background image rendering method using Cascading Style Sheets (CSS).

[0007] In some embodiments, the method further includes: in response to receiving a request to preview the original image corresponding to the webpage image, obtaining the address of the original image according to a preset address mapping relationship between thumbnails and original images; and loading the original image according to the address of the original image.

[0008] Secondly, embodiments of this disclosure provide a webpage image loading method applied to a server, comprising: generating a thumbnail based on an original image in an image resource library; constructing a sprite sheet based on the thumbnail and generating an index file, wherein the index file includes the address of the sprite sheet and the coordinate position of the thumbnail in the sprite sheet; and publishing the sprite sheet, the original image, and the index file to a content delivery network.

[0009] In some embodiments, constructing a sprite sheet based on the thumbnails and generating an index file includes: drawing a background canvas; drawing a predetermined number of thumbnails onto the background canvas according to a preset composition layout to generate a sprite sheet, and recording the coordinate positions of the thumbnails in the sprite sheet; and generating an index file based on the address of the sprite sheet and the coordinate positions.

[0010] Thirdly, embodiments of this disclosure provide a webpage image loading apparatus applied to a client, comprising: an acquisition unit configured to, in response to receiving a request to load a webpage image, load a sprite sheet from a content delivery network and acquire an index file, wherein the sprite sheet includes a thumbnail of the webpage image; a query unit configured to query the coordinate position of the thumbnail in the sprite sheet according to the address of the webpage image in the index file; and a rendering unit configured to acquire the thumbnail from the sprite sheet according to the queried coordinate position and render the thumbnail.

[0011] In some embodiments, the apparatus further includes an initialization unit configured to: during initialization, set the display attribute of a webpage image to not display to hide the image element.

[0012] In some embodiments, the rendering unit is further configured to render the thumbnail based on a background image rendering method using Cascading Style Sheets (CSS).

[0013] In some embodiments, the device further includes a restoration unit configured to: in response to receiving a request to preview the original image corresponding to the webpage image, obtain the address of the original image according to a preset address mapping relationship between thumbnails and original images; and load the original image according to the address of the original image.

[0014] Fourthly, embodiments of this disclosure provide a webpage image loading apparatus applied to a server, comprising: a compression unit configured to generate thumbnails based on original images in an image resource library; a composition unit configured to construct a sprite sheet based on the thumbnails and generate an index file, wherein the index file includes the address of the sprite sheet and the coordinate position of the thumbnail in the sprite sheet; and a publishing unit configured to publish the sprite sheet, the original image, and the index file to a content delivery network.

[0015] In some embodiments, the composition unit is further configured to: draw a background canvas; draw a predetermined number of thumbnails onto the background canvas according to a preset composition layout to generate a sprite sheet, and record the coordinate positions of the thumbnails in the sprite sheet; and generate an index file based on the address of the sprite sheet and the coordinate positions.

[0016] Fifthly, embodiments of this disclosure provide an electronic device, including: one or more processors; and a storage device having one or more computer programs stored thereon, which, when executed by the one or more processors, cause the one or more processors to perform the method as described in any one of the first or second aspects.

[0017] In a sixth aspect, embodiments of this disclosure provide a computer-readable medium having a computer program stored thereon, wherein the computer program, when executed by a processor, implements the method as described in any one of the first or second aspects.

[0018] In a seventh aspect, embodiments of this disclosure provide a computer program product including a computer program that, when executed by a processor, implements the method as described in any one of the first or second aspects.

[0019] The webpage image loading method and apparatus provided in this disclosure generate thumbnails based on original images, construct sprite sheets and image indexes based on the thumbnails, and finally publish the sprite sheets, image indexes, and all original images to a CDN (Content Delivery Network). The client loads the sprite sheets from the CDN to obtain the thumbnails to be displayed. This solves the problem of displaying a large number of images in the visible area, not only improving performance to some extent by shortening the image loading path, but also resolving the unavailability issue caused by the large number of network requests due to loading massive amounts of images through sprite sheets.

[0020] It should be understood that the description in this section is not intended to identify key or essential features of the embodiments of this disclosure, nor is it intended to limit the scope of this disclosure. Other features of this disclosure will become readily apparent from the following description. Attached Figure Description

[0021] Other features, objects, and advantages of this disclosure will become more apparent from the following detailed description of non-limiting embodiments with reference to the accompanying drawings:

[0022] Figure 1 This is an exemplary system architecture diagram to which one embodiment of this disclosure can be applied;

[0023] Figure 2This is a flowchart of an embodiment of the webpage image loading method according to the present disclosure applied to a client;

[0024] Figure 3 This is a flowchart of an embodiment of the webpage image loading method according to the present disclosure applied to a server;

[0025] Figure 4a , 4b This is a schematic diagram illustrating an application scenario of the webpage image loading method disclosed herein;

[0026] Figure 5 This is a schematic diagram of a structure of an embodiment of the webpage image loading device according to the present disclosure applied to a client.

[0027] Figure 6 This is a schematic diagram of a structure of an embodiment of the webpage image loading device according to the present disclosure applied to a server;

[0028] Figure 7 This is a schematic diagram of the structure of a computer system suitable for implementing embodiments of the present disclosure. Detailed Implementation

[0029] The present disclosure will now be described in further detail with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative of the invention and not intended to limit it. Furthermore, it should be noted that, for ease of description, only the parts relevant to the invention are shown in the accompanying drawings.

[0030] It should be noted that, unless otherwise specified, the embodiments and features described in this disclosure can be combined with each other. This disclosure will now be described in detail with reference to the accompanying drawings and embodiments.

[0031] Figure 1 An exemplary system architecture 100 is shown, to which embodiments of the web page image loading method or web page image loading apparatus of this disclosure may be applied.

[0032] like Figure 1 As shown, system architecture 100 may include client 101, CDN nodes 102 and 104, DNS (Domain Name System) server 103, and server 105. The network serves as the medium for providing communication links between client 101, CDN nodes 102 and 104, DNS server 103, and server 105. The network may include various connection types, such as wired or wireless communication links, or fiber optic cables, etc.

[0033] Users can use client 101 to interact with server 105 through CDN nodes 102 and 104 to receive or send messages, etc. Client 101 can have various communication client applications installed, such as web browser applications, shopping applications, search applications, instant messaging tools, email clients, social media platform software, etc.

[0034] Client 101 can be either hardware or software. When client 101 is hardware, it can be various electronic devices with a display screen and web browsing support, including but not limited to smartphones, tablets, e-book readers, MP3 players (Moving Picture Experts Group Audio Layer III), MP4 players (Moving Picture Experts Group Audio Layer IV), laptops, and desktop computers, etc. When client 101 is software, it can be installed on the aforementioned electronic devices. It can be implemented as multiple software programs or software modules (e.g., to provide distributed services) or as a single software program or software module. No specific limitations are imposed here.

[0035] When a user browses a website through client 101, the browser on client 101 can save copies of images or other files from the website locally. This way, when the user visits the website again, the browser doesn't need to download all the files again, reducing download volume and thus improving page loading speed. Client 101's browser first checks if any local cache has expired. If it has, it sends a request to the CDN edge node. The CDN edge node checks if the cache of the requested data has expired. If it hasn't expired, it directly responds to the user's request, and a complete HTTP request ends. If the data has expired, the CDN edge node also needs to send a back-to-the-origin request to the origin server to fetch the latest data.

[0036] DNS server 103 is configured with a CNAME (canonical name) pointing to the URL requested by the client's browser. This request directs to the intelligent DNS load balancing system within the CDN network. The intelligent DNS load balancing system resolves the domain name and returns the IP node (CDN node) with the fastest response time to the user's client 101. Client 101 sends a request to this IP node. Since this is the first access, the CDN node requests the content from the original web site (origin server) and caches the content.

[0037] Server 105 can be a server that provides various services, such as a backend web server that supports the web pages displayed on client 101. The backend web server can analyze and process data such as received web page requests, and feed back the processing results (such as web page data) to the client.

[0038] It should be noted that the webpage image loading method provided in the embodiments of this disclosure is generally executed by the client and the server, and correspondingly, the webpage image loading device is generally set in the client and the server.

[0039] It should be understood that Figure 1 The number of clients, networks, and servers shown is merely illustrative. Depending on implementation needs, there can be any number of clients, CDN nodes, and servers.

[0040] Continue to refer to Figure 2 The diagram illustrates a flow 200 of an embodiment of the webpage image loading method according to this disclosure applied to a client. The webpage image loading method includes the following steps:

[0041] Step 201: In response to receiving a request to load images from a webpage, load sprites from the content delivery network and obtain index files.

[0042] In this embodiment, some key content (such as webpage images) is preloaded before the entire webpage is loaded to provide a better user experience and reduce waiting time. Otherwise, if a page contains too much content, a page without preloading technology will remain blank for an extended period until all content is loaded. During the preloading process, the client sends a request to the CDN to load webpage images, which can be loaded from the CDN via wired or wireless connections, along with the index files.

[0043] Sprite sheets contain thumbnails of images on a webpage. Also called sprite images, they are an image merging technique that combines small icons and background images into a single image, then uses CSS (Cascading Style Sheets) background positioning to display the relevant portion of the image. The server compresses the images needed for the website into thumbnails to create the sprite sheet. A sprite sheet contains numerous thumbnails, including those of the images the webpage needs to load.

[0044] The index file can be obtained from a server or CDN. The index file is generated by the server during the sprite sheet creation process. The index file includes the address of the sprite sheet and the coordinates of the thumbnail within it. If the coordinates are only represented by the coordinates of one corner of the image, the index file also needs to include the image's width and height to determine the positions of the four corners.

[0045] Index files can be statically stored in the CDN as JSON resources, or dynamically stored on the server via an API.

[0046] In some optional implementations of this embodiment, the display attribute of webpage images is set to "not displayed" during initialization to hide image elements. During initialization, a hidden image element (with the style set to `display:none`) is used to load a sprite image from the CDN. This method completely hides the element and does not display it on the page, nor does it occupy any space. This means that if `display:none` is used to hide an image element, the image will not only be visually invisible, but it will also not affect the page layout. This differs from the `visibility:hidden` property, which, while making the element invisible, still occupies its original space and affects the page layout.

[0047] Step 202: Query the coordinates of the thumbnail in the sprite sheet in the index file based on the URL of the webpage image.

[0048] In this embodiment, based on the massive number of image addresses (generally in the format of images / A.jpg) that need to be displayed on the current page, the image addresses are extracted sequentially, and the images are retrieved from the index file to obtain the coordinates of the thumbnails (including the address of the sprite sheet, the coordinates of the thumbnail, and its width and height).

[0049] Step 203: Obtain the thumbnail from the sprite sheet based on the queried coordinates and render the thumbnail.

[0050] In this embodiment, the thumbnail to be loaded on the current webpage is read from the sprite sheet based on the coordinate position of the thumbnail, while other thumbnails are ignored.

[0051] In some optional implementations of this embodiment, a CSS-based background image rendering method is used to render the specified thumbnail in the sprite sheet. The CSS `background` and `background-position` properties are used for rendering.

[0052] The method provided in the above embodiments of this disclosure generates thumbnails based on original images, constructs sprite sheets and image indexes based on the thumbnails, and finally publishes the sprite sheets, image indexes, and all original images to a CDN (Content Delivery Network). The client loads the sprite sheets from the CDN to obtain the thumbnails to be displayed. This method solves the problem of displaying a large number of images in the visible area. It not only shortens the image loading path through the CDN, improving performance to some extent, but also addresses the unavailability issue caused by the large number of network requests due to loading massive amounts of images through sprite sheets.

[0053] In some optional implementations of this embodiment, the method further includes: in response to receiving a request to preview the original image corresponding to the webpage image, obtaining the address of the original image according to a preset address mapping relationship between thumbnails and original images; and loading the original image according to the address of the original image. Typically, the address mapping relationship is as follows: the relative path and name of the thumbnail are consistent with the original image, but the image directory cannot be the same. Therefore, when a user clicks on a thumbnail to preview the original image, the CDN address of the original image is generated by adding the filename to the thumbnail's path and then concatenating it with the CDN address. This address is then used to request the original image. This can reduce the latency of loading the original image and improve the user experience.

[0054] Continue to refer to Figure 3 The diagram illustrates a flow 300 of an embodiment of the webpage image loading method according to the present disclosure applied to a server. The webpage image loading method includes the following steps:

[0055] Step 301: Generate thumbnails based on the original images in the image resource library.

[0056] In this embodiment, in a project with a front-end and back-end separation, image resources are stored in a single directory, such as the image directory, and thumbnail generation can be performed in two steps.

[0057] The first step is to search for all original images based on the directory and read the image paths and names.

[0058] The second step involves using tools or plugins to compress the images and generate thumbnails, such as the webpack plugin image-webpack-loader. This plugin can quickly generate thumbnails from all images in the image library, while maintaining the relative paths and names of the thumbnails consistent with the original images, but the image directory must be different.

[0059] Step 302: Construct a sprite sheet based on the thumbnails and generate an index file.

[0060] In this embodiment, the index file includes the address of the sprite sheet and the coordinates of the thumbnail within the sprite sheet. There are many ways to generate sprite sheets, such as those based on CSS stylesheets.

[0061] In some optional implementations of this embodiment, constructing a sprite sheet based on the thumbnails and generating an index file includes: drawing a background canvas; drawing a predetermined number of thumbnails onto the background canvas according to a preset composition layout to generate a sprite sheet, and recording the coordinate positions of the thumbnails in the sprite sheet; and generating an index file based on the address of the sprite sheet and the coordinate positions.

[0062] Create a background canvas, and sequentially read all the thumbnails. Use canvas technology to draw each thumbnail onto the background canvas. Once finished, a sprite sheet image will be generated. Two rules need to be clarified here:

[0063] First: There needs to be a limit to the number of sub-images in each sprite sheet. For example, a sprite sheet cannot have more than 100 sub-images. If there are more than 100, a new background canvas needs to be drawn, and the other sub-images are drawn onto the new background image in sequence until all the thumbnails are drawn onto the sprite sheet.

[0064] Second: The layout of subplots on the sprite sheet needs to be clearly defined. There are five common layout methods, and the calculation method for the starting position of subplots during the drawing process differs for each layout method, such as... Figure 4b As shown.

[0065] Third: The rules for calculating the position of the subgraph are as follows:

[0066] Based on the background canvas configuration information, obtain the number of rows occupied by existing sub-images on the background canvas: sum the total width of the row corresponding to the maximum number of occupied rows with the width of the sub-image whose position is to be determined (if a sub-image spacing distance is set, the spacing number also needs to be added, such as 10 pixels, etc.), and determine the coordinates of the top-left vertex of the sub-image whose position is to be determined by comparing the calculation result with the width of the background canvas. The specific method is as follows: take the top-left vertex of the background canvas as the origin, the x-axis is positive horizontally to the right through the origin, and the y-axis is positive vertically downward through the origin (here, a left-right layout is used as an example to calculate the sub-image position).

[0067] When the calculation result is greater than the width of the background canvas, the sub-image whose position is to be determined is placed in the row below the row corresponding to the row with the maximum number of rows occupied. The x-coordinate value of the top left vertex of the sub-image whose position is to be determined is 0, and the y-coordinate value is the sum of the y-coordinate value of the row corresponding to the row with the maximum number of rows occupied and the maximum height of all sub-images in that row.

[0068] When the calculation result is less than or equal to the width of the background canvas, the sub-image to be determined is placed in the row corresponding to the maximum number of rows occupied. The x-coordinate value of the top left vertex of the sub-image to be determined is the total width of all sub-images in the row corresponding to the maximum number of rows occupied (if there are intervals, the intervals need to be added), and the y-coordinate value is the same as that of the row corresponding to the maximum number of rows occupied (if there are intervals, the intervals need to be added).

[0069] Generate an index file (or image coordinate map). Having obtained the coordinates of each thumbnail in the steps above, and combining this with the image path and name, as well as the sprite sheet information, you can generate an index similar to the one shown below, ultimately producing a JSON-formatted index file.

[0070] Where container represents the path of the sprite sheet containing the thumbnail, x and y are the coordinates of the thumbnail on the sprite sheet, and width and height are the size of the thumbnail.

[0071] {

[0072] 'images / A.jpg':{

[0073] "container":"images2 / spire1.jpg", / / Sprite image containing the image

[0074] "x":0, / / X coordinate value

[0075] "y":0, / / y coordinate value

[0076] "width":32,

[0077] "height":32

[0078] },

[0079] 'images / B.jpg':{

[0080] "container":"images2 / spire2.jpg", / / Sprite image containing the image

[0081] "x":10, / / X coordinate value

[0082] "y":10, / / y coordinate value

[0083] "width":32,

[0084] "height":32

[0085] },

[0086] }

[0087] Step 303: Publish the sprite sheet, original image, and index file to the content delivery network.

[0088] In this embodiment, the sprite sheet image and all original images are published to the CDN. This step mainly involves uploading and publishing the sprite sheet image and original images to the CDN, making it easier for clients to quickly access the sprite sheet image. The image index file can also be published to the CDN or stored on a server.

[0089] See also Figure 4a , Figure 4a This is a schematic diagram illustrating an application scenario of the webpage image loading method according to this embodiment. Figure 4a In this application scenario, the server generates thumbnails from image resources, then generates sprite sheets and index files. The server distributes the sprite sheets, index files, and original images to the CDN. The client loads the sprite sheets and index files from the CDN. Thumbnails are then loaded and displayed sequentially from the sprite sheets. Specific thumbnails are segmented from the sprite sheets based on the coordinates of the thumbnails in the index files. If the user clicks to display the original image, the CDN requests the original image (CDN address + image name). The CDN finds the original image based on the request and returns it to the client, where it is displayed as a larger image.

[0090] Further reference Figure 5 As an implementation of the methods shown in the above figures, this disclosure provides an embodiment of a webpage image loading device applied to a client. This device embodiment is similar to... Figure 2 Corresponding to the method embodiments shown, this device can be specifically applied to various electronic devices.

[0091] like Figure 5 As shown, the webpage image loading device 500 of this embodiment includes: an acquisition unit 501, a query unit 502, and a rendering unit 503. The acquisition unit 501 is configured to, in response to receiving a request to load a webpage image, load a sprite sheet from a content delivery network and acquire an index file, wherein the sprite sheet includes thumbnails of the webpage image; the query unit 502 is configured to query the coordinate position of the thumbnail in the sprite sheet from the index file based on the address of the webpage image; and the rendering unit 503 is configured to acquire the thumbnail from the sprite sheet based on the queried coordinate position and render the thumbnail.

[0092] In this embodiment, the specific processing of the acquisition unit 501, query unit 502, and rendering unit 503 of the webpage image loading device 500 can be referred to Figure 2 Steps 201, 202, and 203 in the corresponding embodiment.

[0093] In some optional implementations of this embodiment, the device further includes an initialization unit (not shown in the figures), configured to: during initialization, set the display attribute of the web page image to not display to hide the image element.

[0094] In some optional implementations of this embodiment, the rendering unit 503 is further configured to render the thumbnail based on a background image rendering method using a Cascading Style Sheets (CSS).

[0095] In some optional implementations of this embodiment, the device further includes a restoration unit (not shown in the accompanying drawings), configured to: in response to receiving a request to preview the original image corresponding to the webpage image, obtain the address of the original image according to a preset address mapping relationship between thumbnails and the original image; and load the original image according to the address of the original image.

[0096] Further reference Figure 6 As an implementation of the methods shown in the above figures, this disclosure provides an embodiment of a webpage image loading device applied to a server. This device embodiment is similar to... Figure 3 Corresponding to the method embodiments shown, this device can be specifically applied to various electronic devices.

[0097] like Figure 6 As shown, the webpage image loading device 600 of this embodiment includes: a compression unit 601, a composition unit 602, and a publishing unit 603. The compression unit 601 is configured to generate thumbnails based on original images in an image resource library; the composition unit 602 is configured to construct a sprite sheet based on the thumbnails and generate an index file, wherein the index file includes the address of the sprite sheet and the coordinate position of the thumbnail within the sprite sheet; the publishing unit 603 is configured to publish the sprite sheet, the original image, and the index file to a content delivery network.

[0098] In this embodiment, the specific processing of the compression unit 601, the composition unit 602, and the publishing unit 603 of the webpage image loading device 600 can be referred to Figure 3 The corresponding steps are 301, 302, and 303 in the embodiment.

[0099] In some optional implementations of this embodiment, the composition unit 602 is further configured to: draw a background canvas; draw a predetermined number of thumbnails onto the background canvas according to a preset composition layout to generate a sprite sheet, and record the coordinate positions of the thumbnails in the sprite sheet; and generate an index file based on the address of the sprite sheet and the coordinate positions.

[0100] It should be noted that the collection, gathering, updating, analysis, processing, use, transmission, and storage of user personal information involved in this disclosed technical solution all comply with relevant laws and regulations, are used for legitimate purposes, and do not violate public order and good morals. Necessary measures are taken to prevent unauthorized access to user personal information data and to safeguard user personal information security, network security, and national security.

[0101] According to embodiments of this disclosure, this disclosure also provides an electronic device and a readable storage medium.

[0102] An electronic device includes: one or more processors; and a storage device having one or more computer programs stored thereon, wherein when the one or more computer programs are executed by the one or more processors, the one or more processors implement the method described in process 200 or 300.

[0103] A computer-readable medium having a computer program stored thereon, wherein the computer program, when executed by a processor, implements the method described in process 200 or 300.

[0104] Figure 7 A schematic block diagram of an example electronic device 700 that can be used to implement embodiments of the present disclosure is shown. The electronic device is intended to represent various forms of digital computers, such as laptop computers, desktop computers, workstations, personal digital assistants, servers, blade servers, mainframe computers, and other suitable computers. The electronic device may also represent various forms of mobile devices, such as personal digital processors, cellular phones, smartphones, wearable devices, and other similar computing devices. The components shown herein, their connections and relationships, and their functions are merely illustrative and are not intended to limit the implementation of the present disclosure described and / or claimed herein.

[0105] like Figure 7 As shown, device 700 includes a computing unit 701, which can perform various appropriate actions and processes based on a computer program stored in read-only memory (ROM) 702 or a computer program loaded from storage unit 708 into random access memory (RAM) 703. RAM 703 may also store various programs and data required for the operation of device 700. The computing unit 701, ROM 702, and RAM 703 are interconnected via bus 704. Input / output (I / O) interface 705 is also connected to bus 704.

[0106] Multiple components in device 700 are connected to I / O interface 705, including: input unit 706, such as keyboard, mouse, etc.; output unit 707, such as various types of monitors, speakers, etc.; storage unit 708, such as disk, optical disk, etc.; and communication unit 709, such as network card, modem, wireless transceiver, etc. Communication unit 709 allows device 700 to exchange information / data with other devices through computer networks such as the Internet and / or various telecommunications networks.

[0107] The computing unit 701 can be a variety of general-purpose and / or special-purpose processing components with processing and computing capabilities. Some examples of the computing unit 701 include, but are not limited to, a central processing unit (CPU), a graphics processing unit (GPU), various special-purpose artificial intelligence (AI) computing chips, various computing units running machine learning model algorithms, a digital signal processor (DSP), and any suitable processor, controller, microcontroller, etc. The computing unit 701 performs the various methods and processes described above, such as road planning methods. For example, in some embodiments, the road planning method may be implemented as a computer software program tangibly contained in a machine-readable medium, such as storage unit 708. In some embodiments, part or all of the computer program may be loaded and / or installed on device 700 via ROM 702 and / or communication unit 709. When the computer program is loaded into RAM 703 and executed by the computing unit 701, one or more steps of the road planning method described above may be performed. Alternatively, in other embodiments, the computing unit 701 may be configured to perform road planning methods by any other suitable means (e.g., by means of firmware).

[0108] Various embodiments of the systems and techniques described above herein can be implemented in digital electronic circuit systems, integrated circuit systems, field-programmable gate arrays (FPGAs), application-specific integrated circuits (ASICs), application-specific standard products (ASSPs), systems-on-a-chip (SoCs), payload-programmable logic devices (CPLDs), computer hardware, firmware, software, and / or combinations thereof. These various embodiments may include implementations in one or more computer programs that can be executed and / or interpreted on a programmable system including at least one programmable processor, which may be a dedicated or general-purpose programmable processor, capable of receiving data and instructions from a storage system, at least one input device, and at least one output device, and transmitting data and instructions to the storage system, the at least one input device, and the at least one output device.

[0109] The program code used to implement the methods of this disclosure may be written in any combination of one or more programming languages. This program code may be provided to a processor or controller of a general-purpose computer, special-purpose computer, or other programmable data processing apparatus, such that when executed by the processor or controller, the program code causes the functions / operations specified in the flowcharts and / or block diagrams to be implemented. The program code may be executed entirely on a machine, partially on a machine, as a standalone software package partially on a machine and partially on a remote machine, or entirely on a remote machine or server.

[0110] In the context of this disclosure, a machine-readable medium can be a tangible medium that may contain or store a program for use by or in conjunction with an instruction execution system, apparatus, or device. A machine-readable medium can be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium can be, but is not limited to, electronic, magnetic, optical, electromagnetic, infrared, or semiconductor systems, apparatus, or devices, or any suitable combination of the foregoing. More specific examples of machine-readable storage media include electrical connections based on one or more wires, portable computer disks, hard disks, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination of the foregoing.

[0111] To provide interaction with a user, the systems and techniques described herein can be implemented on a computer having: a display device for displaying information to the user (e.g., a CRT (cathode ray tube) or LCD (liquid crystal display) monitor); and a keyboard and pointing device (e.g., a mouse or trackball) through which the user provides input to the computer. Other types of devices can also be used to provide interaction with the user; for example, feedback provided to the user can be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and input from the user can be received in any form (including sound input, voice input, or tactile input).

[0112] The systems and technologies described herein can be implemented in computing systems that include backend components (e.g., as a data server), or computing systems that include middleware components (e.g., an application server), or computing systems that include frontend components (e.g., a user computer with a graphical user interface or web browser through which a user can interact with embodiments of the systems and technologies described herein), or any combination of such backend, middleware, or frontend components. The components of the system can be interconnected via digital data communication of any form or medium (e.g., a communication network). Examples of communication networks include local area networks (LANs), wide area networks (WANs), and the Internet.

[0113] Computer systems can include clients and servers. Clients and servers are generally geographically separated and typically interact via communication networks. Client-server relationships are created by computer programs running on the respective computers and having a client-server relationship with each other. Servers can be servers in distributed systems or servers incorporating blockchain technology. Servers can also be cloud servers, or intelligent cloud computing servers or intelligent cloud hosts with artificial intelligence technology.

[0114] It should be understood that the various forms of processes shown above can be used to rearrange, add, or delete steps. For example, the steps described in this disclosure can be executed in parallel, sequentially, or in different orders, as long as the desired result of the technical solution disclosed in this disclosure can be achieved, and this is not limited herein.

[0115] The specific embodiments described above do not constitute a limitation on the scope of protection of this disclosure. Those skilled in the art should understand that various modifications, combinations, sub-combinations, and substitutions can be made according to design requirements and other factors. Any modifications, equivalent substitutions, and improvements made within the spirit and principles of this disclosure should be included within the scope of protection of this disclosure.

Claims

1. A method for loading images on a webpage, applied to a client-side, comprising: In response to receiving a request to load a webpage image, a sprite sheet is loaded from a content delivery network and an index file is obtained, wherein the sprite sheet includes a thumbnail of the webpage image; Based on the URL of the webpage image, query the index file to find the coordinate position of the thumbnail in the sprite sheet; The thumbnail is obtained from the sprite sheet image based on the queried coordinates, and then rendered.

2. The method according to claim 1, wherein, The method further includes: During initialization, the display attribute of webpage images is set to "not displayed" to hide image elements.

3. The method according to claim 1, wherein, Rendering the thumbnail includes: The thumbnail is rendered using a background image rendering method based on Cascading Style Sheets (CSS).

4. The method according to claim 1, wherein, The method further includes: In response to receiving a request to preview the original image corresponding to the webpage image, the address of the original image is obtained according to the preset address mapping relationship between thumbnails and original images; Load the original image based on its address.

5. A method for loading web page images, applied to a server, comprising: Generate thumbnails based on original images from the image resource library; A sprite sheet is constructed based on the thumbnail, and an index file is generated, wherein the index file includes the address of the sprite sheet and the coordinate position of the thumbnail in the sprite sheet; The sprite sheet, the original image, and the index file are published to a content delivery network.

6. The method according to claim 5, wherein, The process of constructing a sprite sheet based on the thumbnail and generating an index file includes: Draw the background canvas; A predetermined number of thumbnails are drawn onto the background canvas according to a preset composition layout to generate a sprite sheet, and the coordinate positions of the thumbnails in the sprite sheet are recorded. An index file is generated based on the address of the sprite sheet and the coordinates.

7. A webpage image loading device, applied to a client, comprising: The acquisition unit is configured to, in response to receiving a request to load a webpage image, load a sprite sheet from a content delivery network and acquire an index file, wherein the sprite sheet includes a thumbnail of the webpage image; The query unit is configured to query the coordinate position of the thumbnail in the sprite sheet based on the address of the webpage image in the index file; The rendering unit is configured to retrieve the thumbnail from the sprite sheet based on the queried coordinates and render the thumbnail.

8. A webpage image loading device, applied to a server, comprising: The compression unit is configured to generate thumbnails based on the original images in the image resource library; The composition unit is configured to construct a sprite sheet based on the thumbnail and generate an index file, wherein the index file includes the address of the sprite sheet and the coordinate position of the thumbnail in the sprite sheet; The publishing unit is configured to publish the sprite sheet, the original image, and the index file to a content delivery network.

9. An electronic device, comprising: One or more processors; Storage device, on which one or more computer programs are stored, When the one or more computer programs are executed by the one or more processors, the one or more processors implement the method as described in any one of claims 1-6.

10. A computer-readable medium having a computer program stored thereon, wherein, When the computer program is executed by a processor, it implements the method as described in any one of claims 1-6.

11. A computer program product comprising a computer program that, when executed by a processor, implements the method according to any one of claims 1-6.

Images