1

我有一个 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');
4

1 回答 1

0

目前，当您打开对话框时，您的加载会停止，因此，如果您延迟打开对话框，加载将不会发生任何事情。因此，如果您想在打开对话框之前加载图像，那么您不应该在 open 函数中加载 div 主体。

我还没有测试过它，但类似的东西可能会起作用：1. 将 body 加载到隐藏的 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'});

检查 Allso：

于 2013-07-29T13:50:23.813 回答