CN-121980101-A - Picture loading method and device, electronic equipment and storage medium

CN121980101ACN 121980101 ACN121980101 ACN 121980101ACN-121980101-A

Abstract

The invention provides a picture loading method, a picture loading 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 pictures into an optimal compression rate format supported by terminal equipment by using an object storage service to obtain second target pictures, determining single-screen height based on screen size and picture rendering multiplying power, traversing whether the height of the second target pictures is larger than Shan Binggao degrees, if so, cutting the second target pictures into a plurality of block pictures based on the single-screen height, creating picture elements, storing the picture addresses of the block pictures and/or the second target pictures which do not need to be cut into custom attributes of the picture elements, rendering the picture elements to the current page, determining the target picture elements based on page rolling speed of the current page, reading picture addresses in the custom attributes of the target picture elements to load display pictures, realizing long-picture block quick loading, and reducing flow consumption.

Inventors

SHU WEI
GUO MANLI
CHEN YUTUO

Assignees

广州心娱网络科技有限公司

Dates

Publication Date: 20260505
Application Date: 20251225

Claims (10)

1. A picture loading method, comprising: When a current page is loaded, obtaining picture addresses of all first target pictures of the current page; Converting the first target picture into an optimal compression rate format supported by terminal equipment by using an object storage service to obtain a second target picture, wherein the object storage service has picture format conversion and cutting capabilities; determining Shan Binggao degrees based on the screen size and the picture rendering rate of the terminal equipment, and traversing and judging whether the picture height of the second target picture is larger than Shan Binggao degrees; if yes, cutting the second target picture into a plurality of block pictures based on Shan Binggao degrees through the object storage service, otherwise, not processing the second target picture; Creating a picture element, storing the picture address of the block picture and/or the second target picture which does not need to be cut into the custom attribute of the picture element, and rendering the picture element to the current page according to the original layout sequence; determining a picture element to be loaded as a target picture element based on the page rolling speed of the current page; And reading a picture address in the custom attribute of the target picture element, and loading and displaying a picture corresponding to the target picture element based on the picture address.
2. The picture loading method according to claim 1, wherein the determining that the picture element to be loaded is the target picture element based on the page scrolling speed of the current page includes: monitoring a rolling event of the current page, and obtaining the page rolling speed by calculating the rolling distance and time difference of the rolling event; judging whether the page rolling speed exceeds a preset threshold value or not; If yes, returning to the step of judging whether the page scrolling speed exceeds a preset threshold value, otherwise, detecting the picture element in the visual area of the terminal equipment through a front-end visual area detection algorithm, and determining the picture element as the target picture element.
3. The picture loading method according to claim 2, wherein the detecting, by a front-end visible region detection algorithm, a picture element in a visible region of the terminal device, and determining the picture element as the target picture element, includes: Obtaining the boundary coordinates of the view port of the visual area; Acquiring position coordinates corresponding to unloaded picture elements; and if the position coordinate of any unloaded picture element is within the range of the view port boundary coordinate, determining that the unloaded picture element is in the visible region as the target picture element.
4. The picture loading method according to claim 2, wherein the target picture element comprises a picture element of which the full range and/or the partial range enters the visual area.
5. The picture loading method according to claim 2, further comprising, after the determining that the picture element to be loaded is the target picture element based on the page scroll speed of the current page: Detecting whether the target picture element has a next picture element or not based on the original picture layout sequence; and if the next picture element exists, preloading a picture corresponding to the next picture element when the loading of the target picture element is completed.
6. The picture loading method according to claim 1, wherein the optimal compression rate format of the terminal device is a picture format with a highest compression rate supported by the terminal device, and the picture format includes at least one of webp, avif, heic.
7. The picture loading method according to claim 6, wherein before the converting the first target picture into the optimal compression rate format supported by the terminal device by the object storage service, obtaining the second target picture, the method comprises: inquiring whether the local cache stores an optimal compression rate format supported by the terminal equipment or not; and if not, determining the optimal compression rate format according to the picture format supported by the terminal equipment, and storing the optimal compression rate format in the local cache.
8. A picture loading apparatus, comprising: the acquisition module is used for acquiring picture addresses of all first target pictures of the current page when the current page is loaded; The conversion module is used for 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, wherein the object storage service has picture format conversion and cutting capabilities; The first determining module is used for determining Shan Binggao degrees based on the screen size and the picture rendering rate of the terminal equipment and traversing and judging whether the picture height of the second target picture is larger than Shan Binggao degrees; The processing module is used for cutting the second target picture into a plurality of block pictures based on Shan Binggao degrees through the object storage service if yes, otherwise, not processing the second target picture; The creating module is used for creating a picture element, storing the picture address of the block picture and/or the second target picture which does not need to be cut into the custom attribute of the picture element, and rendering the picture element to the current page according to the original picture layout sequence; The second determining module is used for determining the picture element to be loaded as a target picture element based on the page rolling speed of the current page; and the loading module is used for reading the picture address in the custom attribute of the target picture element, and loading and displaying the picture corresponding to the target picture element based on the picture address.
9. An electronic device comprising a memory, a processor and a computer program stored on the memory and executable on the processor, wherein the processor implements the picture loading method according to any one of claims 1 to 7 when the program is executed by the processor.
10. A non-transitory computer readable storage medium, on which a computer program is stored, characterized in that the computer program, when executed by a processor, implements the picture loading method according to any one of claims 1 to 7.

Description

Picture loading method and device, electronic equipment and storage medium Technical Field The present invention relates to the field of image loading technologies, and in particular, to a method and apparatus for loading an image, an electronic device, and a storage medium. Background With the enrichment of front-end application content, pictures (especially long pictures, very long pictures) have become core presentation elements. In the prior art, the picture loading mostly adopts a layered loading scheme, and the picture is gradually loaded according to the priorities of the outline, the color and the detail according to a visible area detection mechanism, but has obvious defects: On the one hand, long pictures or extra long pictures can be displayed after the complete picture transmission is completed, so that the first screen white screen time is long and the user experience is poor, on the other hand, the existing scheme can not dynamically adjust the compression strategy according to the picture format supported by the equipment, and only the common format transmission is adopted, so that the traffic waste is caused, for example, the equipment supporting the high compression ratio format (such as avif) still loads jpg format pictures with larger volume. Disclosure of Invention The invention provides a picture loading method, a picture loading device, electronic equipment and a storage medium, which are used for solving the defects of slow loading and flow waste of a long picture in the prior art, realizing picture format self-adaptive equipment and fast loading of the long picture in blocks, shortening the first screen display time and reducing the flow consumption. The invention provides a picture loading method, which comprises the following steps: When a current page is loaded, obtaining picture addresses of all first target pictures of the current page; Converting the first target picture into an optimal compression rate format supported by terminal equipment by using an object storage service to obtain a second target picture, wherein the object storage service has picture format conversion and cutting capabilities; determining Shan Binggao degrees based on the screen size and the picture rendering rate of the terminal equipment, and traversing and judging whether the picture height of the second target picture is larger than Shan Binggao degrees; if yes, cutting the second target picture into a plurality of block pictures based on Shan Binggao degrees through the object storage service, otherwise, not processing the second target picture; Creating a picture element, storing the picture address of the block picture and/or the second target picture which does not need to be cut into the custom attribute of the picture element, and rendering the picture element to the current page according to the original layout sequence; determining a picture element to be loaded as a target picture element based on the page rolling speed of the current page; And reading a picture address in the custom attribute of the target picture element, and loading and displaying a picture corresponding to the target picture element based on the picture address. According to the image loading method provided by the invention, the image element to be loaded is determined to be a target image element based on the page rolling speed of the current page, and the image loading method comprises the following steps: monitoring a rolling event of the current page, and obtaining the page rolling speed by calculating the rolling distance and time difference of the rolling event; judging whether the page rolling speed exceeds a preset threshold value or not; If yes, returning to the step of judging whether the page scrolling speed exceeds a preset threshold value, otherwise, detecting the picture element in the visual area of the terminal equipment through a front-end visual area detection algorithm, and determining the picture element as the target picture element. According to the image loading method provided by the invention, the image element in the visual area of the terminal equipment is detected by the front-end visual area detection algorithm, and the image element is determined to be the target image element, and the image loading method comprises the following steps: Obtaining the boundary coordinates of the view port of the visual area; Acquiring position coordinates corresponding to unloaded picture elements; and if the position coordinate of any unloaded picture element is within the range of the view port boundary coordinate, determining that the unloaded picture element is in the visible region as the target picture element. According to the image loading method provided by the invention, the target image element comprises the image element with the whole range and/or partial range entering the visible area. According to the image loading method provided by the invention, after determining that the image element to b