Website preloader jQuery - javascript

I'm making a website, and I have a problem. Or more exactly, I don't know how to solve the blank page problem.
I'm making a website, where if you swipe right, some data will be inseret in the database, and then the webpage will refresh. After refresh, a blank page is shown, and then the normal webpage with all it's html.
How can I put a loader image on the blank page before the DOM is ready? I'm using jquery and jquery mobile.
The webpage is this: http://meetmean.comxa.com/KlausApp/home.php . If you swipe to right, or left, it will show you an alert box, and then the page will refresh. I want the blank page that is shown after to be a loading image.

I had kind of the same problem and my solution is:
I covered the (blank one you were talking about) HTML page with a full screen black background and a css animation in the div , and I hide that div when the page is fully loaded using JavaScript
window.onload = function () { $('body').toggleClass('loaded'); };
This function will run when the all the content in your html body is fully loaded.
This code will add a class named loaded to your html body,
in my style.css file the loaded class will hide the full screen div. it was one of the ways to have a loader in your page and it's up to you , there are many ways to do this.

Take an SVG animation file and keep it wherever you want to show it in the page.. Previously keep its display property none ..if you are using (jQuery) AJAX (i.e. $.ajax()) to fetch the data you can use the on complete callback function in the AJAX options to fadeout the SVG when the animation comes.
function ajaxCall(){
$("#svg").fadeIn("slow");
$.ajax({url: "demo_test.txt", complete: function(result){
$("#svg").fadeOut("slow");
}});
}
Here as soon as the function is called the SVG animation appears.. and soon as AJAX gets response the SVG is faded out.
You can get loading animations from http://loading.io

You could use some of loaders from this page: https://demos.jquerymobile.com/1.2.0/docs/pages/loader.html

Related

jQuery onLoad event fires before anything loads

I am aware there are similar questions but the answers are not working for me (example below). First, my (simplified) code.
HTML:
<div id="loading_screen">
<img src="<?= base_url()?>images/loading_screen.png" title="The game is loading, please wait.."/>
</div>
<div id="container">
<!-- a whole lot of HTML content here -->
</div>
CSS:
#container{
display:none;
}
JS:
$(document).ready(function(){
//when document loads, hide loading screen and show game
$('#loading_screen').hide();
$('#container').show();
})
The idea is simple: I initially show the loading screen and hide the container; once everything has loaded, I hide the loading screen and show the container.
But, it doesn't work. The JS code fires off show immediately, as soon as the container div starts loading.
The loading_screen div is only 1 small image (20KB) and the container div is a total of about 400KB.
There are images in the container div, as well as background images on some of its sub-elements. So according to the answers to this question I changed the code to $(window).load(function(). However, that didn't fix the issue.
I suppose I could do the following - not even create the container div at first, and only create it and all its content after the loading div has loaded. But, I'd rather not go down that path, there's server side code in the container, I'd have to add includes etc, and it's not worth it. I'm happy to rely on the fact that the 20KB image will load before the 400KB of content, I just need to get the code to not fire off until after those 400 KB have loaded.
EDIT:
I added this bit of code to the JS (outside the onload function) to see what's happening as the page loads:
setInterval(function(){
var st1 = $('#loading_screen').css("display");
var st2 = $('#container').css("display");
console.log(st1+" "+st2);
},100);
It keeps outputting none block, meaning that the loading_screen is hidden immediately and the container is made visible immediately.
You should take a look at the answer for this question: Detect if page has finished loading
The jquery page for the .load() api explains the following:
Caveats of the load event when used with images
A common challenge developers attempt to solve using the .load() shortcut is to execute a function when an image (or collection of images) have completely loaded. There are several known caveats with this that should be noted. These are:
It doesn't work consistently nor reliably cross-browser
It doesn't fire correctly in WebKit if the image src is set to the same src as before
It doesn't correctly bubble up the DOM tree
Can cease to fire for images that already live in the browser's cache
It finishes with this example:
Example: Run a function when the page is fully loaded including graphics.
http://api.jquery.com/load-event/
$(windows).on("load", function() { /// this is deprecated --> $( window ).load(function() {
// Run a function when the page is fully loaded including graphics.
});
The "ready" event fires when the DOM is built, but before other stuff like images may be loaded. If you want a real "load" handler, then do that:
$(window).load(function(){
//when document loads, hide loading screen and show game
$('#loading_screen').hide();
$('#container').show();
})

VVO Lazyload loads all images on page load

I am using lazyload by VVO http://vvo.github.io/lazyload/ from quite a time but for this specific page I don't know what is going wrong. It loads all images when page loads, which are supposed to be lazy loaded. On other pages of website it is working fine.
I have even tried using custom initialization, changing offset and viewport container but no use. My document is also not automatically scrolling on page load.
Problem is happening on this website's home page Winni.in
Below banner there are 3 rows of products, out of which last 2 row's products images should be lazy loaded only on page scroll. But still it loads all images on page load
On page scroll you might be loading dynamic elements from AJAX.
VVO Lazyload - lzld(this) will not work form dynamic elements be default.
You have to manually call lzld(imagelement) again for dynamic elements.
Example:-
// Add following code inside AJAX success function
$('#dynamic_content img').each(function(index,element) {
lzld(element);
});

Show loading page while main page is preparing

I want to show preload image while main page is preparing and then loading. I think I can't use Ajax, because I need to reload whole main page. I want to implement next: First, I request the preload page and a server sends me it. Second, the server start to form main page(It takes about 15-20 seconds).
Third, when the server ends his work it send me the main page. But how can I implement 3rd part?
The second idea is separate the main page on 2 parts. One of them is the preload page which contains whole main page's contents without 'busy time' contents. And then use Ajax to load 'busy time' contents.
What do you think, colleagues?
Try this. You'll need a loading spinner element. Also, the $(function(){}); activate when the DOM (html structure) is loaded. That's the closest you'll ever get to when the visitor first reaches the page. The body element is hidden, then waits till all the images and everything all fully rendered and the CSS and Javascript files are loaded and working, then it crossfades from the spinner to the content and removes the spinner.
$(function(){
$('body').hide();
$('html').append('<div id="loading-spinner"></div>');
$('body').load(function(){
$('#loading-spinner').fadeOut('fast').remove();
$(this).fadeIn('fast');
});
});
You'll need some CSS to apply a GIF to the background of the loading spinner element and center it:
#loading-spinner {
width:100px;
height:100px;
background:url(loading.gif);
left:50%;
margin-left:-50px;
top:50%;
margin-top:-50px;
}

Is it possible to place a loader image inside an iframe while its loading its content?

I'm working inside a Facebook tab iframe content page and since it takes a few seconds to appears the iframe content of my site I'm wondering If I can place a loading gif inside the iframe to show first (maybe as a body background image) while its loading the rest of the content.
I see that the iframe ussually cames with all the images. So I'm wondering If there's any way to do this or the content of the iframe loads and is displayed all together.
I tried the image as body background and it didn't work. Both came together.
You can't modify the contents of an iframe that comes from a different domain.
But, you can use absolute positioning from your main window to put an image over the top of the embedded iframe which can probably accomplish what you want without a lot of complication or change of your main page design.
Here's an example: http://jsfiddle.net/jfriend00/DajS4
If your code is in the iframe and you want something displayed before your page loads into the iframe and you don't control the parent, then there is nothing to do. You can't do anything dynamically until your code is loaded and by then the page will already be starting to show.
All you can do is to make something on your page load very, very quickly (perhaps like a small image in the first tag of the page) that should be one of the first things to show and then when your page successfully finishes loading, you would hide that small image. Other than making something show quickly, you can't do anything until you load so you can't show anything before you load. It would have to be the parent window that created you that did something earlier.
Umm,
I understand what you are trying to achieve. but the only way i know to achieve this would be to use ajax to load all your content.
Set the ajax function to run on page load. And in the body of the page place one of those gif loaders..
hope u understand what im trying to say!
You can use AJAX to load your page.
<div id="loading">loading..</div>
<div id="content" style="display:none"></div>
$(function() {
$('#content').load('http://url', function() {
$('#loading').hide();
$(this).show();
}
});
note: the location of all your javascript should be at the bottom of the page to improve load speed.

Preload all images on a website with JQuery or Javascript

I can't seem to find any solid code on this at the moment, but I wanted to know (if possible) how to have all the images on a webpage preloaded using JavaScript or JQuery, for example.
Maybe have a pre-loading screen or overlay that displays while the images are being preloaded to the site, then fades out or disappears when done. Any help/direction on this would be amazing!
Thank you!
You could display a splash screen or a loading screen while the page is loading, and then remove this screen when JQuery tells you the page has been fully loaded. Something like this:
$(document).ready(function() {
// add loader
});
$(window).load(function() {
// remove loader
});
Do you mean loading a group of images (like a gallery?). If so, then you could do this with jQuery. Have you checked out the Image Loader plugin? It looks like it would do what you want:
http://www.staticvoid.info/imageLoader/
It would be trivial to put a div over the top of this before you run it and then remove it in the complete() callback.
You may also want to check out this SO topic that also talks about a plugin (which is going to be your best option, IMO): JQuery wait for page to finish loading before starting the slideshow?
This is my preloader. Show preloader first, and when the whole page is loaded, hide preloader and show content. Try this, it's very simple and easy to change. This is link to my blog post with demo and code (~1 Kb):
Preload web site using jquery
This will preload all of the images in CSS for your website automatically:
http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/
I don't think you should have a loading screen since this would be very annoying to your users.

Categories