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);
});
}

Animate children of a div that have been created within a function (with js or jquery)

I'm taking a coding class at school and am very new to javascript, so hopefully what I'm asking will make sense!
Right now I have a page where if you click an html button, an image of a worm appears in a div below it (called "bugs"). the same image appears each time you click the button. I've done this by having the button click call a function that creates an img element and adds it as a child of the div. the issue is I want the images to move randomly around the page or even just inside the div. I've found some code that will animate a div so it moves randomly using jQuery (here), but I can't for the life of me figure out how to apply it to the images.
The js code that makes the images looks like this:
var BugSpace = document.getElementById("bugs");
function NewWorm(){
WormPic = document.createElement("img");
WormPic.src = "worm.png";
BugSpace.appendChild(WormPic);
};
Most of my code is pieced together from various tutorials so is likely pretty convoluted. anyway, if anyone can figure this out I'll be eternally grateful :~)
Edit: I suppose I should further clarify that the code includes two other buttons to make two other types of bugs! I'd like to be able to have a few images of each bug moving on the page at once. I figure the best way to do this is to find a way to animate the children of the "bug" div? I am, however, wondering if the answer to my problem might turn out to be a complete reworking of the code I have now!

If you're comfortable using jQuery, then you can use the following solution.
You basically still animate the div and because the img is contained within the div, it will animate too.
All you need to do is call the animateDiv() function after you've added the image.
$(document).ready(function(){
$button = $('#button');
$bug = $('#bug');
$wormimg = "<img src='http://bit.ly/1r7l5ns' class='worm'/>";
$button.on('click', function(){
$bug.html($wormimg);
animateDiv();
});
});
The animateDiv() function here is exactly the same as the link you've provided.
Have a look at the jsfiddle: http://jsfiddle.net/3xgqogkk/
EDIT (based on more information from the comments)
So the new core javascript looks like:
$(document).ready(function(){
$button = $('#button');
$bug = $('#bug');
$wormimg = "<img src='http://bit.ly/1r7l5ns' class='worm'/>";
$button.on('click', function(){
$bug.append($wormimg); //Changed this to append so we can add more than 1
animateDiv($bug.children().last());
//We're basically passing the last worm you've added as a variable
});
});
Which means you have to make some modifications to the animateDiv() method, which is now actually animateDiv($worm)
function animateDiv($worm){
var newq = makeNewPosition();
var oldq = $worm.offset();
var speed = calcSpeed([oldq.top, oldq.left], newq);
$worm.animate({ top: newq[0], left: newq[1] }, speed, function(){
animateDiv($worm);
});
};
The important thing is to understand everything that's happening here, so if you have any questions, just ask :)
The jsfiddle is also updated: http://jsfiddle.net/3xgqogkk/

Using fade in/fade out with jquery

I am working over on of my student projects and I am new jquery, for the project I have to use jquery to enhance few function and I have learned much to carry out basic tasks, but I am stuck over something very confusing.
One my scripts actually changes the image of a div container at mouse over function, function is currently fine but make it feel a little beautiful I want to add transition affects to it either through fade in fade out functions or through animate but am unable to work it out with both. I searched over internet but here i am unable to relate those examples to mind here.
I just want to know where can I insert fade in fade out or animate function in this code, to give it a transitioning effect:
$(document).ready(function () {
$(".thumb").hover(function () {
var dummyImg = $(this).attr("alt");
$(this).attr("alt", $(this).attr("src"));
$(this).attr("src", dummyImg);
}, function () {
var dummyImg = $(this).attr("src");
$(this).attr("src", $(this).attr("alt"));
$(this).attr("alt", dummyImg);
});
});
Thank-you!

You want to access the callback function of the fadeIn and fadeOut functions, this will allow you to make changes to the src image and what not. it would look something like this ->
$(document).ready(function () {
$(".thumb").hover(function () {
var dummyImg = $(this).attr("alt");
$(this).fadeOut('slow', function(){
//this is now the callback.
$(this).attr("alt", $(this).attr("src"));
$(this).attr("src", dummyImg);
$(this).fadeIn('slow');
});
}, function () {
var dummyImg = $(this).attr("src");
$(this).fadeOut('slow', function(){
//this is now the callback.
$(this).attr("src", $(this).attr("alt"));
$(this).attr("alt", dummyImg);
$(this).fadeIn('slow');
});
});
});

Maven,
Have you thought of using css webkit? This SO article goes into detail for crossfading images - at different rates. CSS Webkit Transition - Fade out slowly than Fade in
You can also make use of a basic event to fade-in/fade-out the image. This JQuery/JSFiddle SO article makes use of the this reference object: Jquery fadeOut on hover
The basic fade-in / fade-out structure from the JSFiddle.net documention is as follows:
$('#show').hover(function() {
$(this).stop(true).fadeTo("slow", 0);
}, function() {
$(this).stop(true).fadeTo("slow", 1);
});
~JOL

Personaly, I'd layer the two images (css) so the non-hover version is normally on top. Then
in the hover function, add a $(this).fadeOut('fast') so that the underlying image is displayed.

http://jsfiddle.net/Xm2Be/13/ There is an example how you could do that. Ofcourse, you can set lenght of fade effect by placing some number inside brackets. For examle .fadeToggle(5000) will have timing of 5 seconds.

jQuery on page load sequential loading of elements

I'd like to know how this effect (http://www.getflow.com/) is achieved.
I'm guessing that it's using jQuery to sequentially change the opacity of each element.
Could anyone post a quick snippet of js to make this happen (load in each image, one every 3 seconds)
http://jsfiddle.net/5hdcz/2/
Thanks!

Use the fadeIn callback functions:
$('#img1').fadeIn('slow', function() {
$('#img2').fadeIn('slow', function() {
// and so on...
});
});