我使用 jcarousel 的基本示例(通过 Ajax 从 PHP 脚本加载动态内容的轮播)作为基础:
function mycarousel_itemLoadCallback(carousel, state)
{
// Check if the requested items already exist
if (carousel.has(carousel.first, carousel.last)) {
return;
}
jQuery.get(
'dynamic_ajax_php.php',
{
first: carousel.first,
last: carousel.last
},
function(xml) {
mycarousel_itemAddCallback(carousel, carousel.first, carousel.last, xml);
},
'xml'
);
};
function mycarousel_itemAddCallback(carousel, first, last, xml)
{
// Set the size of the carousel
carousel.size(parseInt(jQuery('total', xml).text()));
jQuery('image', xml).each(function(i) {
carousel.add(first + i, mycarousel_getItemHTML(jQuery(this).text()));
});
};
/**
* Item html creation helper.
*/
function mycarousel_getItemHTML(url)
{
return '<img src="' + url + '" width="75" height="75" alt="" />';
};
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
// Uncomment the following option if you want items
// which are outside the visible range to be removed
// from the DOM.
// Useful for carousels with MANY items.
// itemVisibleOutCallback: {onAfterAnimation: function(carousel, item, i, state, evt) { carousel.remove(i); }},
itemLoadCallback: mycarousel_itemLoadCallback
});
});
我想做的是在轮播完成初始化并且图像位于 dom 中并可访问后立即执行一个函数。然而,这应该只发生在页面加载时。并非每次按下上一个或下一个按钮时。
initCallback
。
$(function(){
$("#mycarousel").jcarousel({
initCallback: function(){
alert("jCarousel is initialized!");
}
});
});
既然您在评论中指出您正在使用 ajax 选项,以便稍后加载图像,我建议继续使用
itemLoadCallback
,只需添加一个标志变量即可。
var loadedfirstime = true;
$("#mycarousel").jcarousel({
itemLoadCallback: function(){
if (loadedfirsttime) {
myFunction();
loadedfirsttime = false;
}
}
});
通过设置该标志,所有未来的回调都不会引发相同的行为。
我采用了一种不太优雅的方式,并使用了一个设置为 1 秒延迟的计时器 - 我知道这不是最优雅的解决方案,也绝对不是 100% 可靠,但它目前有效。