jQuery ajax 不预加载图像
我有一个画廊列表，当您单击画廊的标题时，它会拉入内容（带有图像的 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 中查看演示
提前致谢！
I have a list of galleries, when you click on the title of a gallery it pulls in the contents (HTML with images).
When the content is pulled in it preloads the html but not the images, any ideas?
This is the JavaScript i'm 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 demonstrated at http://www.georgewiscombe.com
Thanks in advance!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
$.ajax不会为您执行任何图像预加载。它只是从指定的 url 检索数据。在您的情况下，您将数据附加为 html ($details.html(data))。然后浏览器会看到该 html 中有图像并加载它们。作为一种解决方法，我可以建议采用以下方法之一：
$.ajaxdoes not do any image preloading for you. It just retrieves data from the specified url. In your case you append the data as html ($details.html(data)). The browser then sees that there are images in that html and loads them.As a workaround I can suggest one of the following: