My question is pretty simple(i think, but i cant find any reference, who wants to slow down their site,right?) and may sound ridiculous, but what I am trying to do is to have a splash screen on page load of the Home/Index of my site.
What I did is at the top of my page, I just added a simple div for my splash and use javascript to hide it when the page is loaded.
$(window).bind("load", function () {
// Remove splash screen after load
$('.splash').css('display', 'none')
})
but my problem is, my home index loads too fast (because its just plain text/html) hence the splash screen shows like .5 sec only. I want to add atleast 2-3 secs before it is removed, Im assuming I just need to add a line or two of code in my $(window).bind to pause for a couple of secs before doing $('.splash').css('display', 'none') but I dont know what or how to do it, please help! Thank you!
You can use setTimeout() to delay things in Javascript, like this:
$(window).bind("load", function () {
var delay = 5000;
setTimeout(function () {
$('.splash').css('display', 'none');
}, delay);
});
Timeout works.
$(window).bind("load", function () {
// Remove splash screen after load and 3 seconds
setTimeout(function() {
$('.splash').css('display', 'none')
}, 3000);
});
Related
Being semi-JS illiterate, I am unable to write my own code—can I get some help here?
What I am trying to do: stop a page from showing content until after a 3-second forced refresh.
I have a HubSpot thank-you page that shows personalized data based on a form filled on the previous page (I know I can customize the HubSpot JS code to do this, but since the page is already built, I cannot place custom form code.) The problem is that the personalization data doesn't come in until well after the page loads (so users see the default values first).
I've got some JS code that forces the refresh after 3 seconds, but I cannot figure out how to coordinate hiding the default content until that forced-refresh:
console.log(document.referrer);
console.log(document.location.href);
if (document.referrer !== document.location.href) {
setTimeout(function() {
document.location.reload()
}, 3000);
}
I tried adding this CSS: body { opacity: 0; }, along with this JS: document.body.style.opacity="100";
... by adding it after the setTimeout, by adding it after the the document reload, and by adding it as a new function to the reload. The best result was a flash of visible content at 3 seconds, then all content gone permanently.
I then just decided to write a whole separate setTimeout function outside the IF statement (in the hopes that it would just sync), but it still just shows blank content to everyone:
window.onload = function() {
setTimeout(function(){
document.body.style.opacity="100";
},3000);
};
I am sorry that I don't know enough about JavaScript to paint my way out—can anyone help me get closer to the correct way to hide content until a force-refresh?
This is my final code—at least it seems to work:
<style>
#hs_cos_wrapper_widget { opacity: 0; }
</style>
<script>
function showContent() {
document.getElementById("hs_cos_wrapper_widget").style.opacity = "1";
}
setTimeout("showContent()", 4000);
console.log(document.referrer);
console.log(document.location.href);
if (document.referrer !== document.location.href) {
setTimeout(function() {
document.location.reload();
}, 3000);
}
</script>
The only thing I don't like is that the page now takes more than 9 seconds to load (a preloader would be nice.) A more elegant solution is more than welcome.
My website is : https://365arts.me/
So it loads about 16mbs of pics(Yes I know, I'm stupid. I'll try to change it very soon, also if someone could tell me a way to reduce size of do something else(like dynamic loading only when needed, if something like that exists) I'd be very grateful).
I added a preloader for it using:
[html]:
<div class="spinner-wrapper">
<div class="spinner">
<div class="dot1"></div>
<div class="dot2"></div>
</div>
</div>
and corresponging [jquery]:
<script>
$(document).ready(function() {
//Preloader
$(window).on("load", function() {
preloaderFadeOutTime = 500;
function hidePreloader() {
var preloader = $('.spinner-wrapper');
preloader.fadeOut(preloaderFadeOutTime);
}
hidePreloader();
});
});</script>
this works well but the problem is I have a javascript code that comes and says Hi! but it runs only for 2.8 seconds. So if loading takes up more than that, It doesnt show up. Can someone please tell me how to make sure that it loads only exactly after loading is completed.
Thanks a ton.
Code for my website:
https://github.com/richidubey/365-Days-Of-Art/blob/master/index.html
this may work
document.addEventListener('DOMContentLoaded', function() {
// your code here
}, false);
if you are happy with pure javascript
My first suggestion is to just get rid of the "Hi!" message since you already have a splash page in the form of the loader. But if you really want that second splash page, you can use the JQuery when() method:
$(window).on("load", function() {
$.when($('.spinner-wrapper').fadeOut(500)).then(displaySplashPage);
});
This assumes that displaySplashPage() is your function for showing the "Hi!" message.
You don't need $(document).ready() and window.on("load") here. Document ready waits for the HTML to be built, then applies event listeners/functions/etc to the structure. Window onload waits for everything to get loaded, then fires. In your case, you're trying to wait for all your pictures to load, so you only need onload.
You might need to have a container around all your main content set to opacity: 0 that switches to opacity: 1 as part of displaySplashPage(). That would prevent things from leaking through as you do the .fadeOut() on the loader.
JavaScript version - run js code when everything is loaded + rendered
window.onload = function() {
alert("page is loaded and rendered");
};
jQuery version (if you need it instead pure JS)
$(window).on('load', function() {
alert("page is loaded and rendered");
});
You can try this:
<script>
// Preloader
$(window).on("load", function() {
fadeOutTime = 500;
sayHelloDuration = 5000;
function hideSayHello() {
var sayHello = $('.say-hello');
sayHello.fadeOut(fadeOutTime);
}
function hidePreloader() {
var preloader = $('.spinner-wrapper');
preloader.fadeOut(fadeOutTime);
setTimeout(function() {
hideSayHello();
}, sayHelloDuration);
}
hidePreloader();
});
</script>
Also, remove the code from lines 83 ~ 87:
<script>
$(document).ready(function() {
$('.say-hello').delay(2800).fadeOut('slow');
});
</script>
About your website performance, you can improve a lot of things right now:
Use smaller thumbnail images on your front page, don't load FULL SIZE images at once. "work-showcase" section is really heavy without real necessity.
Try to incorporate src-set and smaller images for small screens, larger/heavier images for bigger screens. All modern browsers support it, and it will improve performance/loading speed.
Try to lazyload your big images, e.g. only when users scroll down to them, not before. It may take some work to integrate it with your image viewer, but it will additionally speed things up on initial load. My favorite library for this is this one: https://github.com/aFarkas/lazysizes but, you may find something else...
Unrelated to your original question, I have noticed that you have a bug in your HTML - see this screenshot. What kind of code editor do you use? Instead of empty space it apparently inserts invisible dots symbols which are not good. Actually, it's not the invisible dot (that's my editor's space indentation symbol), it's caused by 2 long dash (instead of short dash or minus) in your code after opening html comment tag:
I have developed a comment system with ajax and its working fine. I want to add a ajax/js code to refresh my time ago div after every 5 seconds so that the time changes while one is on same post.
Please note:
Sir, i just want code to request server to refresh div after a specific time period. I do not want to load page or div but i want contents within that div should be refreshed after a specific period of time.
I'm new in js/ajax and Ii tried this but not working yet
$(document).ready(function () {
setInterval(function () {
$("#showtimeago!").load();
}, 1000);
});
Result I want is:
<div class="p_timeAgo" id="showtimeago"> <?php time_stamp($timePost);?></div>
Can anyone help me to solve that issue?
I don't know what UI you are using, here is for the php(since Jquery is same) you can tune this up for your requirement.
function loadlink(){
$('#showtimeago').load('test.php',function () {
$(this).unwrap();
});
}
loadlink(); // This will run on page load
setInterval(function(){
loadlink() // this will run after every 5 seconds
}, 5000);
Try this:
<div id="showtimeago"></div>
setInterval(function(){
$('#showtimeago').load('test.php');
},5000);
test.php is the page the refresher stand.
I'm using on my site setInterval function to load new content to one div every 20 seconds. It's working fine (at least seems like, maybe there is better option to do this?).
The problem is I want to use responsive design and on small screens this div will have display:none property, however JS function will still working and 'eat' data.
Is there any possibility that this code can't run when div has display:none attribute?
setInterval(function() {
$('#test').load("test.php");
}, 20000);
You can do a check if the div is visible or not inside the setInterval
setInterval(function() {
if($('#test').is(':visible')) //if visible then load
$('#test').load("test.php");
}, 20000);
You can also check specifically for display property
setInterval(function() {
if($('#test').css('display') != 'none') //if display not none then load
$('#test').load("test.php");
}, 20000);
you can check if an attribute is visible using this code:
$(element).is(":visible");
so you can write:
setInterval(function() {
if($('#test').is(":visible"){
$('#test').load("test.php");
}
}, 20000);
You can check is #test displayed:
var test = $('#test');
if(test.css("display")!="none")
test.load("test.php");
So I've got a basic system set up to reload webcam jpgs at a regular interval, but it's weird to see the file load. I'd rather have one fade into the other or at least wait for the whole image to load before it swaps the other one out.
$(document).ready(function() {
setInterval('updateCamera()',1000);
});
function updateCamera() {
$('#camera').attr('src','cam_1.jpg?'+ new Date().getTime());
}
Here is the site, click on "Live Feed" www.graysonearle.com/frogutopia Any ideas?
You can try something like this
$(document).ready(function() {
setTimeout('updateCamera()',1000); // Just call one time on dom ready using setTimeout()
});
function updateCamera() {
$('#camera').attr('src','cam_1.jpg?'+ new Date().getTime()).load(function() {
updateCamera(); // then call updateCamera() each time after image load complete
});
}