[jQuery] Simple way to preload all images within a specific div?
Hi,
I'm trying to do the following using jQuery: When a user clicks on a
link in the menu of the page, a sippet of html code is loaded from an
external html file (thus removing the navigation between several
pages). This sippet contains a number of images (which will later
become individual galleries using the SlideViewer plug-in, but that's
not the problem). I've managed to make a function to load a specific
div in this external html file, but I can't manage to preload the
images they contain. See code below:
$(document).ready(function() {
// Function to preload images
jQuery.preloadImages = function()
{
var a = (typeof arguments[0] == 'object')? arguments[0] : arguments;
for(var i = a.length -1; i > 0; i--)
{
jQuery("<img>").attr("src", a[i]);
}
}
// Default content
var currentSection = 'content.html #about';
var currentSlide = '#aboutSlide';
// Load selected content
function loadContent()
{
$('#preloader').fadeIn(500, function()
{
$('#section').load(currentSection,'', function()
{
$.preloadImages(currentSlide, hidePreloader()); // Not working, just
to show my intentions
});
});
}
// Hide preloader when content is ready and activate Slideviewer
function hidePreloader()
{
$('#preloader').fadeOut(500, function()
{
showContent();
$(currentSlide).slideView();
});
}
// Show content upon completion
function showContent()
{
$('#section').fadeIn(500);
}
});
I've searched for jQuery preload scripts but nearly all of them handle
single images with specific urls. I need a function that can handle
all the images contained in a div (by refering to it's id, or
similar).
Thanks,
-Staffan