JQuery ajax does not preload images
I have a list of galleries, when you click on a gallery name, it pulls in content (HTML with images).
When content is pulled into it, it preloads html and not images, any ideas?
This is the JavaScript I am using:
$('#ajax-load').ajaxStart(function() {
$(this).show();
}).ajaxStop(function() { $(this).hide();});
// PORTFOLIO SECTION
// Hide project details on load
$('.project > .details').hide();
// Slide details up / down on click
$('.ajax > .header').click(function () {
if ($(this).siblings(".details").is(":hidden")) {
var detailUrl = $(this).find("a").attr("href");
var $details = $(this).siblings(".details");
$.ajax({
url: detailUrl,
data: "",
type: "GET",
success: function(data) {
$details.empty();
$details.html(data);
$details.find("ul.project-nav").tabs($details.find(".pane"), {effect: 'fade'});
$details.slideDown("slow");
}});
}
else {$(this).siblings(".details").slideUp();}
return false;
});
You can see this at http://www.georgewiscombe.com
Thanks in advance!
+2
a source to share
1 answer
$.ajax
does not preload images for you. It just fetches data from the specified url. In your case, you add data as html ( $details.html(data)
). Then the browser sees that there are images in this html and loads them.
As a workaround, I can suggest one of the following:
- Use CSS backgrounds instead (preferably with a CSS sprite)
- Preload all images ( here is a working solution)
+3
a source to share