New loader for latest code

Question

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)

Answer 1

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

Answer 2

Clash English please.

Answer 3

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.

Answer 4

𝕯𝖊𝖈𝖎𝖒𝖎𝖘 ~ Decimis Yeah, I had checked. Mind answering the question?

Answer 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

Answer 6

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.

Answer 7

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

Answer 8

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?

Answer 9

Here a common css loader

https://code.sololearn.com/WUfqn8720oT6/?ref=app

Answer 10

Svg loader

https://code.sololearn.com/WyDfHqYEc50v/?ref=app
https://code.sololearn.com/W3TPnL3D34Ki/?ref=app

Answer 11

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.

Answer 12

Google translates the Russian to "hello" and "how are you"...

Answer 13

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.

Answer 14

https://code.sololearn.com/WgJfIUJ1tX7j/?ref=app