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

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

此时，当您打开对话框时，加载会停止，所以如果您延迟打开对话框，则加载不会发生任何变化。所以，若你们想在打开对话框之前加载图像，那个么你们不应该在打开函数中加载div主体。

我还没有测试过，但也许这样的东西会起作用：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从屏幕上移动到绝对位置，并使其在加载鼠标时可见。类似于eld.css（{position:‘absolute’，top:‘-1000px’，left：‘-1000px‘}）；

检查Allso:

• http://www.sajithmr.me/javascript-check-an-image-is-loaded-or-not
• http://www.w3schools.com/js/js_timing.asp