2

I'm trying to create a website for learning, and learning web programming meanwhile. Inside of the website, there are some words that are hard to understand, so I wish to put a tooltip/modal to explain the meaning. Here is the prototype of my website: http://findmyself.herokuapp.com/ . Click on chinese word in blue, to see the modal.

While searching on stackoverflow: Tooltips for mobile browsers , I currently have something working.

This is what I'm doing right now.

  • a json file as dictionary.
  • a json file with the content of the text to display.
  • When the front end asks, nodejs send both files. When frontend javascript display on the browser, each word I print on the screen I have to look up into the dictionary and create a html span for the word. So when the user click on the word, its popup the meaning.

The problem is, since i did that, I feel somehow the page is slow to load. I think there is something wrong with my way of doing. And i will have a lot of text later.

I wish to know if there is another way of doing it.

And this is the website that inspire me: https://thuvienhoasen.org/p27a16641/48-dai-nguyen-cua-duc-phat-a-di-da

I hope I'm clear enough. Thanks.

Amida
  • 33
  • 4

1 Answers1

0

You're right, the page is pretty slow to load. It's partly how large the JSON object is at http://findmyself.herokuapp.com/dtq/theory. It's nearly 600KB and takes a half second on its own just to download. But probably the slowest part of the page is how much time it takes to render that entire JSON object.

If you're not already familiar, I'd suggest checking the dev tools that are included in every browser, chrome's network and performance tabs are a good place to start if you're interesting in exactly where the time goes when the page is loading.

And if you're looking for more of a rule of thumb, a good place to start would be to only render some of the JSON object at once, or split that object into smaller parts.

worc
  • 3,654
  • 3
  • 31
  • 35
  • Great thanks. Usually I used the chrome dev tool inspect and console to see the html code. For the other tabs, I tried, but I didn't find the use of them for my case, so I let them go. Now some words from you, make me find the use of two more tabs. Thanks. Now I see the problem and the cause more precisely, but still unclear for the solution. Right now, I'm browsing the stack overflow for dictionary implementation, to find some inspiration – Amida Feb 08 '19 at 14:06
  • Thanks i got it works. With your rule of thumb and this thread https://stackoverflow.com/questions/5020351/how-to-load-the-web-page-content-based-on-user-scrolling, I finally get it. As you said, I modified the render of the json object into small parts. There is still some bug left, like the search can't find data that were'nt render, but i can live temporarily with that. Thanks for all. I make this as solve. – Amida Feb 10 '19 at 04:14