We Keep Coding

HTML preloader delay (Elementor)

I need some help. So there is this page that is using an iframe, for that reason the Cumulative Layout shift is pretty noticeable. So we wanted to use a preloader so that you cant see that. But the preloader code only shows the preloader for like 100ms. I wanted to change this is so I added this code in between the script tag. But now the preloader isn't going away at all. Just spinning on forever
This is the code:
jQuery(document).ready(function($) {
$(window).load(function() {
setTimeout(function() {
$('#preloader').fadeOut('slow', function() {});
}, 200); // set the time here
});
});
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('https://example.com/example.svg') 50% 50% no-repeat #aa9767;
/* Change the #fff here to your background color of choice for the preloader fullscreen section */
}
.elementor-editor-active .loader {
display: none;
}
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<div class="loader"></div>

Two things seems wrong:
Your selector seems wrong, I am assuming its meant to be .loader
The function parameter in document.ready doesn't take parameters
jQuery(document).ready(function() {
$(window).load(function() {
setTimeout(function() {
$('.loader').fadeOut('slow');
}, 200); // set the time here
});
});

JQuery that works in a JSfiddle not working on a WordPress site

I have some code that works just fine in a fiddle, but not in wordpress. Essentially, I want the div 'loading' to be hidden by default, but show for 3 seconds and then ease out on a button click.
My JS is loaded in the footer, and the 'loading' div, as well as the trigger are within a page. I have tried moving the JQuery into the header to see if that would help, but so far, no. I am sure the javascript file is being loaded. Can anyone help with what I'm doing wrong? Here is my code. Thank you very much.
<div id ="loading">
next page is loading
</div>
<span id="button">Button</span>
jQuery( function( $ ){
$("#bottom").on("click", function() {
$("#loading").show(0, function() {
$("#loading").fadeOut (3000);
});
});
$("#loading").hide();
});
#loading{
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
background-color: gray;
color: white;
}

i think it's just a simple typo.
in the HTML the ID is button
<span id="button">Button</span>
and in JS you refer to bottom
$("#bottom").on("click", function() {

You had spelled button wrong, so I am surprised it worked on JSfiddle.
$("#bottom").on(...
instead of:
$("#button").on(...
Full Code:
jQuery(function($) {
$("#button").on("click", function() {
$("#loading").show(0, function() {
$("#loading").fadeOut(3000);
});
});
$("#loading").hide();
});
#loading {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: gray;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="loading" style="display: none !important;">
next page is loading
</div>
<span id="button">Button</span>

Totally download image before showing the page

is there a way to download images inside an HTML page before showing the page? Because I got an issue where the div underneath doesn't show up correctly. I am pretty sure that it is due to the image loading after the page was shown. I have no issue locally, but once I deploy it with Heroku, I have a visual error like so:
The local version:
Would anyone have an idea on how to download them before showing the rest of the page? I tried to use the following JavaScript but it didn't work:
preload([
'./webapp/dist/images/chantier1.jpg',
'./webapp/dist/images/chantier2.jpg',
'./webapp/dist/images/chantier3.jpg'
]);
function preload(arrayOfImages) {
$(arrayOfImages).each(function(){
$('<img/>')[0].src = this;
// Alternatively you could use:
// (new Image()).src = this;
});
}
Thank you for your help and time

a fast way to do it, by the way i think it's really strange that an image load delay can create this kind of view problem:
$(window).load(function() {
$('.loader').fadeOut(1000);
});
img{
width: 100%
}
.loader{
position: fixed;
height: 100vh;
width: 100%;
background-color: white;
top: 0px;
left: 0px;
}
p{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://images.unsplash.com/39/wdXqHcTwSTmLuKOGz92L_Landscape.jpg">
<img src="https://static.pexels.com/photos/1029/landscape-mountains-nature-clouds.jpg">
<div class="loader">
<p> loading </p>
</div>

Please try to set the height of the images container and the width and height on img tags.

Learning Ajax: Dynamic content not loading

I'm starting to learn Ajax for a project but I got some problems... This is my situation so far:
1- I have a navbar with different buttons to show content.
2- I have a div container where goes the selected content.
3- When clicked the desired content it never ends loading.
$(function(){
$.ajaxSetup ({
cache: false
});
var ajax_load = "<img width='50px' src='https://berkeleyloop.ridecell.com/static/common/images/loading-circle.gif'/>";
var loadUrl1 = "http://fullhdpictures.com/wp-content/uploads/2015/04/Beautiful-Pagani-Zonda-Wallpapers.jpg";
$("#load1").click(function(){
$("#result").html(ajax_load).load(loadUrl1);
});
var loadUrl2 = "http://fullhdpictures.com/wp-content/uploads/2015/04/Most-Beautiful-Pagani-Zonda-Wallpapers.jpg";
$("#load2").click(function(){
$("#result").html(ajax_load).load(loadUrl2);
});
});
#navbar {
position: fixed;
left: 0;
top: 0;
width: 48px;
height: 100%;
background: #181818;
overflow: hidden;
}
#result {
position: relative;
left: 50px;
width: calc(100% - 48px);
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navbar">
<button id="load1">1</button>
<button id="load2">2</button>
</div>
<div id="result"></div>
What did I missed? Please help me to achieve the desired effect!

you can't load content from different web site by using load. to do that you has to be rights. if you check your console you will see this
"No 'Access-Control-Allow-Origin'"
edit:
i think this will help
codepen.io/airsakarya/pen/zqLVZo?editors=1010

Show loading spinner/overlay BEFORE page elements appear

I would like to show a loading spinner before any of the page elements load, and then load the page elements while the loading overlay is still on. Is this possible? I am using this code but the page still loads elements before the spinner shows up.
$(document).ready(function () {
setTimeout(function () {
$.loader.close();
// Do something after 5 seconds
}, 3000);
});

Add the below div right below the opening <body> tag.
<div class="loader"></div>
Add some .css
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('images/page-loader.gif') 50% 50% no-repeat rgb(249,249,249);
}
And jquery in header
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
$(".loader").fadeOut("slow");
})
</script>
At the end, look after a loading gif image. Google is full :)