Preload whole page - javascript

I would like to preload everything before HTML even starts displaying.
The problem is with loading external fonts, images etc.
I was trying to make simple jquery function with:
CSS:
html { display:none; }
jQuery:
$(window).load(function() {
$('html').css('display', 'block');
});
But that doesn't really work.
The main reason that I want to preload is that I have font animation on the page start and when the font isn't loaded and CSS animation is fired it looks a little buggy.

load() as a shortcut for on('load') is deprecated:
Try using
$(window).on('load', function() {
$('html').css('display', 'block');
});

Related

Preloader in Jquery

I've coded a fancy preloader with jQuery for my project. While my AJAX query is processed it is activated.
I have used to load it:
$(document).ajaxStart(function) () {
#preloder is displayed
}
And to stop it:
$(document).ajaxStart(function) () {
#preloder is turned off
}
Problem is my AJAX returns images src that are then diplayed in a <div> but some of the pictures are really heavy and most of the time my preloader stops before my pictures are completely loaded.
I went through jquery documentation and found a .load(function). But it seems that it has been removed from jQuery. It seems that it has been replaced by .trigger("load"). Can it be useful for my problem? I tried to implement it but with no sucess.
Quick answer from #Aureliano Far Suau that worked beautifully for me. No plugin needed:
$('img').on('load', function() {
// do something
});
For multiple images:
var loaded = 0;
$('img').on('load', function() {
loaded++;
if(loaded == $('img').length){
// do something
}
});

Preloading a DIV

I'm using preloadme script to fadeOut my preloader div on window.load but I'm wondering if instead of waiting for the whole entire page to load I can target one specific div:
preloadme code
$(window).load(function() {
$('#status').fadeOut();
$('#preloader').delay(350).fadeOut('slow');
$('body').delay(350);
})
my idea that doesn't work
$('#img-container').load(function() {
Any suggestions greatly appreciated
I am afraid its not possible, since you can access the page element once DOM is initialize.
just go with $(function(){ //your code}), that will make your code run every time
$(function(){
$('#status').fadeOut(); // dont rely on this to hide the loaded, use css below
$('#preloader').delay(350).fadeOut('slow');
});
You can do this using CSS, to initially show the preloaded till page loads
#preloader {display:block}

HTML Background Image OnLoad

I have a simple HTML page with a little JavaScript in it. The JavaScript launches onLoad in the body. The body also has a background image. The JavaScript launches before the background image is loaded. Is there a way to have the body onLoad wait for the body background image to load?
<body background="http://xxx.com/xxx.jpeg" id="myBody" onload="pageLoaded()">
If you want to make sure a script launches after all the images have been loaded, then use
$(window).load(function() {
//.......................
});
This event, will only fire once all the scripts, css, js, images have been load, unlike $(document).ready();
You can try with
jQuery(window).load(function() {
//your code here
});
jQuery(document).ready(function() {
//your code here
});
But i don't think whether it will consider background image loading. A more efficient way will be to use this jQuery plugin:
https://github.com/alexanderdickson/waitForImages
You can make the jQuery function call like :
jQuery('body').waitForImages(function() {
//your code here
});
Hope this helps you :)
did you try with JQuery? http://api.jquery.com/ready/
<script>
$(document).ready(pageLoaded)
</script>
Or listen for DOM ready without jQuery

Cannot animate png image to fade out using jquery

in my html I have:
<div id="testId">
<img src="img/Capture.PNG" alt="0" style=" background-color: red; margin-left:50px; "/>
</div>
In javascript I have:
$(function () {
$("#testId").fadeOut(2000, function () {
alert('animation complete');
});
});
I have also tried:
$(function () {
$("#testId").fadeOut("slow", function () {
alert('animation complete');
});
});
and my image does not animate. it goes from 100% visible to 0%.
Edit
It does not work in any browser. I have tried google chrome, safari, and firefox.... It is really strange. I wish I can show you a video of my computer
I have used jquery before I could not understand what was going on!
I had 2 problems:
1) I wanted to animate the image right when the page loaded so if you recall I did:
$(function () {
$("#testId").fadeOut("slow", function () {
alert('animation complete');
});
});
$(function(){}) executes that function when the dom is done but the image was not loaded yet!. I have to animate the image latter.
2) jquery library jquery-1.4.1.js was not working. I had to go to their site and download the latest version. Maybe I modified the file by accident.
edit
I downloaded version jquery-1.4.1-vsdoc.js again in order to see if I modified the file by accident and with that version my animation does not work....
Check below link which should help you.
http://www.viget.com/inspire/jquery-ie-png-24-ie-black-background-issue-solved/

Fade in Ajax content after it's fully loaded

My current solution gets some content via AJAX, Inserts it into a DIV then hides it and fade it in.
The issue with that is the content contains images and an iframe, The solutions flickers and the fadeIn doesn't look smooth.
What i'd like to do is to only fadeIn after the iframe and pictures are fully loaded.
How to do that?
This will wait until all child content has finished loading:
$("#wrapperDivID").load(function (){
// do something, e.g.
$(this).fadeIn();
});
See .load().
In your specific case the following should work:
$('#content').load('/echo/html/',data, function() {
alert('fired');
});
I would change the duration for fadeIn so that it will take little long.
$("#content").load("getform.php"), function() {
$(this).fadeIn(1500); // or another bigger number based on your load time
});
If you know what all images are going to be in the page, Preload all those images in the page where you have the div "content", so that you will save some loading time.
If you use $.ajax to get the HTML you can wrap the resulting HTML like below:
$.ajax('some/path/to.html',{
'success':function(html){
var result = $(html).load(function(){
$('#content').fadeIn()
});
$('#content').html(result);
}
});
jsfiddle example
another way you can do this:
$( "#content" ).fadeOut(200, function() {
$(this).load( url, function() {
$(this).fadeIn(200);
});
});
change the fadeIn and Out times to whatever is good for you.

Categories