0

我使用“HTML5Rocks!”中的幻灯片模板制作了幻灯片，并对其进行了修改以包含一些交互式谷歌图表。

不幸的是，最初 HTML5 幻灯片模板隐藏了除当前、两张后面的幻灯片和两张前面的幻灯片之外的所有幻灯片（这是幻灯片的 css 默认值：）.slides > article { display : none; }。我的交互式数字是幻灯片（即articles），其中包含iframes 和 google 图表。不幸的是，首次渲染display:none的幻灯片在 google 图表中存在某种边界框问题：当幻灯片最终取消隐藏时，图表被压缩并且没有交互效果。

我可以通过使用display:block. 然后，当您更改幻灯片时，我会主动隐藏非当前和非相邻的幻灯片。现在所有图表都正确渲染了，但是在演示开始时，它显示了最后一张幻灯片（因为所有图表都已绘制并且最后绘制！）。

我想通过添加一个事件来完善这一点，在所有内容加载后（即，在一个中的 CPU 密集型 AJAX 调用iframe完成运行），非当前和非相邻幻灯片被隐藏。

为此，我需要在所有内容加载完毕且浏览器准备就绪后触发回调事件（包括iframes 内的 AJAX 调用）：

我尝试了以下方法，但在我的 s 中的 AJAX 回调完成之前触发得太早iframe了：

jQuery(window).load( function() { /* some code to hide the non-current and non-neighboring slides */ } );

因此，非当前和非相邻的幻灯片在绘制图表之前被隐藏，当这些图表幻灯片不隐藏时，它们会被扭曲和破坏。我不相信我可以通过 AJAX 调用触发我的事件，因为我想要完成多个（来自多个幻灯片）。

这就是框架故事。这就是我想知道的：在加载所有内容并且浏览器完全准备好后是否有事件触发？

非常感谢你的帮助。

4

1 回答 1

2

在页面上的 iframe 中的所有 AJAX 调用完成后，没有内置的 JavaScript 事件触发。

这里有几个处理 iframe 事件的例子：

除此之外，您还需要跟踪每个 AJAX 调用，并在每次单独完成后检查它们是否都已成功完成。设置超时也可能是一个好主意，以防其中一个失败或不返回错误。

这是一个粗略的例子。

// Keep track of your ajax content.
var ajaxComplete1 = false;
var ajaxComplete2 = false;

var timeoutInterval; // For timeouts.

// Check if everything is complete.
function checkPageComplete() {
    if (ajaxComplete1 && ajaxComplete2) {
        clearInterval(timeoutInterval); // Clear timeout.
        // Everything has loaded, do your initialization.
    }
}

// Wait for the main page to load.
$(window).load(function() {

    // Wait 30 seconds for dynamic content to load.
    timeoutInterval = setInterval(function() {
        clearInterval(timeoutInterval);
        // Handle timeout.
    }, 30000);

    // Load the first content.
    $.ajax({
        url: 'someurl',
        success: function(data, textStatus, jqXHR) {
            ajaxComplete1 = true;
            checkPageComplete();
        },
        error: function(jqXHR, textStatus, errorThrown) {
            // Handle error.
        }
    });

    // Load the second content.
    $.ajax({
        url: 'anotherurl',
        success: function(data, textStatus, jqXHR) {
            ajaxComplete2 = true;
            checkPageComplete();
        },
        error: function(jqXHR, textStatus, errorThrown) {
            // Handle error.
        }
    });


});
于 2013-06-10T19:11:21.130 回答