Question

我有一个jQueryUI对话框，用于加载带有Ajax请求的幻灯片。

在加载所有图像之前，如何延迟.dialog('open')？（某些移动连接需要一些时间来加载所有图像）

编辑（2013-07-04）更好地澄清问题：此对话框在下载所有图像之前加载并准备就绪。这使得一些幻灯片随着黑色或半载图像而变化。我想要的是只有当.jpg文件在浏览器缓存中时才开始播放幻灯片。

var eld = $('<div style="display:none" class="loading"></div>').appendTo('body');
eld.dialog({
    autoOpen: false,
    open: function() {
        $(this).html('').load ("img_swiper.php?img_url="+url, function() {
        $('.ui-widget-overlay').bind('click', function() {
            eld.dialog('close');
        })
        });
    },        
    close: function(event, ui) {
        eld.remove();
    },
    modal: true,
    height: 385,
    width: 750
});
eld.dialog('open');

Answer 1

当你打开对话框时加载satrts，所以如果延迟打开，加载时没有任何反应。因此，如果要在打开对话框之前加载图像，则不应在开放函数内加载div主体。

我还没有测试过，但是像这样的mabye会起作用： 1.将主体加载到隐藏的div中 2.启动检查功能的间隔以查看何时加载所有图像。 3.打开对话框

var eld = $('<div style="display:none" class="loading"></div>').appendTo('body');
eld.dialog({
    autoOpen: false,
    open: function() {

    },        
    close: function(event, ui) {
        eld.remove();
    },
    modal: true,
    height: 385,
    width: 750
});

function IsImageOk(img) {
    // During the onload event, IE correctly identifies any images that
    // weren’t downloaded as not complete. Others should too. Gecko-based
    // browsers act like NS4 in that they report this incorrectly.
    if (!img.complete) {
        return false;
    }

    // However, they do have two very useful properties: naturalWidth and
    // naturalHeight. These give the true size of the image. If it failed
    // to load, either of these should be zero.

    if (typeof img.naturalWidth != "undefined" && img.naturalWidth == 0) {
        return false;
    }

    // No other way of checking: assume it’s ok.
    return true;
}
//Function for checking all images
function chk_images(where)
{
    var img_count = $('img', where);
    var ok_count = 0;
    $('img', where).each(function(){
        if (IsImageOk($(this).get(0)) )
        {
           ok_count++;
        }
    });

    if (ok_count == img_count) return true;
    return false;
}

eld.html('').load ("img_swiper.php?img_url="+url, function() {
   //Set up checker function
   var interval = setInterval(function(){
         //Check images inside eld
         if (chk_images(eld))
         {
              //Stop futher checking
              clearInterval(interval);
              eld.dialog('open');
         }
   },1000);
   $('.ui-widget-overlay').bind('click', function() {
         eld.dialog('close');
    });
});

如果浏览器不想在隐藏的div中加载图像，那么你可以将这个div从绝对位置移出屏幕并使其可见以加载porpouse。像eld.css（{position：'absolute'，top：' - 1000px'，left：' - 1000px'}）;

检查所有：

JQueryUI对话框：延迟打开，直到成功加载幻灯片

1 个答案: