Execute code after the CSS has been loaded, but before the images start downloading

My website is experiencing a challenge.

Downloading images is taking too long, with the complete website taking around 20 seconds to fully load on my system. A loader is displayed but only hides once the complete website is loaded (after 20 seconds).

When I hide the loader at the document ready event, the website appears quickly, which is great for the user experience. However, some content is displayed without CSS for about 2 seconds, which is not ideal.

I am seeking a solution to hide the loader as soon as the CSS is loaded, even if the images are not fully downloaded yet.

javascriptjqueryhtmlcss

Answer №1

A method I've used in the past that could be helpful for you involves replacing the src attribute of an image with a data-src attribute like this:

<img src="" data-src="your-image.jpg" alt="some alternative description">

Afterward, all that's required is to implement some JavaScript code that iterates through the DOM and switches the data-src with src:

jQuery(document).ready(function($){
    $('img').each(function(){
        $(this).attr('src') = $(this).data('src');
    });
});

The benefits of this approach include allowing your webpage to display CSS styles before all images are fully loaded, leading to quicker page loading times. However, a potential drawback is that it may not be advantageous for image SEO on search engines like Google or Bing.

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

Eliminate duplicate entries in typeahead.js by ensuring unique data sources for both prefetch and remote

Currently, I have implemented typeahead.js with both prefetch and remote data sources. You can check out the example here. $(document).ready(function() { var castDirectors = new Bloodhound({ datumTokenizer: Bloodhound.tokenizers.obj.whitespace('val ...

javascriptjqueryjsonduplicatestypeahead.js

How can I display a variable within a parent div span and a child div span?

Let's consider a variable, let's call it item. This variable is an array that holds two values: name and size. For example: item[0]=name; item[1]=size; Now, I want to display the name in a span inside the parent div and the size in a span insid ...

jqueryjquery-selectors

Issue arises when the logo and navigation menu overlap upon zooming in

I'm facing a couple of issues with the menu on my website that I can't seem to resolve. The code appears to be correct, but the problem arises when a user zooms in on the website, particularly on netbooks. The website logo and the navigation menu ...

csshtmloverlap

Send nodejs express static request over to secure https server

Is there a way to ensure all HTTP requests, including those for static files, are redirected to HTTPS? This is the code I currently have: app.use(express.static(__dirname + '/public')); app.get('*', function(req, res) { if (!req. ...

javascriptnode.jshttp-redirectexpresshttps

Using javascript to store HTML tags in a variable

Hey there, I have a quick question. Can someone help me figure out why this code isn't working? let plus = "+" + '<h1>'+"This is a heading"+'</h1>'; When I run the code, the output I get is: +<h1 ...

javascripthtmlstringvariablesconcatenation

The module script failed to load due to an unexpected response from the server, which was MIME type of text/jsx instead of a javascript module script

I have recently set up an express server and created an API, as well as installed React using Vite for my frontend. However, when I attempt to connect or load my main HTML file to the server, an error is displayed in the console. This is all new to me as I ...

javascriptnode.jsreactjsmongodbexpress

Develop an ngDialog template that can be easily reused across different projects

I am interested in developing a reusable template for my application. As far as I know, it seems like you can't directly pass the title and body to ngDialog. What I'm looking for is something similar to the following : <div> <h2>{{ ...

javascriptangularjsng-dialog

Is there a way to retrieve the $state object from ui router in the console?

I attempted to modify the route from the console by using this method to access the $state object: $inject = angular.injector(['ng', 'ui.router']); $inject.get('$state').go Unfortunately, I encountered an error: Uncaught Er ...

javascriptangularjsangular-ui-router

Tips for launching a fresh window and embedding HTML into it with jQuery?

I'm attempting to use JavaScript to open a new window, but the HTML content is not being added: var callScriptText = $('#callScriptText').html(); var url = '/Action/CallScript/?callScript='; // Open the current call script in a n ...

javascriptjqueryhtml

Distinctive titles for JavaScript constructors/prototypes compared to classes

When working with JavaScript ES6, classes allow us to write code like this: class RectangularShape { constructor(height, width) { this.height = height; this.width = width; } getArea() { return this.height * this.width } static some ...

javascriptecmascript-6terminologyecmascript-5

Angular template not refreshing automatically

Within my controller: $scope.deleteUser = function(user){ $.ajax({ url: "/users/" + user.id.toString(), method: "DELETE", success: function(result){ $scope.users = result["users"]; ...

javascripthtmlangularjsajax

Experiencing Issues with File Downloading on Express Server with Axios and Js-File-Download Library

I developed a feature on my express server that allows users to download a file easily. app.post("/download", (req, res) => { let file_name = req.body.name; res.download(path.join(__dirname, `files/${file_name}.mp3`), (err) => { ...

javascriptnode.jsexpressaxios

Passing arguments to an external function in jQuery from a dynamically loaded Ajax page

Despite its confusing title, the issue at hand is actually quite simple. My homepage contains a script that loads an external PHP file for a specific section of my website. Within this PHP file, I need to call a function from the main JavaScript file (th ...

phpjavascriptjqueryajax

Response from JSON data through jQuery AJAX call includes key "d"

After sending a jQuery AJAX JSON request, the response includes an unexpected "d" attribute. What could be causing this unusual behavior? ...

jsonasp.net-ajaxjqueryget

Using jQuery .each() within a PHP foreach loop: A guide

In my code, I have a foreach loop that iterates through an array of images, along with some JavaScript logic to add different classes based on whether the width is greater than or less than the height. The issue I'm facing is that the if function onl ...

javascriptphpjqueryhtml

React-Toolbox: Attempting to horizontally align the Cards side by side

When working with React-Toolbox, I encountered an issue with aligning Card elements horizontally. I attempted using display: inline-block, which successfully separated them into three distinct cards as desired. However, they did not align next to one ano ...

cssreactjsreact-toolbox

Tracking the status of lengthy processes in MVC 5

Preface: I have referenced a helpful article for my project. You can find it here. I am working on providing visual feedback to the user when they submit a form. I was inspired by YouTube's progress bar and wanted to implement something similar wher ...

jqueryasp.net-mvc

I am attempting to develop a basic express application, but it doesn't appear to be functioning as expected

I am currently working on developing a straightforward express application. However, I am facing network errors when trying to access it through my browser at localhost:3000 while the application is running in the console. The root cause of this issue elud ...

javascriptnode.jsexpress

A guide on immediately invoking a method when a class is initialized in JavaScript

I'm having some trouble with a class I created to handle user information. When I try to add an init() function to the class so that it runs as soon as the class is initialized, I keep getting a SyntaxError. I've tried following the advice from ...

javascriptclass

An issue has occurred while trying to execute the npm start command within PhpStorm

When I try to run npm start on Windows' command prompt, it works fine. However, I encounter errors when running it in the PhpStorm Terminal. You can see the errors here. Is this a result of them being different platforms or could it be related to som ...

javascriptnode.jscmdnpmphpstorm