+ 12

New loader for latest code

I need help in making a loader for my new code because the current method I have used is very illogical. But, I have no idea about loaders. Please help. https://www.sololearn.com/post/73229/?ref=app I still have to optimize it and replace JS with JQuery. (still learning, heard it was simpler)

12th Mar 2019, 12:42 PM
Kainatic [Mostly Inactive Now]
Kainatic [Mostly Inactive Now] - avatar
16 Answers
+ 5
1. Loading animations are basically applying different animation-delay on the same @keyframes An example by Mitali https://code.sololearn.com/W9yybV7enGug/?ref=app 2. Image has load event, text doesn't have. For details, refer to my communication with Robin Rademaker in my code demo in this Q&A https://www.sololearn.com/Discuss/1720719/?ref=app 3. Pretend to be preloader. Many codes are not using load event listener of images. Instead they are using setTimeout() in window.onload, to deceive the user with the visual effect only. 4. Quick example of Image Preloader Taste's demo for my Q&A https://www.sololearn.com/Discuss/1576262/?ref=app
18th Mar 2019, 3:29 AM
Gordon
Gordon - avatar
+ 7
Clash English please.
12th Mar 2019, 4:01 PM
Kainatic [Mostly Inactive Now]
Kainatic [Mostly Inactive Now] - avatar
+ 5
Gordon Actually the current method refers to the technique I've used as an alternative to a loader. I really have no idea about loaders so anything goes. I need it to load while the data is processing. Currently, the JS function I've used is window.onload() which is called only when all data has finished loading. I want to display the loader till that time. It will be better if it's a percentage loader.
17th Mar 2019, 4:39 PM
Kainatic [Mostly Inactive Now]
Kainatic [Mostly Inactive Now] - avatar
+ 5
𝕯𝖊𝖈𝖎𝖒𝖎𝖘 ~ Decimis Yeah, I had checked. Mind answering the question?
17th Mar 2019, 5:06 PM
Kainatic [Mostly Inactive Now]
Kainatic [Mostly Inactive Now] - avatar
+ 5
(continue after word limit) 5. Full tutorial step by step (yet to code) Basically, you need to create a global counter, Increment it in the load event listener of each image, and fires a callback when the counter reaches the number of images. 6. Lazy loading Apart from preloading, there is lazy loading. Preloading is for eliminating user's wait time when viewing the webpage, lazy loading is for reducing user's wait time before viewing the content. A resource shared by Morpheus about lazy loading : https://imagekit.io/blog/lazy-loading-images-complete-guide/ 7. Why mark own answer best? When I see best answer marked, I'll just skip the Q&A. That's why I won't know your question is not solved if Morpheus didn't tag me. Is your behavior for some sololearn badge? If so, please don't mind these virtual achievements, which you cannot take away from Sololearn. 8. Psycology tricks of tech app Here is a reading for you: https://www.vox.com/platform/amp/2018/8/8/17664580/persuasive-technology-psychology
18th Mar 2019, 3:32 AM
Gordon
Gordon - avatar
+ 5
Gordon 1. Thanks for all the help. Could you please give me an example of the load event listener? 2. I think the lazy loading of images would help my case. Could you please help me out in that bit? 3. I marked my answer the best so you won't have any problem finding it since it says on top. I don't go after the badges much since I'm here to learn and improve, and help others like me. The community here is great. 4. I mark the question with a solved tag when I get a satisfactory answer. This way I could use the best answer tag as a bookmark of the answers till the question is not solved.
18th Mar 2019, 7:00 AM
Kainatic [Mostly Inactive Now]
Kainatic [Mostly Inactive Now] - avatar
+ 5
Here are a vanilla js way to lazy load resources applied to Morpheus code. Lazy load refers to the technique of delay loading of resources(often images) only when needed(for example as you scroll down the page). BTW you can find useful this vanilla js solution callback when the resource is ready. Use the load event of windows instead of the click event if you want to load resources immediately. https://code.sololearn.com/WAr0s6TK3dI7/?ref=app
18th Mar 2019, 7:13 AM
AZTECCO
AZTECCO - avatar
+ 4
Hello, I want to help, but I read your code and I don't see any loader, so I am not sure why in your question, you say "the current method I have used is very illogical". Can you clarify about this? Also, can I know the type of loading you want to make. Is it only the animation? Is it a pretend-to-be loader which actually is a timeout? Or a functional image proloader?
17th Mar 2019, 4:31 PM
Gordon
Gordon - avatar
18th Mar 2019, 4:14 AM
Calviղ
Calviղ - avatar
+ 3
Before window.onload run, it's not possible to have any DOM elements ready, since all the DOM components are being processed. Loader of course is one of the DOM components that being processed there too.
18th Mar 2019, 3:34 AM
Calviղ
Calviղ - avatar
+ 1
Google translates the Russian to "hello" and "how are you"...
17th Mar 2019, 5:04 PM
Decimis † 𝕯𝖊𝖈𝖎𝖒𝖎𝖘
Decimis † 𝕯𝖊𝖈𝖎𝖒𝖎𝖘 - avatar
+ 1
To be honest, I didn't even read the original question at first 😅. I came here by clicking on Gordon 's comment on your post which was in my feed. As for answering, both you and Gordon are more experienced and knowledgeable than I am. I would have to start my own "loader" research from scratch. So the only advice I can give you is to look at other people's codes and see what they did. I'm sure I've seen a few with a loading animation here and there.
17th Mar 2019, 5:39 PM
Decimis † 𝕯𝖊𝖈𝖎𝖒𝖎𝖘
Decimis † 𝕯𝖊𝖈𝖎𝖒𝖎𝖘 - avatar
- 1
Привет
12th Mar 2019, 3:55 PM
Clash
- 1
Как дела
12th Mar 2019, 3:55 PM
Clash