preloading images through loading from ajax
Ok any brain boxes out there?
I am trying to preload images. That isnt all that big a task but when loading them randomly and from a php file using ajax get totally confused....
any ideas? Here is my code:
//Get the height and the width of the viewport into var for calc
var wWidth = $(window).width();
var wHeight = $(window).height();
//Calculate the amount of rows and columns that are needed
var noColumns = 1+(wWidth/160);
var noRows = 1+(wHeight/95);
var totalBoxes = Math.ceil(noColumns*noRows);
//Finally calculate how many boxes need to be added and add them
$("#status").append(totalBoxes);
//Get the current number of pf-box within #bg
var pfBoxCount = $('#bg').children().size();
$("#totalonpage").append(pfBoxCount);
//Loop through the images and print them to the page
for (var i=0; i < totalBoxes; i++){
//$("p").add(arr).appendTo('#bg');
$.ajax({
url: "random.php?no=",
cache: false,
success: function(html){
$(html).fadeIn(html).appendTo('#bg');
}
});
}