Asset Loading & Management

Relevant source files

The following files were used as context for generating this wiki page:

• index.html
• js/myJs.js
• css/style.css
• css/spinload.css
• img/iput-bg.jpg (Referenced in JS lines 33, 98, 110)

The Asset Loading & Management system handles the retrieval, prioritization, and display of static resources required by the application. This includes external libraries, local stylesheets, media assets (images and audio), and the orchestration of a preloading sequence to ensure a consistent user interface state before interaction.

The system ensures that heavy assets, such as background images and scripts, do not cause layout shifts or broken UI elements during the initial render. It achieves this through a dedicated preloader overlay that remains active until the document is ready and a specific timeout has elapsed.

Initialization and Preloading Sequence

The preloading sequence blocks the user interface until essential components are ready. A fixed-position overlay #preloader covers the viewport with a high z-index, displaying a CSS-based animation.

Loading Flow

The following diagram illustrates the sequence from initial request to the interface being interactive:

The loading animation consists of five vertical rectangles (rect1 through rect5) that animate using a scaling transformation defined in css/spinload.css.

Sources: index.html:26-37, css/spinload.css:2-10, js/myJs.js:18-26

Static Asset Management

The project categorizes assets into external dependencies, local styling, and media.

External Dependencies

External assets are loaded via Content Delivery Networks (CDNs) to leverage browser caching.

Asset Type	Provider	Purpose
CSS	Bootstrap 4.3.1	Grid system and button styling
CSS	Google Fonts	Pacifico font for headers
JavaScript	jQuery 3.4.1	DOM manipulation and event handling
JavaScript	Popper.js	Tooltip/Pop-up positioning
JavaScript	SweetAlert2	Custom dialogs and alerts

Sources: index.html:15-22, index.html:59-71

Local Media Assets

The application manages local images and audio files used for backgrounds and user interaction feedback.

Asset	Path	File Used In	Implementation
Background	img/puung3.jpg	css/style.css	CSS background-image with 4px blur
Popup Image	img/cuteCat.jpg	js/myJs.js	SweetAlert2 imageUrl parameter
Input BG	img/iput-bg.jpg	js/myJs.js	SweetAlert2 background property
Gif	img/giphy2.gif	js/myJs.js	SweetAlert2 backdrop property
Audio	sound/sound.mp3	index.html	HTML5 <audio> tag with autoplay

Sources: css/style.css:16-29, js/myJs.js:31-33, index.html:56

Dynamic Resource Configuration

A centralized object, textConfig, manages all string-based assets and content markers. This allows for rapid modification of the UI text without altering the HTML structure.

const textConfig = {
  text1: "He luu cậu!",
  text2: "Tớ có điều này muốn hỏi cậu nhớ phải trả lời thật lòng nhaaa:3333",
  // ...
  text9: "Vì cậu đẹp try và dthuong vlll:>>",
  // ...
};

Sources: js/myJs.js:1-14

Execution Logic for Visual Assets

The transition between loading states and interactive content is handled within the $(document).ready() block.

1. Visibility Control: The preloader is hidden using fadeOut() after a 600ms delay to ensure the browser has finished the initial painting.
2. Audio Triggers: Sound assets like sound/duck.mp3, sound/Swish1.mp3, and sound/tick.mp3 are instantiated dynamically via the new Audio() constructor during specific user events (e.g., button movement or clicks).
3. UI Content Mapping: Text assets from textConfig are mapped to DOM elements using jQuery's .html() method immediately after the preloader starts its exit sequence.

Sources: js/myJs.js:18-29, js/myJs.js:46-47, js/myJs.js:60-61, js/myJs.js:93-94

Summary

The Asset Loading & Management module uses a CSS-heavy preloader (spinload.css) and a JavaScript-driven initialization routine (myJs.js) to coordinate the display of resources. By separating string assets into textConfig and utilizing a mixture of local and CDN-hosted files, the system maintains a responsive interface that hides loading artifacts from the end user.