页面刷新时 JQuery 循环失败答案

【问题标题】：JQuery Cycle fails on Page Refresh页面刷新时 JQuery 循环失败
【发布时间】：2012-01-18 21:59:54
【问题描述】：

在与此类似的问题中：

我已经设法使用上述链接中的 Jeffs 回答克服了最初的问题。

但是现在我注意到一个新错误，在页面刷新时它根本不起作用。我尝试过硬刷新（ctrl+F5），但这不起作用。

但是，当您访问页面时，它会正常加载。

这是我的修改版（取自 Jeff 的）：

<script type="text/javascript">
$(document).ready(function() 
{
var imagesRemaining = $('#slideshow img').length;
$('#slideshow img').bind('load', function(e) 
    {
        imagesRemaining = imagesRemaining - 1;
        if (imagesRemaining == 0) 
            {
                $('#slideshow').show();
                $('#slideshow').cycle({
                    fx: 'shuffle',
                    speed: 1200
                });
            }
    });
});
</script>

有什么想法吗？我也尝试过 JQuery Live，但无法正确实现。我还尝试过 Meta 标签来强制加载图像。但它只适用于第一次。

【问题讨论】：

感谢我编辑了我的条目 :O)
我已经删除了 ASP.NET 标签，因为它们与问题没有明显的联系。
只是一个想法 - 为什么您需要处理回发？使用 JavaScript 'queues' 和 'cycles' 的回发通常是一场噩梦。将脚本设置为在页面加载时工作（如您所见）比“考虑”回发要容易得多。如果您使用的是 jQuery，您可以不使用 AJAX 来处理对服务器/数据库的调用而不是回发吗？如果我在错误的树上吠叫，请原谅我 - 只是一个想法。
因为整个网站都是动态的，它几乎都是动态创建的，包括通过用户控件动态创建的图像。很多 xslt 等。

标签： jquery

【解决方案1】：

而不是这个：

$(document).ready(function() { });

使用这个：

$(window).load(function() { });

在这种情况下，您希望加载图像。从您的问题看来，它仅在图像准备好时才有效，例如立即从缓存中加载。这将等到图像加载完成后再执行。

【讨论】：

同意 - 但值得检查此链接，因为这仍然无法跨浏览器工作 - stackoverflow.com/questions/896083/…
@LiverpoolsNumber9 - 我不认为这是正确的，因为这是内联脚本，而不是包含的文件（也应该阻止），如果它没有完成加载，它怎么可能完成加载还没有运行这个内嵌脚本块吗？

【解决方案2】：

否则你可以使用：

$(window).load(function(){

//废话

});

这也有效。

【讨论】：

【解决方案3】：

终于解决了：

非常感谢大家的建议，

“LiverpoolsNUMber9”提供的链接被证明是富有成效的：

How to tell whether the $(window).load()/window.onload event has already fired?

我因此使用了 Stews Javascript：

<script type="text/javascript">
    $.windowLoaded(function() {
        DoCycle();
    });

function DoCycle() {
    $('#slideshow').show();
    $('#slideshow').cycle({
        fx: 'shuffle',
        speed: 1200
    });
}
</script>

问题似乎是图像（很大）加载需要时间，并且当 DOM 准备好时 JQuery 正在触发。但仅仅因为 DOM 已加载并不意味着图像已准备就绪！

以防其他人对大图像也有类似的问题。

【讨论】：

【解决方案4】：

$.windowLoaded() 似乎是一个 JQuery 插件，而不是库的直接部分，所以我建议使用 $(window).load();

【讨论】：