jquery hidden preload [closed]

Answer 1

I would use a DOM ready to set it's display to none, then show it on $(window).load

Otherwise, if they don't have JS enabled, they'll never see a thing!

I've noticed your site is still viewable too without JS, good job!

Answer 2

This type of question has been asked before. What you're talking about really isn't "preloading"--it's just obstructing the user's view of the page until the page is fully loaded. It doesn't make the page load any faster.

Just put the entire page inside of a container, and use CSS to set that container's display mode to none. Then simply change the container's display mode to anything other than none once the document is ready or the last image has been loaded:

var imgTotal = 10; // total number of images on your page
var imgCount = 0;

$("img").load(function(){
  imgCount++;
  if (imgCount == imgTotal)
    $("#container").show();
}

However, considering that your page loads in less than a second on my browser, I don't really see any point in this.

Answer 3

To supplement Calvin's answer, images can be preloaded by adding in this function:

$.preloadImages = function()
{
  for(var i = 0; i<arguments.length; i++)
  {
    $("<img>").attr("src", arguments[i]);
  }
}

Then just telling it which images you want to be loaded:

$.preloadImages("image1.gif", "/path/to/blah.png", "some/other.jpg");

Put that code before the stuff you are loading in, as a courtesy.

Answer 4

Why not just set the css display property to none, and change it with JS when the document has loaded? If you're using jQuery on your page, it could look like this:

CSS:

#mydiv { display: none; }

JavaScript:

$(document).ready(function() {
    $('#mydiv').show();
});

Answer 5

it not exactly images, but page element that shift the problem...

i have css the body to hidden and the last argument of my jquery is css:visible

work great.. 2 second loading, and everybody show up !

thanks