I have 45 small images, each of which is about 1-3kb, which needs to be displayed once on the page. Whether I make a sprite image to display with a background image or directly convert it to base64 and display it with an img tag, which has better performance. Please analyze it
your situation should be better than sprite. One card is 2k, there is also 90k, a load can be cached locally. Because html is generally not cached, img has to be reloaded every time you put it. In addition, bese64 will increase the volume by about 1 stroke 3.
generally speaking, I am a sprite for a whole set of small icons, and some scattered ones that are not in the whole set will use a base64. A project with a total of several small icons will also use a base64
. It is hard to say that a sprite image integrates multiple small images into a large image, and there is an asynchronous request to fetch an image. Base64 is to attach resources directly to css or html, without additional requests, but css or html files become larger. To sum up, relatively speaking, when loading a large image, the performance of the sprite may be better (the html page is faster), and vice versa is base64.
use the img tag to display sprite images? No one seems to do this. How do you locate background if you have position,img? Of course, maybe the latest technology can implement
div1 {display: none} div2 {display: none} div3 {display: none} div4 {display: none} div5 {display: none} setTimeout (function) { var obj=document.getElementById ( "div1 "); obj.style.display= "inline "; }, 2000) how to display with settimeout...
in the official document, navigationbartitletext can only set the properties of the top bar in the json settings file. Under real machine debugging, the top bar text automatically runs to the far left side of the phone. How to set the top bar to center l...
I have registered the same losing focus event function for each Input, and passed some unique parameters. If I just execute the event function, I can t get these parameters, and I want to trigger all of them. Is there any good way to do this? ...
which mobile adaptation method is better for a company to make an app,h5 page with an Android built-in H5 page? ...
typesetting on the computer is full of pages, on the mobile phone, the font has become smaller, there is a lot of white space below. css attribute font-size:12px; how can I make the text on my computer and on my phone the same size? page heade...
newJson subNames: [ Code ...
I wrote a page to swipe up and down the page, and when I put my finger in the div range with content in the middle, I disabled the touchmove event, using { e.preventDefault() ...
are all 100% wide! In the picture above, 7p solve ...
as shown in the figure, we have a requirement that we will embed a large number of different lengths of DIV2, in DIV1 (similar to a viewport). I need to know the distance from the top edge of the DIV2 to the top of the viewport (x), and the distance fro...
upload is fine when a place is used uploaderfiles uploadfiles upload.vueFilesAdded which god friend can give me a solution? ...
I saw in Google s network that js has been loaded after the jump, but the js, has not been executed on the new page. Why? what should I do ...
the code is as follows: <style> .cancel-btn { background: -sharpccc; color: white; padding: 1em; } < style> < head> <body> <h1>Testing< h1> <spa...
as shown in the picture, make a video player requirements are: when clicking on a list of video columns, play the video of the corresponding address, and then change the viewing state from that time of 05.32; ask the god how to control this single...
for example, I want to find out which functions are executed when a web page is triggered by a shutdown event. How can I find out this quickly? Does chrome s developer tools provide this kind of functionality? (the web page is someone else s, not my ow...
the picture captured with html2canvas is missing part of the content than the original web page. Does have anything to do with setting up position:absolute and z-index on the original page? the effect is shown in the figure table and img ar...
00:00 ...
I have defined two < input > input boxes in Vue component. I want to bind the value of these two input boxes to the parent component with v-model, but I have only found a way to bind one. What should I do if I bind two each? the following code changes...
as mentioned in the question, how should the web page annotation function of the website be realized? (note: it is not similar to screenshot editing of a web page. If the text in the site can be annotated, the user can see it next time after the annotati...
it uses vue+axios to send requests and the memory will rise by more than ten kilogrammes. What s going on? It has never been downgraded, it is just a simple post request. ...
var bodyHeight = document.documentElement.clientHeight; var oCardbox = document.getElementById( cardbox ); var oCardfoot = document.getElementById( cardfoot ); var oCfheight = oCardfoot.clientHeight; oCardbox.style.height = bodyHei...