Transitioning between pages causes a delay in loading the background

Today as I was working on my CSS, I encountered some issues. I utilized Bootstrap and Darkstrap for designing. In Darkstrap, the style for the body is

body {
        color: #c6c6c6;
        background-color: #2f2f2f;
}

Meanwhile, in my own CSS:

body {
        background: url(../img/11.jpg) no-repeat fixed;
        background-size: 100% 100%
}

Although it appears fine, the only problem I face is that when switching pages, there seems to be an asynchronous loading (without page refresh), first applying the Darkstrap style, then after a second, loading my style. However, I have placed my CSS before Bootstrap and Darkstrap. And I did not refresh the page.

Ultimately, I included the body style from Darkstrap. Upon switching pages again, the body's background-color also completes after a second delay, creating an unsightly appearance. I understand that the image load may trigger an HTTP request and last during its loading process. But why does this happen when simply switching pages? Where could the issue lie?

Answer №1

Have you considered where you are placing your scripts and CSS files? Are they at the bottom of the page body?

A potential solution could be to relocate the script loading to the <head> section of the page. By doing this, everything will load before any content in the body. This ensures that your CSS and bootstrap styling are ready before any visible elements appear on the page. However, a downside to this approach is that it may give the impression of a slower page load.

While there may be other factors at play, this is the initial thought that comes to mind for resolving the issue.

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

Can a stroke in an SVG image be created using a gradient color?

Is it possible to create a gradient in the stroke color of these two lines, currently set to #389967, within this SVG? .chart-three svg .circle-foreground { stroke: #389967; stroke-dasharray: 494.55px 549.5px; stroke-dashoffset: 494.55px; stroke- ...

Having trouble selecting links in the navigation bar

Just getting started with HTML/CSS and designing a website with buttons. Got some buttons up and running perfectly fine. But now, I'm working on a navigation bar with anchors inside. The problem is that while I can see the anchors when I open the webs ...

Tips for increasing the number of pixels in the current position of an element?

I need to shift an image to the right by adding pixels to its current left position. The challenge arises when the image, positioned absolutely, goes back to its nearest relative parent (the container) and creates a strange visual effect. Within my flex c ...

What is the best way to create a gradual color change in each individual cell instead of changing all at once?

Looking for some help with a grid I'm working on. I've got the cells changing colors like I want them to, but they're all changing at once. What I really need is for them to light up in a specific order - Yellow, Green, Blue, White, Orange. ...

How to make text in HTML and CSS stay at the bottom of a div?

I am in the process of creating a website dedicated to my "Starcraft II" clan. My goal is to have the navigation bar display the text "ALLOYE" and remain fixed at the bottom of the screen. I attempted to achieve this using the following code: vertical-alig ...

Leveraging backstretch.js in combination with blur.js (or equivalent)

Query Update I provided a response to the query below, however, I am experiencing some lag and a noticeable stepped transition between images. Can anyone offer advice on how to optimize this issue? Perhaps it would be better to go back to using a static ...

Determine the image's position in relation to its parent element while factoring in any vertical offset

Within my HTML, I have arranged two images to sit adjacent to one another. Interestingly, one image happens to be taller than the other. Despite assigning a CSS property of vertical-align: middle to both images, the result is that the shorter image appears ...

Creating dynamic visual elements on a webpage using HTML: Video

As I continue to learn HTML, CSS, and JavaScript to create a basic website for educational purposes, I have successfully embedded a video stored in my drive using the video element on an HTML page. However, I now aim to also display the video's title, ...

Formatting that differs based on whether the content appears on the left

I'm in search of a solution to align specific items to the left on left-hand pages and to the right on right-hand pages. I have come across @page :left/:right, but it seems to only affect the page layout and margins, not the actual content on the page ...

What steps can be taken to ensure that the popover div remains visible when clicking inside it in a "dismissible popover" using Twitter Bootstrap with the data-trigger attribute set to "

I am struggling with a dismissible popover that contains a text box. When I click inside the text box to type, it disappears due to the "data-trigger="focus". Is there a way for the div not to disappear when clicked inside intelligently? Here is the releva ...

Extract the input value from the bootstrap-datepicker using JavaScript

I'm working on a Ruby-on-Rails project and I want to include a string from the bootstrap datepicker into a hidden field. However, I am unsure of how to reference an input class in this process. Below is the structure of my form: <%= simple_form_f ...

Centered item in Bootstrap navbar with others aligned to the right

Experimenting with ReactJS and Bootstrap 4 to create a customized NavBar. Seeking guidance on aligning elements in the NavBar, such as centering some and placing others on the right side. Particularly interested in positioning the logout icon on the righ ...

Center text within a dropdown using Bootstrap styling

In a row within my inline form, I have both an email input and a dropdown. However, after resizing the page, the text within the dropdown is no longer positioned correctly (text on the left, arrow on the right). I attempted to fix this by using: text-alig ...

Is it possible to utilize arrow functions in Vue while using style binding?

As I venture into the world of Vue JS HTML templates, I am exploring how to bind styles using arrow functions. My goal is to toggle the visibility of a div that originates from the Vuex store. Below is my current attempt at achieving this. The main_activi ...

Text appearing in varying sizes across browsers

I need some help with a coding issue I'm facing. I have a form where one of the inputs is connected to a JavaScript function that updates a div on the page as the user types. However, I want to limit the width of this div to 900px and make sure it onl ...

Manipulating CSS rules using JavaScript/jQuery

My goal is to create a function that generates a grid based on table data. While the function itself seems to be working, I am encountering an issue where the classes applied are not resulting in any style changes. Below is a snippet of my function: $(doc ...

Why are the HTML links generated by JS not opening in Chrome?

<a href='http://www.xyz.hu/xyz' alt='Kosár' title='Kosár'>Megtekintés</a> Additionally: - A setInterval function refreshes the sibling's content every second, although it should not affect this specific el ...

CSS3 Animation displaying text color change on various elements in a continuous loop

I was attempting to create a dynamic animation where multiple texts change color, similar to what you can see on https://vercel.com. I have successfully figured out how to make one text change color using keyframes, but I am struggling to make each text ch ...

The crash during compilation is triggered by the presence of react-table/react-table.css in the code

My code and tests are functioning properly, but I am facing a challenge with my react-table file. The react-table.js API specifies that in order to use their CSS file, I need to include import "react-table/react-table.css"; in my react-table.js file. Howev ...

What is the process for turning off bootstrap form validation?

I am facing an issue with utilizing the default input email validation in my development project. It seems that Bootstrap, which is being used for the website, has its own validation mechanism. Whenever I begin typing in a Bootstrap input field, an error m ...