How to optimize when there are a large number of pictures on H5 page

problem description

A mobile page whose main content is displayed through images. It takes time to load for the first time. The first screen image is about 300k.

the environmental background of the problems and what methods you have tried

1. Lazy loading, currently using the way of window.onload, delayed loading of pictures. Because the page has navigation components, need to quickly locate to the specified location, rolling lazy loading tried, the effect is not ideal, was rejected by visual students;
2. Compression, all the pictures have been compressed through the tool, but the mention is still around 2MB, and then the pressure is estimated to be pasted. no, no, no.

if there are any bosses who have similar experience, ask for advice.

Javascript html css

Jan.01,2022

usually do this and summarize the following points:

Compression: compression is certain, but I don't know how you compress it. 2m images are horrible. tinypng try to see if there is any better compression.
CDN: spends some money on CDN , such as Qiniu, and there is still a little free space
load pictures at screen resolution? @ 1x figure, @ 2x figure
lazy loading: load again when you enter the visual range, and you need to quickly locate to the specified location, so add a scroll animation to delay the time for the user to arrive at the specified image, and take advantage of the opportunity to load
increase bandwidth: increase server bandwidth

as above, these are the usual summary points, some of which may be superimposed, such as compression , CDN , and some points are mutually exclusive, such as CDN , server bandwidth . As for your case, first try Compression , CDN , increase bandwidth as well as CDN , @ x figure can be achieved with CDN predefined styles.

so CDN Saigao, CDN is sometimes not called by this name, sometimes it is called OSS , Qiniu, Aliyun, Tencent Cloud basically provide this function, our company put the entire static site on CDN , the speed is touching.

Previous: Find a vscode plug-in with screenshots

Next: Django request.session returns the json object after assigning a value. Why does the background not report an error but the front end cannot receive it?

Js interview questions, seek analysis. The more detailed the better.
for parsing, a.b and a [b] are both written to get object properties. But the difference is that the b of a [b] can only be a string. how does the following code parse, and why is the output value 345345333? var a = {}; var b = {key: b }; var c ...

Javascript html css node.js html5

Feb.28,2021
Checkbox selected event
how can I implement the other checkbox, that is unselectable and clear the previously selected checkbox, when I click 2018 to plan the layout? ...

Javascript html css

Mar.02,2021
Layui table sorting problem
Analog data can be sorted the server will report an error upon request....

Javascript html css php

Mar.02,2021
What is the problem of swiper video.js sliding on mobile?
swiper player is used for page sliding. Video.js is based on nuxt server rendering . Now there is such a problem. When the page slides left and right, the player always fails to follow the page sliding in time and always lags behind. there is no pro...

Javascript html css

Mar.03,2021
Draw away from the style module how to write, say the train of thought
for example, how to answer this interview question ...

Sass javascript html css

Mar.03,2021
Why does the child element absolute cause positioning changes when the parent element is relative?
I set the parent element to relative and the child element position to absolute positioning, but why does the font position change relative to the background when I zoom in and out? In the screenshot below, you can see the zoom in and out of the page, a...

Html5 javascript html css

Mar.04,2021
I would like to ask how to achieve the following effect, move the mouse over the picture to show a complete text description
as shown in the picture, the effect is that the mouse moves over the picture, the picture is hidden, and the corresponding introduction is displayed. <li> <div><img src= >< div> <div>< div> < li>...

Javascript html css

Mar.05,2021
Why do I add height, to other parts to make the overflow:auto of adjacent parts work?
at first I didn t write the CSS and HTML of the main area the following code is the sidebar CSS, page effect as shown in figure 2 main ...

Html5 javascript html css

Mar.06,2021
How to install the vue framework in the beego framework?
...

Sass javascript html css

Mar.09,2021
Error when setting className, with js to dynamically change arrowhead style for multiple entries
ask God to debug https: codepen.io xyj pen KR. without changing the drop-down arrow toward the time effect chart. everything is fine, click the entry for details. Now I want to change the direction of the arrow when the details appear. So I want ...

Javascript html css

Mar.11,2021
IOS mixed development, get the focus to pop up the keyboard page to jump up! 0 0.
Environment : ionic1.3.4 problem description : when the focus is located in the input field, the page jumps up and down. (seaweed) the beating process of is not cyclic; the closer the is to the keyboard, the greater the amplitude is. I think th...

Javascript html css

Mar.12,2021
Execution order of js operation DOM and other JS code in browser
the following code: document.querySelector(".div-bgd").style.display = "block"; document.querySelector(".load_div").style.display = "block"; console.log(1) alert(1) In the browser environment, why execute conso...

Javascript html css

Mar.12,2021
How to use the index.html file as the entry file to package?
in general, take the html file as the entry, automatically find dependent images, css and js, and then name and package them with hash. The referenced images of the new html file, css and js, will be changed to the new name with the hash code. I have ...

Webpack webpack4 javascript html css

Mar.13,2021
In vue, what should I do when I click on a component, add styles to that component, and erase the styles that I clicked on other tabbox components before?
vuetabboxtabbox <template> <div :class="tabStyle" :style="boxstyle" @click="tabClick(name)"> {{name}} <div class="selected-icon" v-show="isSelected">< div> ...

Javascript html css

Mar.13,2021
Js calls object properties and encounters a very strange thing.
: ajaxresonseJSONundefined A piece of meat is right in front of you, but you don t have the heart to hit people. ...

Javascript html css

Mar.14,2021
WeChat Mini Programs put the obtained values into the array, but the resulting array did not get the values and did not know how to ask for advice.
I got value, but push it into the history array. There is no value in history searchinto(e) { console.log(e) const value = this.data.search.content; const history = this.data.history; console.log(value); history.push[value]; ...

Javascript html css

Mar.14,2021
Blink when the mouse is slipped out
The DIVHTML: plug-in is AngularJS. ...

Javascript html css

Mar.14,2021
What processes and tools do senior front-end engineers have when developing traditional pages?
there is usually a fixed process when developing a SPA like Vue, such as scaffolding to generate npm dependencies, then install dependencies, personalize Webpack configuration, jslint configuration, and then start writing components and so on. what ar...

Node.js html5 javascript html css

Mar.16,2021
How to request an API only once for uploading multiple files by el-upload
< el-upload class="upload-demo" ref="upload" :action="url" name="Content" :data="form" :on-rem...

Javascript html css html5

Mar.18,2021
How to intercept irregular strings
for example, I have a dynamic string like 1232 {Button 1} {Button 2} 765432 (variable length). How can I get 1231 and {Button 1}, {Button 2}, 765432? ...

Javascript html css html5 java

Mar.19,2021