1

AjaxリクエストでスライドショーをロードするjQueryUIダイアログがあります。

.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 本体をロードしないでください。

私はそれをテストしていませんが、そのような何かがうまくいくかもしれません. 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'}); のようなもの

すべて確認:

于 2013-07-29T13:50:23.813 に答える