CODEWITHSUNDEEP
jqueryimagepreloader
user1761494
user1761494

Reputation: 125

website preloading

This is my website: http://justxp.plutohost.net/jonydesigns/index.php

As you see the menu images jumping when you hover on them because the hover images hasn't changed or loader yet.

and the images in overall.

I want to make a preloader that shows a loading.gif icon while loading the page, once loaded, just show the page or fade out to the page.

Are there any preloaders tutorials for that? I have googled website preloaders, all i found was some custom css preloading bars, and preloaders for specify images.

I need a preloader for the whole website.

Does any one know where I can find one? Thanks!

Upvotes: 1

Views: 878

Answers (2)

Raheel Hasan
Raheel Hasan

Reputation: 6031

For the Top banners, you need to preload the images: http://rah1x.tumblr.com/post/32390880686/pre-load-images

For the rest of the site, where you want loading image while the image loads, here is something that will get you started.This works for individual image, however, you can simple make it as an event for image load using jquery: http://rah1x.tumblr.com/post/32450670309/show-loading-while-image-src-changes

Upvotes: 0

Royi Namir
Royi Namir

Reputation: 148744

To preload the images, just put this in your initialization (you don't have to wait for document.ready to run this):

var img1 = new Image();
img1.src = "http://www.colorcombos.com/images/colors/hex-codes/003366.png";
var img2 = new Image();
img2.src = "http://www.colorcombos.com/images/colors/hex-codes/FF9900.png"

or ( jQuery : )

$.preloadImages = function()
{
  for(var i = 0; i<arguments.length; i++)
  {
    jQuery("<img />", {style:'display:none'}).attr("src", arguments[i]);
  }
}

Usage :

$.preloadImages("img2_thumb.jpg", "img1_thumb.jpg",    "img3_thumb.jpg");

ofcourse- the images should be the hover images.

Upvotes: 1

Related Questions