in the case of slow loading of the page, the page has not yet been loaded, and the pages of some websites have been processed as shown in the following figure, and the rough outline of the content of the article has come out. Excuse me, what is this operation, and how does the front end realize this function? If you would like to know the answer, thank you
keywords skeleton screen , you can search for the specific implementation method
this is a skeleton screen prompt in loading. Compared with a circle that is turning all the time, the prompt in loading can give users a more intuitive sense of the structure and layout of the content. After the data is loaded, it will be replaced with real text and pictures. The transition will also be more peaceful.
personally, I think this design is relatively novel and more suitable for the display of list-type slightly complex structures. According to my observation, many websites and app use this method, such as: ele.me H5 end, QuoraAPP, Alipay APP and so on.
for the front end, the easiest way to implement this function is to fill it with div according to the structure you want, plus the background color and so on.
answered a similar question before, and the code is now missing.
I've also been thinking about writing one of these plug-ins in canvas or svg to do this kind of load hint. After it has been written, I can recommend you to try it again.
Bone frame, ele.me. That's it
Skeleton diagram means preloading
scope of application: request data through the interface in front and back end separation mode, due to the delay caused by the request, in order to improve the user experiencefor pages that require seo, we output them through the back-end template engine, so it is not very suitable for preloading
.
the above is my personal opinion, welcome to correct
Previous: How does mysql query a field name whose value is a certain number?
Next: When the css roll slips down, the back background will also slide.
o ...
the onclick (), that clicks the arrow wants to call oil.prototype.createChart=function (oilRealtable,objId,meteId) {}, Please let me know ...
I use electron to package my parking program. linuxwindowscpu windows ...
although there is no pc page written on the mobile phone page, why is there so much blank space? there is nothing . https: mamba-working.github. preview address is here ...
as shown in the figure, add a click event to the three microphone buttons on the right. Previously, you can add a click event to each button, but now you want to add it in the way of event delegation, how to achieve it? The code is as follows: <...
superagent .get( http: passport.chinahr.com ajax m existLoginName ) .query( input + "=" + 15800000000) .end(function (err, response) { console.log( , response.body, err) }); request .get( http: passport.chinah...
I follow the demo code provided by i18next const i18next = require( i18next ); const i18m = require( koa-i18next-middleware ); add custom detector. i18m.LanguageDetector.addDetector({ name: mySessionDetector , lookup(ctx, options)...
the px2rem plug-in is used in vue, and then the picture or icon will be blurred when flexbile, adapts to a specific model. How to deal with this situation ...
recently do a react project, the first contact, there is a left slip event, I would like to ask how to add left slip event for react. The end result is a sideslip deletion. If there is any great god who knows, give me some guidance. Thank you, urgent ...
the data in the score section of ...
on the above plug-in, in order to graphically count, from the big circle, jump to how many small circles, is similar to the timeline plug-in, but this is from one, pointing to multiple branches, the timeline is a back row want to search for a plug...
where can I upload the video, and then take the outer link and put it on the video tag, preferably without advertising? is now uploaded to Qiniu, but the video cache is too slow (because you are using the test domain name), so ask if there are other pla...
recently, there is a project that needs to do an app scan to identify the ID card, which requires that after the first picture is taken, the image is compressed by an asynchronous thread, and then api, is called to be identified by the background ocr and...
var arr = []; arr.toString = = Object.prototype.toString false ...
how does the scroll bar beautification component of element ui set the scroll bar to display one by one? The data update scroll bar becomes? ...
h5 technology achieves this effect. It feels like c3 or jq can be done completely, but the sliding event is not very good. Is there any good way to feel that there will be bug, without using the ui framework? ...
defines a value in the setInterval () method so that x-= 1; secondLength = 60; setInterval(function(){ console.log(secondLength); secondLength -= 1; setDefault(secondtx,secondLength) },1000); looks like this. It is correct in t...
question: in an h5 mobile page, has such a parent-child relationship: sliding elements up and down = > left and right sliding elements = > Click elements if there are sliding up and down (drop-down refresh), left and right sliding (rotation switch...
these data are all sent from the background STATUS 0 indicates auditing STATUS 1 indicates normal STATUS 2 indicates locked status but now I don t know how to change it to Chinese, how to do it? <tr v-for="(item,index) in infoData&quo...
bootstrap-table rendering table, specify the width of the column, more than the width of the ellipsis display, require the mouse up to be similar to title to display the whole content? The rendering table code is as follows ...