我有以下 jQuery 代码:
var id_atual
var temp_id
var tempo_flash = 50
var $slide_atual = $('#slider .atual')
var $slide_prox = $('#slider .ocultar')
setInterval(function(){
id_atual = $slide_atual.attr('alt')
$.post('get_banner.php', {atual: id_atual}, function(proximo){
temp_id = proximo.split(';;')
$slide_prox.attr('src', temp_id[0]).load(function(){
$slide_atual.hide('fade', tempo_flash, function(){
$slide_atual.attr('alt', temp_id[1]).attr('src', temp_id[0]).load(function(){
$slide_atual.show('fade', tempo_flash)
})
})
})
})
}, 4000)
以及以下 HTML 代码:
<div id="slider">
<img src="imagens/slider/imagen-slider.jpg" alt="1" class="atual"/>
<img src="" alt="" class="ocultar" />
</div>
类 .ocultar 有一个
display: none;
tempo_flash变量只是动画时间,get_banner.php文件只是为了从mysql数据库中获取下一个banner。它已经过测试并且工作正常。
我遇到的问题是,经过一点点(4 或 5 个横幅更改)后,浏览器停止响应(对于 Firefox Chrome 和 Opera),在 IE 上我收到警告 Stack overflow at line: 3
和 javascript整个页面的停止工作。
感谢任何帮助!
最佳答案
在 setInterval()ed 函数的每次迭代中,您将 .load()
事件分配给图像占位符。将事件分配给对象不会删除现有对象!
所以在第二次迭代中,图像占位符将有两个 .load()
事件处理程序,然后是三个,依此类推;每次加载图像时,它都会触发所有附加到 .load()
事件的事件处理程序。您可能需要重构您的代码,也许只需分配一次 .load()
事件处理程序(并使用分号)。
关于javascript - jQuery $.post 导致浏览器堆栈溢出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10090098/