CODEWITHSUNDEEP
javascriptjqueryhtml
Ilja
Ilja

Reputation: 46479

Preload div once images, javascript files are loaded?

I've been trying to work with jQuery libraries to preload content, the usual issue I ran into was that once all content is preloaded it displays a div however for a split seconds you can still see "bad looking" content as javascript wasn't applied to it yet, and than it changes to what it should look like. It's hard to explain. Basically I'm trying to display div (<div class="text"></div>) on a page once whole page is loaded, so images, javascript files etc.. I found really good example of what I wan't over here

http://tympanus.net/codrops/collective/collective-58/

You can see that grid / content is only displayed once everything is loaded up, before that users get a loading image as indication to wait, that's exactly what I try to achieve. I tried looking at a source, but it seems that a "preload" script is somewhere within other scripts, and has lots of unnecessary code (for me). so could you please suggest a lightweight jQuery solution for this issue?

Upvotes: 1

Views: 2719

Answers (2)

Adil Shaikh
Adil Shaikh

Reputation: 44740

use display:none for your div initially and display a loading gif.

$(window).load(function() { 
   $('#yourGifID').hide();
   $('#yourDivID').show(); // will be called when everything is loaded
});

The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images and sub-frames have finished loading.

Upvotes: 1

Shazboticus S Shazbot
Shazboticus S Shazbot

Reputation: 1289

For the div that is giving you trouble, why not set its visibility to "hidden" in the html and then in the javascript, after everything is ready, change it to "visible"

html:

<div class="text" style="visibility:hidden"></div>

js:

$(".text").css("visibility", "visible");

Upvotes: 1

Related Questions