Develop Reference

Load a jquery event only after the preloader ends

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:

Refresh page after everything is loaded every 15 seconds

I would like when my page is refreshed automatically every 15 seconds, everything to be loaded once. I tried this code but it doesn't work.For example when an image is large,I do not want to see the image loading slowly,I want the page to be completely loaded(images, tables) in the background,and then to see all the changes once.Any ideas ? I tried this code but it does not work as I expected.
<script>
function autoRefresh1()
{
window.setTimeout(function(){ document.location.reload(true); }, 15000);
}
</script>
<body onLoad="autoRefresh1();">
After following the links in the comments I came to solution that solves my problem
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(
function() {
setInterval(function() {
$('#table').load("table.html");
}, 15000);
});
</script>
And the div inside the :
<div id="table" align="center"></div>

You can check to see if the page is fully loaded with the Document.readyState.
There are probably many ways to go about doing this, but I would have a CSS box overlay the entire page with a "loading" message. While the loading message is up, I would use a setInterval() to check the document.readyState. When the readystate returns complete, I would clear the initial setInterval(), hide the loading message, which would then reveal the rest of the page.

show loading on jquery refresh

I have this JQuery code that loads a php file into a div every X Seconds
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
$.ajaxSetup({ cache: false }); // This part addresses an IE bug. without it, IE will only load the first number and will never refresh
setInterval(function() {
$('.container').load('dashboard.php');
}, 10000); // the "3000" here refers to the time to refresh the div. it is in milliseconds.
});
// ]]></script>
<div class="container"><h3>Loading Dashboard...</h3></div>
when the loading starts it shows the Loading Dashboard text but then every X seconds it just refreshes the content in the background. how can i show some sort of loading image each time it refreshes?

How about this:
1) at the very top of your setInterval function, before you execute the load, set the background of that container class to be a loading image (or however you want to display it).
2) use the callback function of .load (https://api.jquery.com/load/) to remove that loading image when the load has completed.

Here's a fiddle illustrating the direction you should take...
http://jsfiddle.net/j5sZc/
HTML
<div class="wrapper">
<h3 class="loader">Loading Dashboard...</h3>
<div class="container"></div>
</div>
JS
$(document).ready(function() {
$.ajaxSetup({ cache: false }); // This part addresses an IE bug. without it, IE will only load the first number and will never refresh
var $loader = $(".loader"), // cache references to loader and container
$container = $(".container");
setInterval(function() {
$loader.show(); // show loader when request is initialized
$container.empty().load('dashboard.php', function(){
$loader.hide(); // hide loader once new content is loaded
});
}, 10000); // the "3000" here refers to the time to refresh the div. it is in milliseconds.
});

Show div after 2 seconds of page load

I am currently trying to show a div 2 seconds after the page is loaded. I can successfully do the reverse by hiding the div two seconds after the page loads. The issue is that nothing occurs and the div stays hidden. How can I properly show a div after two seconds of page load? Extra: mean while the two seconds are running show an ajax loading gif and then fade in the div
<script type = "text/javascript">
$(window).load(function() {
setTimeout(function() {
$("#contentPost").show('fadeIn', {}, 500)
}, 2000);
});
</script>
html/css
<style>
.contentPost { display:none;}
</style>
<div class="contentPost">
<h2>Hi there</h2>
</div>

$(document).ready(function() {
$(".contentPost").delay(2000).fadeIn(500);
});
Will work perfectly.

Ive never seen your show method written like that. Try altering it into use the jquery method fadeIn:
<script>
$(function() {
$("#contentPost").delay(2000).fadeIn(500);
});
</script>
The show method does not accept any arguments and won't work as you want it to.

Loading animation appears with delay

Using following code to show loading animation (and hide whole page loading process with it) if js enabled
<script>
document.getElementsByTagName('body')[0].innerHTML = '<div id="loading"><img src="core/design/img/load/load.gif" /></div>';
</script>
And fading out with following code
$(window).load(function(){
$('#loading').fadeOut(600);
});
But the loading div appears only after big delay:when whole page loaded it appears for 1-2 seconds. How -to fix hat problem? The loading div must appear at first
here is the page that i'm talking about http://aquastyle.az/?lang=en

try to change
<script>
document.getElementsByTagName('body')[0].innerHTML = '<div id="loading"><img src="core/design/img/load/load.gif" /></div>';
</script>
to
<script>
$(function(){
$(document.body).html('<div id="loading"><img src="core/design/img/load/load.gif" /></div>');
});
</script>
and see if that doesn't work better for you.

Try one thing
Make that loader div visible at start
style="display:block;"
and after page load make it disappear
$(document).load(function(){ $("#loaderdiv").css("display","none") })