使用特定 div 时，.load jquery 函数不起作用
此行不起作用
$('#bookcontainer').load( startSlide );
，而此行起作用
$(window).load( startSlide );
#bookcontainer 是一个包含四个图像的 div。
这是我的整个代码：
// JavaScript Document
$('#bookcontainer').load( startSlide );
var slide;
$('#slider').hover(
function() {
$('.arrow').show();
},
function() {
$('.arrow').hide();
});
function startSlide() {
$('.book').show();
slide = setInterval(slideR, 5000);
}
function slideR() {
$('.book').first().css('left', '960px').appendTo('#bookcontainer').animate(
{
"left": "-=960px"
}, {
duration: 1000,
easing: 'easeOutCubic'
});
}
function slideL() {
$('.book').last().animate(
{ "left":"+=960px" }, {
duration: 1000,
easing: 'easeOutCubic',
complete: function() {
$(this).prependTo('#bookcontainer').css('left', '0px');
}
});
}
function right() {
clearInterval(slide);
slideR();
startSlide();
};
function left() {
clearInterval(slide);
slideL();
startSlide();
};
This line does not work
$('#bookcontainer').load( startSlide );
while this line does
$(window).load( startSlide );
#bookcontainer is a div containing four images.
Here's my whole code:
// JavaScript Document
$('#bookcontainer').load( startSlide );
var slide;
$('#slider').hover(
function() {
$('.arrow').show();
},
function() {
$('.arrow').hide();
});
function startSlide() {
$('.book').show();
slide = setInterval(slideR, 5000);
}
function slideR() {
$('.book').first().css('left', '960px').appendTo('#bookcontainer').animate(
{
"left": "-=960px"
}, {
duration: 1000,
easing: 'easeOutCubic'
});
}
function slideL() {
$('.book').last().animate(
{ "left":"+=960px" }, {
duration: 1000,
easing: 'easeOutCubic',
complete: function() {
$(this).prependTo('#bookcontainer').css('left', '0px');
}
});
}
function right() {
clearInterval(slide);
slideR();
startSlide();
};
function left() {
clearInterval(slide);
slideL();
startSlide();
};
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
加载事件只能在与 URL 关联的元素上处理。来自 文档：
如果您正在等待所有图像加载，则可以将事件处理程序单独应用于这些图像。
另外：在页面上的所有元素（包括图形）完全加载之前，
$(window).load(...)不会被触发，因此无需将事件绑定到div确保子元素已加载。如果您发出 AJAX 请求并尝试检测内容何时加载到该
div中，则应将startSlide作为 AJAX 请求的成功回调。The load event can only be handled on elements that are associated with a url. From the documentation:
If you're waiting on all of your images to load, you could apply the event handler to those images individually.
Also:
$(window).load(...)will not be fired until all elements on the page are fully loaded (including graphics), so it's not necessary to bind the event to adivto make sure child elements have loaded.If you're making an AJAX request and attempting to detect when content has been loaded into that
div, you should makestartSlidethe success callback to your AJAX request.您应该使用
$('#bookcontainer').load('url', startSlide );看看 http://api.jquery.com/load/You should use
$('#bookcontainer').load('url', startSlide );have a look at http://api.jquery.com/load/div 元素不会触发
load事件。The div element does not trigger a
loadevent.