Picture loading method and device, electronic equipment and storage medium

Abstract

The invention provides a picture loading method and device, electronic equipment and a storage medium, and relates to the technical field of picture loading. The method comprises the steps of obtaining picture addresses of all first target pictures of a current page; converting the first target picture into an optimal compression rate format supported by the terminal equipment by using an object storage service to obtain a second target picture; determining a single-screen height based on the screen size and the picture rendering magnification, and traversing whether the height of the second target picture is greater than the single-screen height; if yes, cutting the second target picture into a plurality of block pictures based on the single-screen height; creating a picture element, storing the picture address of the block picture and / or the second target picture which does not need to be clipped to the self-defined attribute of the picture element, and rendering the picture element to the current page; determining a target picture element based on the page rolling speed of the current page; and reading the picture address in the user-defined attribute of the target picture element to load and display the picture, thereby realizing quick loading of long picture blocks and reducing flow consumption.

Description

Technical Field

[0001] This invention relates to the field of image loading technology, and in particular to an image loading method, apparatus, electronic device, and storage medium. Background Technology

[0002] With the increasing richness of content in front-end applications, images (especially long and extra-long images) have become a core display element. Current technologies often employ a "layered loading" approach for image loading, prioritizing outlines, colors, and details based on a visible area detection mechanism. However, this approach has significant drawbacks:

[0003] On the one hand, long or extra-long images require waiting for the complete image transmission before they can be displayed, resulting in a long initial blank screen time and a poor user experience. On the other hand, existing solutions cannot dynamically adjust compression strategies based on the image formats supported by the device, and only use common formats for transmission, resulting in wasted bandwidth. For example, devices that support high compression ratio formats (such as AVIF) still load large JPG format images. Summary of the Invention

[0004] This invention provides an image loading method, apparatus, electronic device, and storage medium to solve the defects of slow loading of long images and wasted bandwidth in the prior art, realize image format adaptation to device, fast loading of long images in blocks, shorten the first screen display time, and reduce bandwidth consumption.

[0005] This invention provides an image loading method, comprising:

[0006] When the current page loads, obtain the image addresses of all the first target images on the current page;

[0007] The first target image is converted into the optimal compression ratio format supported by the terminal device using the object storage service to obtain the second target image, wherein the object storage service has image format conversion and cropping capabilities;

[0008] Based on the screen size and image rendering ratio of the terminal device, the single-screen height is determined, and the image height of the second target image is iterated to determine whether it is greater than the single-screen height.

[0009] If so, the second target image is cropped into multiple block images based on the single-screen height using the object storage service; otherwise, the second target image is not processed.

[0010] Create an image element, store the image address of the segmented image and / or the second target image that does not need to be cropped into the custom attribute of the image element, and render the image element to the current page according to the original image layout order;

[0011] Based on the current page scrolling speed, the image element to be loaded is determined as the target image element;

[0012] Read the image address from the custom attributes of the target image element, and load and display the image corresponding to the target image element based on the image address.

[0013] According to an image loading method provided by the present invention, determining the image element to be loaded as the target image element based on the current page scrolling speed includes:

[0014] Listen for scroll events on the current page, and calculate the scroll distance and time difference of the scroll events to obtain the page scroll speed;

[0015] Determine whether the page scrolling speed exceeds a preset threshold;

[0016] If yes, return to the step of determining whether the page scrolling speed exceeds a preset threshold; otherwise, use a front-end visible area detection algorithm to detect image elements in the visible area of ​​the terminal device and determine them as the target image elements.

[0017] According to an image loading method provided by the present invention, the step of detecting image elements located in the visible area of ​​the terminal device through a front-end visible area detection algorithm and determining them as the target image elements includes:

[0018] Obtain the viewport boundary coordinates of the visible area;

[0019] Get the position coordinates of the unloaded image element;

[0020] If the position coordinates of any of the unloaded image elements are within the range of the viewport boundary coordinates, then the unloaded image element is located in the visible area and is determined to be the target image element.

[0021] According to an image loading method provided by the present invention, the target image element includes image elements whose entire range and / or part of the range enter the visible area.

[0022] According to an image loading method provided by the present invention, after determining the image element to be loaded as the target image element based on the page scrolling speed of the current page, the method further includes:

[0023] Based on the original image layout order, detect whether the target image element has a next image element;

[0024] If a next image element exists, the image corresponding to the next image element is preloaded when the target image element has finished loading.

[0025] According to an image loading method provided by the present invention, the optimal compression ratio format of the terminal device is the image format with the highest compression ratio supported by the terminal device, and the image format includes at least one of webp, avif, and heic.

[0026] According to an image loading method provided by the present invention, before converting the first target image into an optimal compression ratio format supported by the terminal device using object storage service to obtain the second target image, the method includes:

[0027] Check if the local cache stores the optimal compression ratio format supported by the terminal device;

[0028] If yes, return the information of the optimal compression ratio format; otherwise, determine the optimal compression ratio format according to the image formats supported by the terminal device and store it in the local cache.

[0029] The present invention also provides an image loading device, comprising:

[0030] The acquisition module is used to obtain the image addresses of all the first target images on the current page when the current page is loaded;

[0031] The conversion module is used to convert the first target image into the optimal compression ratio format supported by the terminal device using the object storage service to obtain the second target image, wherein the object storage service has image format conversion and cropping capabilities;

[0032] The first determining module is used to determine the single-screen height based on the screen size and image rendering ratio of the terminal device, and to iterate and determine whether the image height of the second target image is greater than the single-screen height.

[0033] The processing module is configured to, if so, crop the second target image into multiple block images based on the single-screen height using the object storage service; otherwise, not process the second target image.

[0034] A creation module is used to create image elements, store the image addresses of the segmented image and / or the second target image that does not need to be cropped into the custom attributes of the image elements, and render the image elements to the current page according to the original image layout order;

[0035] The second determining module is used to determine the image element to be loaded as the target image element based on the current page scrolling speed.

[0036] The loading module is used to read the image address from the custom attributes of the target image element, and load and display the image corresponding to the target image element based on the image address.

[0037] The present invention also provides an electronic device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the program to implement any of the image loading methods described above.

[0038] The present invention also provides a non-transitory computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the image loading method as described above.

[0039] The image loading method, apparatus, electronic device, and storage medium provided by this invention have the following significant advantages compared with the prior art:

[0040] 1. High adaptability: Automatically detects high compression ratio formats supported by the device and converts them to the optimal compression format through a third-party object storage service (such as Alibaba Cloud OSS) to adapt to different devices and minimize bandwidth waste;

[0041] 2. Faster loading of long images: Long images are processed in blocks according to the height of a single screen, and only a single block of image is loaded on the first screen, which greatly shortens the time of blank screen on the first screen and improves the user experience;

[0042] 3. Loading efficiency optimization: scrolling speed threshold control avoids invalid loading, visible area detection accurately triggers loading, and preloading function ensures seamless scrolling, balancing performance and user experience;

[0043] 4. High reusability: Device format supports result caching to avoid duplicate detection; third-party object storage service format conversion and trimming functions reduce the complexity of front-end development;

[0044] 5. Wide versatility: Adaptable to various front-end scenarios such as web pages and mobile applications, supports images of different sizes and types, and has a wide range of applications. Attached Figure Description

[0045] To more clearly illustrate the technical solutions in this invention or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are some embodiments of this invention. For those skilled in the art, other drawings can be obtained from these drawings without creative effort.

[0046] Figure 1 This is a flowchart illustrating the image loading method provided by the present invention;

[0047] Figure 2 This is a schematic diagram of the image loading device provided by the present invention;

[0048] Figure 3 This is a schematic diagram of the structure of the electronic device provided by the present invention. Detailed Implementation

[0049] To make the objectives, technical solutions, and advantages of this invention clearer, the technical solutions of this invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some, not all, of the embodiments of this invention. All other embodiments obtained by those skilled in the art based on the embodiments of this invention without creative effort are within the scope of protection of this invention.

[0050] It should be noted that in the description of the embodiments of the present invention, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Without further limitations, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes said element. The terms "first," "second," etc., used in this invention are used to distinguish similar objects and are not used to describe a specific order or sequence. It should be understood that such data can be interchanged where appropriate so that embodiments of the invention can be implemented in orders other than those illustrated or described herein, and the objects distinguished by "first," "second," etc., are generally of the same class and do not limit the number of objects; for example, a first object can be one or more. Furthermore, "and / or" indicates at least one of the connected objects, and the character " / " generally indicates that the preceding and following objects are in an "or" relationship.

[0051] The following is combined Figures 1 to 3 This invention describes an image loading method, apparatus, electronic device, and storage medium.

[0052] like Figure 1 As shown, the present invention provides an image loading method, which may specifically include the following steps:

[0053] Step 110: When the current page loads, obtain the image addresses of all the first target images on the current page.

[0054] Specifically, the current page is a front-end display page containing at least one image to be loaded (which can be a long image, an extra-long image, or a regular-sized image). It is the target page that needs to achieve intelligent image loading optimization, including but not limited to web pages (such as e-commerce product detail pages, news long image and text pages), mobile application in-app pages (such as the dynamic pages of social apps, the courseware display pages of educational apps), covering front-end display scenarios of Android, iOS and other terminals.

[0055] When the page is initialized and loaded, all target image tags on the page are traversed. The original image addresses of all images to be loaded (i.e., the first target image) are extracted through the custom attributes preset by the tags (such as data-img-url), providing a data foundation for subsequent processing.

[0056] Step 120: Use the object storage service to convert the first target image into the optimal compression ratio format supported by the terminal device to obtain the second target image, wherein the object storage service has image format conversion and cropping capabilities.

[0057] Specifically, by utilizing a third-party object storage service with image format conversion and cropping capabilities, the image format conversion interface of the object storage service is called to convert the original images on the page into the optimal format with the highest compression ratio supported by the device.

[0058] In some embodiments, the optimal compression ratio format of the terminal device is the image format with the highest compression ratio supported by the terminal device, and the image format may include at least one of WebP, Aviv, and HEIC. If the terminal device supports multiple high-compression ratio image formats, the image format with the best compression ratio among the supported formats is selected. For example, if the terminal device supports the Aviv format, it is preferentially converted to the Aviv format; if it only supports the WebP format, it is converted to the WebP format.

[0059] In some embodiments, prior to step 120, the following is included:

[0060] Check if the local cache stores the optimal compression ratio format supported by the terminal device;

[0061] If yes, return the information of the optimal compression ratio format; otherwise, determine the optimal compression ratio format according to the image formats supported by the terminal device and store it in the local cache.

[0062] In this embodiment, the optimal compression ratio format supported by the terminal device can be stored in the local cache for quick provision to a third-party object storage service for format conversion. Before information is cached, the optimal compression ratio format can be selected and cached locally by detecting the high compression ratio image formats supported by the terminal device. When the same type of image is loaded on a subsequent page, the cached result can be reused directly, avoiding repeated detection and improving efficiency.

[0063] Step 130: Based on the screen size and image rendering ratio of the terminal device, determine the single-screen height, and iterate through and determine whether the image height of the second target image is greater than the single-screen height.

[0064] Specifically, the screen width and height of the terminal device are obtained through the front-end API. Combined with the actual rendering ratio of the image (such as the device pixel ratio), the single-screen height of the image on that terminal device is calculated, i.e., the height of the image that can be displayed on a single screen. Single-screen height = screen height × actual image rendering ratio. This is used to determine whether it is a long image and to segment it into blocks. The original height of each second target image on the current page is read and compared with the single-screen height. If the image height is greater than the single-screen height, it is determined to be a long image.

[0065] The actual rendering ratio of an image is primarily determined by the Device Pixel Ratio (DPR), a purely device-level attribute defined as the number of physical pixels divided by the number of logical pixels. For example, the iPhone 15 has a DPR of 3, meaning 1 logical pixel corresponds to 3 physical pixels; a typical mid-range Android phone has a DPR of 2, and a low-end phone has a DPR of 1.

[0066] If the page does not perform additional scaling on the images, the actual rendering ratio of the images is equal to the device's DisplayPort (DPR). Single-screen height = screen logical height × DPR. For example, if the screen logical height is 1080px (DPR = 2), then the single-screen height is 1080 × 2 = 2160 physical pixels.

[0067] If the page scales or adapts images, the scaling ratio configured on the page must be taken into account to calculate the actual rendering ratio of the image on the current page, ensuring that the height of the blocks matches the user's actual visible area.

[0068] Taking the iPhone 15's screen logical height as 848px, DPR=3, and page image scale set to 0.9 as an example:

[0069] Equipment base ratio: 3;

[0070] Page scaling adjustment: ×0.9;

[0071] Actual image rendering magnification: 3 × 0.9 = 2.7;

[0072] Single screen height: 848px × 2.7 = 2289.6px;

[0073] If the original height of the image is 3000px > 2289.6px, it is determined to be a long image and is divided into blocks with a height of 2289.6px.

[0074] Step 140: If yes, crop the second target image into multiple block images based on the single-screen height using the object storage service; otherwise, do not process the second target image.

[0075] Specifically, when the second target image is a long image, the custom cropping function of the object storage service is invoked to evenly cut the long image into multiple block images according to the single-screen height. The height of the block images is consistent with the single-screen height, and the width maintains the proportion of the original image to ensure that the original image is completely restored after stitching. If the image height is not greater than the single-screen height, no block processing is required. This step completes the cropping and block processing of long images in all second target images on the current page, while ordinary images are not processed.

[0076] In some embodiments, the third-party object storage service can be Alibaba Cloud OSS, which is used to implement image format conversion and block cropping, and has mature image processing interfaces and high availability. In other embodiments, object storage services such as Tencent Cloud COS, Huawei Cloud OBS, and Qiniu Cloud Kodo, which have image format conversion and custom cropping capabilities, can also be used.

[0077] Step 150: Create an image element, store the image address of the segmented image and / or the second target image that does not need to be cropped into the custom attribute of the image element, and render the image element onto the current page according to the original image layout order.

[0078] Specifically, a new image element is created, and the addresses of all segmented images and / or the converted, optimally compressed image addresses are stored in the custom attributes of the corresponding image element. The created image element is then rendered to the specified position on the page in the original image layout order. At this time, the image element does not load the actual image; it only completes the layout placeholder.

[0079] Step 160: Based on the current page scrolling speed, determine the image element to be loaded as the target image element.

[0080] Specifically, users can scroll the current page by controlling the mouse or touch operation. By listening to the scrolling event of the current page, the timing of image loading can be dynamically controlled to balance loading speed and performance consumption.

[0081] In some embodiments, step 160 may specifically include:

[0082] Listen for scroll events on the current page, and calculate the scroll distance and time difference of the scroll events to obtain the page scroll speed;

[0083] Determine whether the page scrolling speed exceeds a preset threshold;

[0084] If yes, return to the step of determining whether the page scrolling speed exceeds a preset threshold; otherwise, use a front-end visible area detection algorithm to detect image elements in the visible area of ​​the terminal device and determine them as the target image elements.

[0085] In this embodiment, it is determined whether the scrolling speed exceeds a preset threshold (the threshold can be customized according to business needs, such as 100px / ms). If it exceeds the preset threshold, it means that the user is scrolling the page quickly, and the scrolling speed is further calculated to see if it exceeds the preset threshold. The image loading logic is not executed to avoid invalid loading and resource consumption. If it does not exceed the preset threshold, the image element currently in the visible area is detected, which is the image element that needs to be loaded.

[0086] In some embodiments, the step of detecting image elements within the visible area of ​​the terminal device using a front-end visible area detection algorithm and determining them as the target image elements includes:

[0087] Obtain the viewport boundary coordinates of the visible area;

[0088] Get the position coordinates of the unloaded image element;

[0089] If the position coordinates of any of the unloaded image elements are within the range of the viewport boundary coordinates, then the unloaded image element is located in the visible area and is determined to be the target image element.

[0090] In this embodiment, the position coordinates of the image element include top coordinates and bottom coordinates. As long as either its top or bottom coordinate is within the viewport boundary coordinate range, that is, the image element is within the visible area, the image element can be identified as the target image element.

[0091] It is understood that the target image element includes image elements that fall entirely and / or partially within the visible area.

[0092] Step 170: Read the image address from the custom attribute of the target image element, and load and display the image corresponding to the target image element based on the image address.

[0093] Specifically, if the image element is in the visible area, the image address stored in its custom attribute is read and assigned to the src attribute of the image element, triggering the image to load and display; if it is not in the visible area, it will not be loaded for the time being.

[0094] To improve the user scrolling experience and achieve seamless loading, in some embodiments, after step 170, the following may be included:

[0095] Based on the original image layout order, detect whether the target image element has a next image element;

[0096] If a next image element exists, the image corresponding to the next image element is preloaded when the target image element has finished loading.

[0097] Specifically, based on the layout order, it checks whether there are any image elements after the currently visible image element, i.e., whether there are any unloaded images. If there is a next element, and all images that have been triggered to load in the current visible area have finished loading (this can be determined by listening to the image's onload event), then the address of the image corresponding to the next image element is automatically extracted and preloading is triggered. The preloading result is cached in the browser. In this way, when the user scrolls the page and the next image element enters the visible area, the corresponding image can be loaded seamlessly, improving the user experience.

[0098] To make the technical solution of this invention clearer and easier to understand, the specific implementation process of this invention will be described in detail below, taking the long image loading scenario in mobile applications as an example:

[0099] Image URL retrieval: When the mobile application page loads, iterate through all... The tag extracts the URLs of three target images using the custom attribute data-img-url: one is a long image with a height of 3000px, and the other two are regular images with a height of 800px.

[0100] Device format adaptation: Detect that the current device (Android 13 phone) supports the avif format, call the Alibaba Cloud OSS format conversion interface to convert all 3 images to avif format, and cache the "device supports avif" result to the local phone.

[0101] Long image segmentation: Get the phone screen height as 1080px, the actual image rendering ratio is 2.0, calculate the single screen height = 1080px × 2.0 = 2160px; determine that the long image height is 3000px > 2160px, call the Alibaba Cloud OSS cropping function to cut the long image into 2 segmented images (the first segment height is 2160px, the second segment height is 840px). Ordinary images do not need to be segmented.

[0102] Image element construction: Create 4 new image elements (2 long image blocks + 2 regular images), store the AAVIF format image addresses in the data-avif-url attribute of each element, render them on the page in the original image order, and complete the layout and placeholders.

[0103] On-demand loading control: When the user scrolls the page, the scrolling speed is calculated to be 50px / ms (lower than the preset threshold of 100px / ms); when the first long image block and one ordinary image are detected to be in the visible area, their data-avif-url address is read and assigned to src, triggering loading and display.

[0104] Preloading execution: After the images in the visible area are loaded, if the existence of the next image element is detected, and the image corresponding to the next long image segment is detected, the image of that segment is automatically preloaded; when the user continues to scroll the page, the preloaded segment image is displayed directly without waiting for loading.

[0105] Throughout the process, the initial loading time of long images can be reduced from 3 seconds to 800ms, and the AVIF format saves 60% of bandwidth compared to the JPG format, achieving a dual optimization of loading speed and bandwidth consumption.

[0106] The image loading method described above has the following significant advantages compared to existing technologies:

[0107] 1. High adaptability: Automatically detects high compression ratio formats supported by the device and converts them to the optimal compression format through a third-party object storage service (such as Alibaba Cloud OSS) to adapt to different devices and minimize bandwidth waste;

[0108] 2. Faster loading of long images: Long images are processed in blocks according to the height of a single screen, and only a single block of image is loaded on the first screen, which greatly shortens the time of blank screen on the first screen and improves the user experience;

[0109] 3. Loading efficiency optimization: scrolling speed threshold control avoids invalid loading, visible area detection accurately triggers loading, and preloading function ensures seamless scrolling, balancing performance and user experience;

[0110] 4. High reusability: Device format supports result caching to avoid duplicate detection; third-party object storage service format conversion and trimming functions reduce the complexity of front-end development;

[0111] 5. Wide versatility: Adaptable to various front-end scenarios such as web pages and mobile applications, supports images of different sizes and types, and has a wide range of applications.

[0112] The above method can be widely applied to various front-end applications that include image display, such as social media, e-commerce, news, and education, and is especially suitable for scenarios with many long images (such as posters, guides, and document screenshots). This solution effectively solves the core pain points of slow loading of long images and wasted bandwidth, adapts to different devices and scenarios, reduces development and operation costs, improves user experience, and has significant industrial practical value and promotion prospects.

[0113] The image loading apparatus provided by the present invention will be described below. The image loading apparatus described below can be referred to in correspondence with the image loading method described above.

[0114] like Figure 2 As shown, the present invention also provides an image loading device, comprising:

[0115] The acquisition module 210 is used to acquire the image addresses of all first target images of the current page when the current page is loaded;

[0116] The conversion module 220 is used to convert the first target image into the optimal compression ratio format supported by the terminal device using the object storage service to obtain the second target image, wherein the object storage service has image format conversion and cropping capabilities;

[0117] The first determining module 230 is used to determine the single-screen height based on the screen size and image rendering ratio of the terminal device, and to iterate and determine whether the image height of the second target image is greater than the single-screen height.

[0118] The processing module 240 is configured to, if so, crop the second target image into multiple block images based on the single-screen height through the object storage service; otherwise, not process the second target image.

[0119] A creation module 250 is used to create image elements, store the image addresses of the segmented image and / or the second target image that does not need to be cropped into the custom attributes of the image elements, and render the image elements to the current page according to the original image layout order;

[0120] The second determining module 260 is used to determine the image element to be loaded as the target image element based on the page scrolling speed of the current page.

[0121] The loading module 270 is used to read the image address in the custom attribute of the target image element, and load and display the image corresponding to the target image element based on the image address.

[0122] Figure 3 An example is a schematic diagram of the physical structure of an electronic device, such as... Figure 3 As shown, the electronic device may include: a processor 310, a communication interface 320, a memory 330, and a communication bus 340, wherein the processor 310, the communication interface 320, and the memory 330 communicate with each other via the communication bus 340. The processor 310 can call logical instructions in the memory 330 to execute an image loading method, which includes:

[0123] When the current page loads, obtain the image addresses of all the first target images on the current page;

[0124] The first target image is converted into the optimal compression ratio format supported by the terminal device using the object storage service to obtain the second target image, wherein the object storage service has image format conversion and cropping capabilities;

[0125] Based on the screen size and image rendering ratio of the terminal device, the single-screen height is determined, and the image height of the second target image is iterated to determine whether it is greater than the single-screen height.

[0126] If so, the second target image is cropped into multiple block images based on the single-screen height using the object storage service; otherwise, the second target image is not processed.

[0127] Create an image element, store the image address of the segmented image and / or the second target image that does not need to be cropped into the custom attribute of the image element, and render the image element to the current page according to the original image layout order;

[0128] Based on the current page scrolling speed, the image element to be loaded is determined as the target image element;

[0129] Read the image address from the custom attributes of the target image element, and load and display the image corresponding to the target image element based on the image address.

[0130] Furthermore, the logical instructions in the aforementioned memory 330 can be implemented as software functional units and, when sold or used as independent products, can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present invention, essentially, or the part that contributes to the prior art, or a part of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods described in the various embodiments of the present invention. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

[0131] On the other hand, the present invention also provides a computer program product, the computer program product comprising a computer program that can be stored on a non-transitory computer-readable storage medium, and when the computer program is executed by a processor, the computer is able to execute the image loading method provided by the above methods, the method comprising:

[0132] When the current page loads, obtain the image addresses of all the first target images on the current page;

[0133] The first target image is converted into the optimal compression ratio format supported by the terminal device using the object storage service to obtain the second target image, wherein the object storage service has image format conversion and cropping capabilities;

[0134] Based on the screen size and image rendering ratio of the terminal device, the single-screen height is determined, and the image height of the second target image is iterated to determine whether it is greater than the single-screen height.

[0135] If so, the second target image is cropped into multiple block images based on the single-screen height using the object storage service; otherwise, the second target image is not processed.

[0136] Create an image element, store the image address of the segmented image and / or the second target image that does not need to be cropped into the custom attribute of the image element, and render the image element to the current page according to the original image layout order;

[0137] Based on the current page scrolling speed, the image element to be loaded is determined as the target image element;

[0138] Read the image address from the custom attributes of the target image element, and load and display the image corresponding to the target image element based on the image address.

[0139] In another aspect, the present invention also provides a non-transitory computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, is implemented to perform the image loading methods provided by the methods described above, the method comprising:

[0140] When the current page loads, obtain the image addresses of all the first target images on the current page;

[0141] The first target image is converted into the optimal compression ratio format supported by the terminal device using the object storage service to obtain the second target image, wherein the object storage service has image format conversion and cropping capabilities;

[0142] Based on the screen size and image rendering ratio of the terminal device, the single-screen height is determined, and the image height of the second target image is iterated to determine whether it is greater than the single-screen height.

[0143] If so, the second target image is cropped into multiple block images based on the single-screen height using the object storage service; otherwise, the second target image is not processed.

[0144] Create an image element, store the image address of the segmented image and / or the second target image that does not need to be cropped into the custom attribute of the image element, and render the image element to the current page according to the original image layout order;

[0145] Based on the current page scrolling speed, the image element to be loaded is determined as the target image element;

[0146] Read the image address from the custom attributes of the target image element, and load and display the image corresponding to the target image element based on the image address.

[0147] The device embodiments described above are merely illustrative. The units described as separate components may or may not be physically separate. The components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the modules can be selected to achieve the purpose of this embodiment according to actual needs. Those skilled in the art can understand and implement this without any creative effort.

[0148] Through the above description of the embodiments, those skilled in the art can clearly understand that each embodiment can be implemented by means of software plus necessary general-purpose hardware platforms, and of course, it can also be implemented by hardware. Based on this understanding, the above technical solutions, in essence or the part that contributes to the prior art, can be embodied in the form of a software product. This computer software product can be stored in a computer-readable storage medium, such as ROM / RAM, magnetic disk, optical disk, etc., and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute the methods described in the various embodiments or some parts of the embodiments.

[0149] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention, and not to limit them; although the present invention has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that modifications can still be made to the technical solutions described in the foregoing embodiments, or equivalent substitutions can be made to some of the technical features; and these modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of the present invention.

Claims

1. An image loading method, characterized in that, include: When the current page loads, obtain the image addresses of all the first target images on the current page; The first target image is converted into the optimal compression ratio format supported by the terminal device using the object storage service to obtain the second target image, wherein the object storage service has image format conversion and cropping capabilities; Based on the screen size and image rendering ratio of the terminal device, the single-screen height is determined, and the image height of the second target image is iterated to determine whether it is greater than the single-screen height. If so, the second target image is cropped into multiple block images based on the single-screen height using the object storage service; otherwise, the second target image is not processed. Create an image element, store the image address of the segmented image and / or the second target image that does not need to be cropped into the custom attribute of the image element, and render the image element to the current page according to the original image layout order; Based on the current page scrolling speed, the image element to be loaded is determined as the target image element; Read the image address from the custom attributes of the target image element, and load and display the image corresponding to the target image element based on the image address.

2. The image loading method according to claim 1, characterized in that, The step of determining the target image element based on the current page's scrolling speed includes: Listen for scroll events on the current page, and calculate the scroll distance and time difference of the scroll events to obtain the page scroll speed; Determine whether the page scrolling speed exceeds a preset threshold; If yes, return to the step of determining whether the page scrolling speed exceeds a preset threshold; otherwise, use a front-end visible area detection algorithm to detect image elements in the visible area of ​​the terminal device and determine them as the target image elements.

3. The image loading method according to claim 2, characterized in that, The step of detecting image elements within the visible area of ​​the terminal device using a front-end visible area detection algorithm and determining them as the target image elements includes: Obtain the viewport boundary coordinates of the visible area; Get the position coordinates of the unloaded image element; If the position coordinates of any of the unloaded image elements are within the range of the viewport boundary coordinates, then the unloaded image element is located in the visible area and is determined to be the target image element.

4. The image loading method according to claim 2, characterized in that, The target image elements include image elements that enter the visible area in their entirety and / or in part.

5. The image loading method according to claim 2, characterized in that, After determining the target image element based on the current page's scrolling speed, the process further includes: Based on the original image layout order, detect whether the target image element has a next image element; If a next image element exists, the image corresponding to the next image element is preloaded when the target image element has finished loading.

6. The image loading method according to claim 1, characterized in that, The optimal compression ratio format of the terminal device is the image format with the highest compression ratio supported by the terminal device, and the image format includes at least one of webp, avif, and heic.

7. The image loading method according to claim 6, characterized in that, Before converting the first target image into the optimal compression ratio format supported by the terminal device using object storage service to obtain the second target image, the process includes: Check if the local cache stores the optimal compression ratio format supported by the terminal device; If yes, return the information of the optimal compression ratio format; otherwise, determine the optimal compression ratio format according to the image formats supported by the terminal device and store it in the local cache.

8. An image loading device, characterized in that, include: The acquisition module is used to obtain the image addresses of all the first target images on the current page when the current page is loaded; The conversion module is used to convert the first target image into the optimal compression ratio format supported by the terminal device using the object storage service to obtain the second target image, wherein the object storage service has image format conversion and cropping capabilities; The first determining module is used to determine the single-screen height based on the screen size and image rendering ratio of the terminal device, and to iterate and determine whether the image height of the second target image is greater than the single-screen height. The processing module is configured to, if so, crop the second target image into multiple block images based on the single-screen height using the object storage service; otherwise, not process the second target image. A creation module is used to create image elements, store the image addresses of the segmented image and / or the second target image that does not need to be cropped into the custom attributes of the image elements, and render the image elements to the current page according to the original image layout order; The second determining module is used to determine the image element to be loaded as the target image element based on the current page scrolling speed. The loading module is used to read the image address from the custom attributes of the target image element, and load and display the image corresponding to the target image element based on the image address.

9. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that, When the processor executes the program, it implements the image loading method as described in any one of claims 1 to 7.

10. A non-transitory computer-readable storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by a processor, it implements the image loading method as described in any one of claims 1 to 7.

Images