Question

我面临的问题是加载动画旋转图像在内容完全加载到模态弹出窗口之前停止。我的意思是，由于从服务器（aspx页面）检索大量数据，页面需要几秒钟来加载模态中的内容，我在页面中看到的是一个空白空格而不是加载旋转。是否有任何方法可以使加载图像工作，直到内容完全加载。

我选择的路线是使用彩盒中的事件，我不确定我能否实现它。

  $('#cboxLoadingGraphic').show();

这个从彩盒中调用加载图像

onLoad: function() { $('#cboxLoadingGraphic').show();}, 
    onComplete: function() {  if($(this) != "undefinded"){ $('#cboxLoadingGraphic').show();} },

上面的代码不会工作，因为首先元素是空的并且它移动到.show（）方法。我想要实现的是onComplete或onload，我如何使用js / jquery检查内容或元素被完全加载，以便我可以show（）是否加载内容并在内容完全加载时隐藏（）。

感谢。

Answer 1

您使用的是iframe属性吗？如果是这样，在colorbox 1.3.16中，您可以将fastIframe属性设置为false，以延迟删除加载图形，直到iframe元素的onload事件触发为止。例如：

$('a.myIframe').colorbox({iframe:true, width:500, height:500, fastIframe:false});

Answer 2

我修改了colorbox源代码，只做了一些小改动。

@loadingOverlay

是加载加载gif图像的那个。对于iframe我隐藏它直到内容完全加载。

 $(iframe).load(function() { $loadingOverlay.hide(); });

其余的（如内联）我隐藏在这里。

complete = function () {
                     if(!settings.iframe) 
                      { $loadingOverlay.hide(); }
                    // $loadingOverlay.hide();
                        trigger(event_complete, settings.onComplete);
                    };

Answer 3

如果您使用的是IFRAME，请将colorbox的fastIframe属性设置为false;它将显示加载图像。

Answer 4

尝试尽可能将加载旋转放在页面上，然后在$('.loading-image').hide()处理程序中调用$(window).load(function() { })。

Answer 5

在颜色框初始化中，显示如下的加载程序图形：

$.colorbox({
    iframe:true, 
    width:300, 
    height:300, 
    href:'iframe_url_here',

    onComplete:function(){ 
        $('#cboxLoadingGraphic').show(); 
    }
});

在iframe源代码中，在文档就绪函数中添加以下内容，如下所示：

$(document).ready(function() {
    parent.$('#cboxLoadingGraphic').hide();
}

Answer 6

您可以使用$("#cboxLoadingOverlay")，因为在加载colorboxContent后它将被隐藏

 onOpen: function() {
                $("#cboxLoadingOverlay").html("<img width='128' src='/images/loaders/ajax-loader.gif' alt='Loading....'/>")
    }

加载gif图像在Iframe内容完全加载到colorbox之前停止

6 个答案: