Ways to incorporate a dictionary into your website's content

I am in the process of developing a website for educational purposes while also honing my web programming skills. On this website, I have encountered some complicated terms that may be difficult for users to understand, so I want to implement a tooltip/modal feature to provide explanations. You can view the prototype of my website here: . Remember to click on Chinese words highlighted in blue to see the modal.

While browsing on Stack Overflow, I came across a helpful thread about implementing tooltips for mobile browsers. You can check it out here: Tooltips for mobile browsers.

Here is my current approach:

  • I have a JSON file serving as a dictionary.
  • Another JSON file contains the text content to display.
  • When the front end requests data, Node.js sends both files. The frontend JavaScript then displays each word by looking it up in the dictionary and creating an HTML span element. Users can click on a word to reveal its meaning in a popup.

However, since implementing this method, I have noticed a slowdown in page loading time. I suspect there may be an issue with my implementation, especially considering that I plan to add more text in the future.

I am seeking advice on alternative methods to achieve the same functionality.

The website that has inspired me in this endeavor is:

I hope my explanation is clear. Thank you for your help.

javascripthtmlcssnode.jsjson

Answer №1

It's true, the loading time for the page is quite slow due to the size of the JSON object at , which is almost 600KB and takes about half a second just to download. The most time-consuming part of the process is rendering the entire JSON object itself.

If you're unfamiliar with it, I recommend exploring the developer tools available in every browser. Chrome's network and performance tabs are great starting points to understand where exactly the loading time is being spent on the page.

If you're seeking a general guideline, consider only rendering a portion of the JSON object at a time or breaking it down into smaller segments.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ensure your Vue components have type-checked props at compile time when using TypeScript

I have encountered an issue while using Vue.js with Typescript. The code I am working with is pretty straightforward, utilizing vue-class-component and vue-property-decorator. <script lang="ts"> import { Component, Prop, Vue } from 'vue-pro ...

javascripttypescriptvue.jscompilation

Determining the measurements of an svg path without relying on the bounding box

Is there a way to retrieve the dimensions of an svg path and showcase it within a div without relying on the bounding box method? I've noticed that the bounding box can be buggy in Webkit especially with bezier curves. Just so you know, I am currently ...

javascripthtmlsvgjquery-svglibrsvg

The left join in D3 mapping is causing an issue as it is returning null values, which is halting the progression of the data processing for the next steps

Currently, I am working on D3 state-level mapping. While processing the data, I encountered an issue. The map data is structured as follows (dat1.ndjson): {state: a, code: aa} {state: b, code: bb} {state: c, code: cc} However, not all information is comp ...

jsoncommand-lineleft-joinjqndjson

What is the best way to add a single space between numbers in a JSON string using Java?

Within the code snippet below, I am constructing a JSON string using gson: private String generateData(Map<String, Map<Integer, Set<Integer>>> nodeTable, int i) { JsonObject jsonObject = new JsonObject(); Set<Inte ...

javajsonregexstringgson

How can I retrieve the most recent 500 entries from a PHP object?

Is there a way to retrieve the last 500 values of an object in PHP, instead of just using the end() function for the last value? I have a large dataset with thousands of entries that I want to display on a frontend graph. However, I only need the most rec ...

phparraysjsonlaravelobject

My JavaScript functions are not compliant with the HTML5 required tag

I am currently developing input fields using javascript/jQuery, but I am facing an issue with the required attribute not functioning as expected. The form keeps submitting without displaying any message about the unfilled input field. I also use Bootstrap ...

javascriptjqueryhtml

Tips for utilizing the nth-child selector to exclude hidden divs

I am facing an issue with displaying random blocks in rows. Each time a block falls into a new row, I want it to have a different style. However, when the user clicks on a button to hide certain blocks using display:none, the problem arises because the nth ...

javascriptjqueryhtmlcsscss-selectors

Failure of Jenkins build when running the yarn bin lerna command

Attempting to utilize the yarn bin lerna command in a Jenkins pipeline is resulting in failure due to an attempt to fetch/update package git repository with ssh credentials. This is being done within a multibranch project using the following Jenkinsfile: ...

node.jsgitjenkinsyarnpkg

The Express.js session seems to disappear after approximately 3 minutes

I am using express.js and React in my project. I encountered an issue where after a successful login, the user_id is stored in the session but gets lost after 2-3 minutes causing me to be logged out when I refresh the page. Below is my server.js file: var ...

node.jsexpresssessionserver-side

PhpStorm 2019.2 introduces Material UI components that have optional props instead of being mandatory

My PhpStorm 2019.2 keeps showing me a notification that the Button component from Material UI needs to have an added href prop because it is required. However, when I refer to the Material UI API, I see something different. Take a look at this screenshot: ...

javascriptreactjstypescriptphpstormmaterial-ui

Having trouble displaying HTML UL content conditionally in Reactjs?

My goal is to display a list of items, limited to a maximum of 5 items, with a "more" button that appears conditionally based on the number of items in the list. However, I am encountering an issue where passing in 5 li items causes them to be rendered as ...

javascriptreactjs

Refresh the display after adding an item to an array in Angular

Currently, I am facing an issue with updating the view based on adding an item to an array of objects through a click handler. While the item is successfully pushed into the array, it does not reflect in the view. I am wondering if placing the method withi ...

javascriptangular

What is the best way to retrieve a state variable within the getServerSideProps() function in NextJS?

Introduction Greetings everyone, I am a newcomer to NextJS. Currently, I am in the process of developing a weather application that utilizes external APIs. My main task involves fetching data from an API and displaying it on the frontend. Desired Function ...

javascriptreactjsnext.js

Transform an array containing objects into a single object

Currently exploring the Mapael Jquery plugin, which requires an object to draw map elements. In my PHP code, I am returning a JSON-encoded array of objects: [ { "Aveiro": { "latitude": 40.6443, "longitude": -8.6455, ...

javascriptphpjqueryarraysjson

Transfer information to a different division using Ajax

I am attempting to transfer data to another div after an Ajax refresh. Each time it refreshes, new data is fetched from the database. My goal is to retain the old data displayed in the first div, store it, and then move it to the second div when Ajax refre ...

jqueryhtmlajax

What is the best way to display JSON data in a Listview control?

What is the best way to display JSON data in a list format? Currently, I am able to retrieve JSON data and display it in an alert dialog. The JSON data looks like this: [{"_id":"5449f20d88da65bb79a006e1","name":"name3","phone":"888888","service":"service ...

javascriptjqueryjsontitanium-mobile

Fixed position scrollable tabs with Material UI

I recently implemented material-ui scrollable tabs in my project, referencing the documentation at https://mui.com/material-ui/react-tabs/#scrollable-tabs. Here is a snippet of the code I used: <Tabs value={value} onChange={handleChange ...

javascriptcssreactjsmaterial-ui

Combining JS Promise.all with onDOMContentLoaded to ensure all resources are

Is there a way to efficiently retrieve a json file for data while also waiting for the dom to load in order to populate a table simultaneously? The current method I am using is slow as it waits for the dom and then performs the get request. $(document).r ...

javascriptjqueryasynchronouspromise

PHP echo functions are not functioning properly in a dynamically loaded PHP page through jQuery's .load function

Within my WordPress installation, I have index.php and desktop.php files. The goal is to load desktop.php into #tLoad only if the browser window width is greater than 800px. While this works fine, I am encountering issues when trying to use PHP functions a ...

javascriptphpjqueryajaxwordpress

Troubleshooting problems with AngularJS placeholders on Internet Explorer 9

On my partial page, I've included a placeholder like this: <input name="name" type="text" placeholder="Enter name" ng-class="{'error':form.name.$invalid}" ng-model="Name" required /> I have also set up client side validation for the ...

javascriptangularjs