I'm using this code to make loading screen appears for 1 sec then disappears
,but It's keep loading
CSS
.preloader {
overflow: auto;
position: fixed;
z-index: 99999;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fefefe;
}
JS
jQuery( window ).load(
function() {
jQuery( '.status' ).fadeOut();
jQuery( '.preloader' ).delay( 1000 ).fadeOut( 'slow' );
setTimeout( zerif_display_iframe_map, 500 );
}
);
Use a default setTimeout from Javascript. In the documentation of jQuery.delay() it says:
The .delay() method is best for delaying between queued jQuery effects. Because it is limited—it doesn't, for example, offer a way to cancel the delay—.delay() is not a replacement for JavaScript's native setTimeout function, which may be more appropriate for certain use cases.
You also should check up on how to use the document.ready function, I had to clean this up to get it to work.
$(function() {
jQuery('.status').fadeOut();
setTimeout(function() {
jQuery('.preloader').fadeOut('slow');
}, 1000);
});
.preloader {
overflow: auto;
position: fixed;
z-index: 99999;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="status"> I fade out </p>
<div class="preloader"></div>
<p> I'm blocked by a design from 1999, aka preloader </p>
You could generate the necessary containers and elements via javascript and remove them once the page has successfully loaded.
Furthermore, you don't even need jquery, you could do it in plain vanilla javascript and pure css, which would likely be faster, and smaller.
Instead of using an image we can generate an svg with javascript, for better overhaul performances.
I worked on something similar a while back, it will automatically generate all the necessary component to get the perfect loading screen. Place the following <script> near the end of your pages, right before the closing </body> tag
var t="#2774ab",u=document.querySelector("*"),s=document.createElement("style"),a=document.createElement("aside"),m="http://www.w3.org/2000/svg",g=document.createElementNS(m,"svg"),c=document.createElementNS(m,"circle");document.head.appendChild(s),(s.innerHTML="#sailor {background:"+t+";color:"+t+";display:flex;align-items:center;justify-content:center;position:fixed;top:0;height:100vh;width:100vw;z-index:2147483647}#keyframes swell{to{transform:rotate(360deg)}}#sailor svg{animation:.3s swell infinite linear}"),a.setAttribute("id","sailor"),document.body.prepend(a),g.setAttribute("height","50"),g.setAttribute("filter","brightness(175%)"),g.setAttribute("viewBox","0 0 100 100"),a.prepend(g),c.setAttribute("cx","50"),c.setAttribute("cy","50"),c.setAttribute("r","35"),c.setAttribute("fill","none"),c.setAttribute("stroke","currentColor"),c.setAttribute("stroke-dasharray","165 57"),c.setAttribute("stroke-width","10"),g.prepend(c),(u.style.pointerEvents="none"),(u.style.userSelect="none"),(u.style.cursor="wait"),window.addEventListener("load",function(){setTimeout(function(){(u.style.pointerEvents=""),(u.style.userSelect=""),(u.style.cursor="");a.remove()},100)})
You can check the latest version here https://github.com/amarinediary/Sailor with all it's documentation.
Related
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
});
});
I have a problem with the pre-loader. I was trying to set it up as once per session. It works first time, but when you refresh the website the pre-loader does not stop at all and it is impossible to see the content of the website until the moment I will delete the data from the session storage. Adding visibility: invisible in to stylesheet does not work at all.
canvas {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #000000;
z-index: 99;
}
<canvas id="c"><img id="logo" width="1280" height="1024" alt="logo"></canvas>
<div>
content
</div>
if (sessionStorage.getItem('dontLoad') == null){
jQuery("#c").delay(1000).fadeOut('slow', function(){
jQuery( "body" ).animate({
visibility: visible
}, 1000);
});
sessionStorage.setItem('dontLoad', 'true');
}
The problem is that you need to change the CSS. I will try to explain.
In your CSS, you have set the canvas to display: none. In your jQuery, you try to use the fadeOut animation. This won't work because the element is not displayed, it is basically removed from the document, so jQuery can't change it.
What you need to do is set the canvas to display: block. So that the 'preloader' is visible when the user accesses the website. Then the 'preloader' will fade out.
Here is the updated CSS.
canvas {
display: block;
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background-color: #000000;
z-index: 99;
}
JavaScript
if (sessionStorage.getItem('dontLoad') == null)
{
jQuery("#c").delay(1000).fadeOut('slow', function()
{
jQuery( "body" ).animate({
visibility: visible
})
}, 1000);
}
if (sessionStorage.getItem('dontLoad') == true)
{
$('#c').css('display', 'none');
}
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.
I am trying to animate a gun with SuperScrollorama. The idea is that the gun will fire as the user scrolls down. This involves some rather complex tweening.
Here's what I have so far (*works best in Firefox):
https://googledrive.com/host/0B8V6b1tb9Ds5cDBYTlJpOWhsb1U/index.html
Now that I have the trigger being pulled and the hammer rotating backward, I need to make the hammer snap to rotation: 0 after it's reached rotation: -25. I just can't figure out how to append this timeline.
Here is my script:
<script>
$(document).ready(function() {
var controller = $.superscrollorama();
controller.addTween(
'#gun',
(new TimelineLite())
.append([
TweenMax.fromTo($('#hammer'), 1,
{css:{rotation: 0}, immediateRender:true},
{css:{rotation: -25}, ease:Quad.easeInOut}),
TweenMax.fromTo($('#trigger'), 1,
{css:{rotation: 0}, immediateRender:true},
{css:{rotation: 40}, ease:Quad.easeInOut})
]),
500, // scroll duration of tween
200); // offset?
});
</script>
I would appreciate any help that anyone could give me. I've read as much as I can on the Superscrollorama site and looked at all sorts of code snippets. Still can't figure it out.
So I see this post is a few months old, and let me preface this with the fact that I do not have a solution quite yet, but I feel like onComplete is the way to handle it. There were some issues, at least on the google host site, with an invalid DOM and resources not getting loaded properly. I recommend using JSFiddle for sharing code with a community for help debugging. Grabbing the markup from your link gave me a couple broken divs I had to fix. I think they were just missing closing tags (i.e. </div>) but you can diff the two to verify it all. Also, it looks like you're including jQuery twice and then even checking for it again and loading if not found. After cleaning all of that up it seems to perform as you'd expect. Though, I believe you are also looking to find a way to also animate the trigger being released and hammer closing on the firing pin as you continue to scroll down. I actually stumbled upon your question after trying to do something very similar. Basically I'm just trying to fade an element in as it comes into the overflow DOM element and then back out when it is about to leave the element as a proof of concept for any other in/out tweens when enter/leaving. So as I said initially I believe onComplete would be what you'd want, but prolly not for what I'm trying to do. Still not sure, maybe some others will chime in on this. Either way, there's a with my idea below. Not sure you need the fromTo method as I've replaced it with just the to method since its "from" state is proper from initialization of the page. If you can find out why the onComplete is firing on load and resolve that you should be good though. Hopefully, this'll at least give a bit more insight since no one else has given an answer after nearly three months. If you do get this all worked out, it'd be great if you could update this post to show what the resolve was.
JSFiddle Link
CSS:
body{
background: url(https://googledrive.com/host/0B8V6b1tb9Ds5cDBYTlJpOWhsb1U/new/plus_yellow.png);
background-color: #FFFF00;
background-repeat:repeat;
height: 3000px;
}
#gun{
position: fixed;
}
#body{
z-index: 2;
position: absolute;
left: 0px;
top: 100px;
}
#slide{
position: absolute;
}
#slide1{
z-index: 3;
position: absolute;
left: 91px;
top: 7px;
}
#slide2{
z-index: 1;
position: absolute;
left: 735px;
top: 95px;
}
#barrel{
z-index: 0;
position: absolute;
left: 371px;
top: 25px;
}
#hammer{
z-index: 0;
position: absolute;
left: 63px;
top: 60px;
}
#trigger{
z-index: 0;
position: absolute;
left: 345px;
top: 64px;
}
HTML:
<div id="screen1">
<div id="gun">
<img id="body" src="https://googledrive.com/host/0B8V6b1tb9Ds5cDBYTlJpOWhsb1U/new/body.svg" alt="body" />
<div id="slide">
<img id="slide1" src="https://googledrive.com/host/0B8V6b1tb9Ds5cDBYTlJpOWhsb1U/new/slide1.svg" alt="slide1" />
<img id="slide2" src="https://googledrive.com/host/0B8V6b1tb9Ds5cDBYTlJpOWhsb1U/new/slide2.svg" alt="slide2" />
</div>
<div>
<img id="barrel" src="https://googledrive.com/host/0B8V6b1tb9Ds5cDBYTlJpOWhsb1U/new/barrel.svg" alt="barrel" />
<img id="hammer" src="https://googledrive.com/host/0B8V6b1tb9Ds5cDBYTlJpOWhsb1U/new/hammer.svg" alt="hammer" />
<img id="trigger" src="https://googledrive.com/host/0B8V6b1tb9Ds5cDBYTlJpOWhsb1U/new/trigger.svg" alt="trigger" />
</div>
</div>
JS:
var controller = $.superscrollorama(),
handleComplete = function(elem) {
console.log('complete', elem);
$('#'+elem).css('rotation', 0);
};
controller.addTween($('#gun'),
(new TimelineLite())
.append([
TweenMax.to($('#hammer'), 1,
{css:{rotation: -25}, onComplete:handleComplete('hammer'), ease:Quad.easeInOut}),
TweenMax.to($('#trigger'), 1,
{css:{rotation: 40}, onComplete:handleComplete('trigger'), ease:Quad.easeInOut})
]),
500, // scroll duration of tween in pixels
200); // offset (helps with timing when needed)
I have a JSP, that includes 3 more JSPs. On click of a button on one of these included JSPs, I need to gray the whole window content. How this can be done? I was trying to append a child(image) to the parent window but its not working.
You need to add a <div class="glasspane"> to the <body> element, having the following style:
.glasspane {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: black;
opacity: 0.2;
}
Of course, this <div> element should be removed when appropriate.
Here is some jQuery I've used for a similar purpose:
$('body')
.prepend('<div class="veil"> </div>')
.children('.veil')
.css({ position:'fixed' ,top:'0' ,left:'0' ,width:'100%' ,height:'100%'
,opacity:'0.5' ,backgroundColor:'gray' ,zIndex:7 })
;