現時点では、ダイアログを開くと読み込みが開始されるため、開くのを遅らせると、読み込みに何も起こりません。したがって、ダイアログ ボックスを開く前に画像をロードする場合は、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'}); のようなもの
すべて確認: