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:

Image processing issue

I am using javascript/jQuery to manage a slide show that can handle random occurrences of portrait or landscape images.
The code works fine if there is an "alert" in the first function called to process a loaded image.
It fails without the alert.
I am testing locally and the images are loaded into an array when the page loads.
The files are quite small. I suspect however that the issue is one of timing.
Below is the function where the Alert works. I don´t exactly understand what the code is doing as I am new to jQuery. It would help to know what the function is doing and a suggestion of how to fix the issue. I can post a working sample if it would help.
function FixImages(fLetterBox) {
$("div.aspectcorrect").each(function (index, div) {
var img = $(div).find("img").get(0);
alert("FixI")
FixImage(fLetterBox, div, img);
});
}

I suspect that you might be passing in the wrong arguments for the .each() callback. If you want div to refer to the element that is currently being looked at in each iteration, using $(this) should work:
function FixImages(fLetterBox) {
$("div.aspectcorrect").each(function (index) {
var img = $(this).find("img").get(0);
FixImage(fLetterBox, div, img);
});
}

Prevent inline scripts loading until Jquery has been loaded

Ok, I have a Jquery script, its function is to determine the width of the window, onload. If the width is greater than 642px it calls .load() to load an image slider. The reason for this is mobile devices will neither be served the images or js required for the slider.
This worked fine when jquery was loaded in the head. Upon moving to the footer its breaking. The code is included from the index.php. Could this be whats causing it? I would have thought once php built the page jquery parsed the content?
It appears the code is parsed before the jquery is loaded. Can anyone suggest a way to get round this please?
I have thought of creating the code as pure JS or using a delayed load, but I cant seem to figure out how to get it working.
There must be much better solutions? I feel like I’m missing something very obvious..
contents of the included script:
<script type="text/javascript">
$(window).bind("load", function() {
// code here
$(window).width(); // returns width of browser viewport
var width = $(window).width();
if (width >= 642) {
$('.slider-content').load("templates/include/slider.php", function () {
$('.slider-content').show(200);
});
}
else {
//alert('small')
}
});
</script>
Thanks,
Adam

In some environments, you must use jQuery() instead of $(). See this question.
Other than that, your problem might have to do with the document not being complete yet or binding to an event that has already passed. Try this instead:
jQuery(document).ready( function($) {
// Your code goes here. (You can safely use the $() function inside here.)
});

Using DomNodeInserted to rewrite HTML before it finishes loading

I feel like this will probably be immediately obvious to any of the non-amateurs out there, but I've been stumped on this for days.
I am writing a Chrome Extension that executes a script at document start. I want to rewrite the HTML of specific DIVs as they load, but before they are displayed to the user (so the user doesn't see the site's HTML before it is unceremoniously replaced by my custom HTML). The method I am trying to use looks like this.
addEventListener('DOMNodeInserted', function(event){
if(event.relatedNode.innerHTML.indexOf("contentArea")>-1){
writeContentArea();
}
}, false);
function writeContentArea(){
var divtowrite = document.getElementById('contentArea');
include(divtowrite,"contentArea.html"); //my AJAX include function
}
Now, the problem is, when the page loads and the JS executes, the div will still load before it is replaced. The weird thing is when I try this with a different div, like a sidebar, it works as expected; i.e., the div is replaced before it is displayed to the user. I can't figure out why it works for some divs and not for others.
I don't know if this is relevant, but on the Chrome side I have:
chrome.tabs.getSelected(null, function(tab) {
if(tab.url.indexOf("search.php") > -1){
chrome.tabs.executeScript(null,
{file: "fhrun.js", allFrames: false, runAt: "document_start"}
);
}
});
Any ideas of why this isn't working, or a better method that I should be using? Thanks!!

Not sure if this is the approach you are looking for, but have you considered injecting CSS to hide the content area on initial load and setting it to visible in javascript once you modified the content?
The CSS file would read like this:
#contentArea { display:none; }
or
#contentArea { visibility:hidden; }
and you would inject it using:
chrome.tabs.insertCSS(null,
{file: "youfile.css", allFrames: false, runAt: "document_start"});
Then modify your content changing function to be:
function writeContentArea(){
var divtowrite = document.getElementById('contentArea');
include(divtowrite,"contentArea.html"); //my AJAX include function
divtowrite.style.display = 'block';
}

How to run a jQuery Code after loading all the images in my page?

How to run a jQuery Code after loading all the images in my page ?

$(window).load(function(){})

Checking to see that all images have loaded is slightly involved, so unless you have a pressing need to be so precise, it is much easier to check that all image and everything else has loaded:
$(window).load(function() { ... });
This makes use of the jQuery .load() method.
If you do really need to check for specifically only images, then things get a little trickier. I initially wanted to do this:
$("img").load(function() { ... }); \\ THIS IS INCORRECT!!!!!
However the above creates a jQuery object that contains all images, and then it binds function() { ... } to each of these images. So the above will trigger a function as many times as there are images on the page!
To get around this, we should check how many images there are on the page, and only fire the function once after all those images have been loaded:
$(function() {
// To keep track of how many images have loaded
var loaded = 0;
// Let's retrieve how many images there are
var numImages = $("img").length;
// Let's bind a function to the loading of EACH image
$("img").load(function() {
// One more image has loaded
++loaded;
// Only if ALL the images have loaded
if (loaded === numImages) {
// This will be executed ONCE after all images are loaded.
function() { ... }
}
});
});
jsFiddle example

$(function() {
var length = $('img').length ;
var counter = 0;
$('img').each(function() {
$(this).load(function(){
counter++;
if(counter == length) {
Callback(); //do stuff
}
});
});
});

I did something like this recently, but went about it differently.
$('img').on('load', function(){
$('img').off('load'); //detaches from load event, so code below only executes once
// my code to execute
});

Not a direct answer. Still worth referring.
Refer
Run JavaScript Only After Entire Page Has Loaded
jQuery callback on image load (even when the image is cached)
Code
$(window).bind("load", function() {
// code here
});

#Peter Ajtai answer will work except on IE's cached images. To make it work with IE, here's a solution: https://stackoverflow.com/a/3877079 or by using the imagesLoaded plugin.

For anyone using jquery this little snippet does the trick (it ensures that all images are loaded before any script inside it are run)...
$(window).bind("load", function() {
// code goes here here
});