我有一个画廊列表,当你点击图库的标题时,它会拉入内容(带有图像的HTML)。
当内容被拉入时,它会预加载html而不是图像,任何想法?
这是我正在使用的JavaScript:
$('#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;
});
您可以在http://www.georgewiscombe.com
看到这一点提前致谢!
答案 0 :(得分:3)
$.ajax
不会为您执行任何图像预加载。它只是从指定的URL中检索数据。在您的情况下,您将数据附加为html($details.html(data)
)。浏览器然后看到该html中有图像并加载它们。
作为一种解决方法,我可以建议以下之一: