1

JQuery の load メソッドを使用してコンテンツが読み込まれるまで、BlockUI jquery プラグインを使用して div に読み込みメッセージを表示しています。

問題は、取り込んでいるコンテンツに画像が含まれていることです。画像が完全に読み込まれる前に load コールバックが発生し、div のブロックが解除されるのが早すぎます。

BlockUI が div のブロックを解除する前に、すべての画像が読み込まれるのを待つ方法はありますか?

または、ブロック解除をオーバーライドできる場合は、waitForImages プラグインを使用して次のことができます

$('#mydiv').block({ message: 'Loading' }); 

$('#mydiv').load('ajax.php', function() {
   $('#mydiv').waitForImages(function() {
      $('#mydiv').unblock();
   });
});
4

1 に答える 1

1

#mydivDIVを別のDIVにラップする必要があると思います。

$.getJSON("http://api.flickr.com/services/feeds/photoset.gne?set=72157623591220769&nsid=21696934@N05&format=json&jsoncallback=?", function(data) {
    $.each(data.items, function(i, item) {
        $("<option>").attr("value", item.media.m).html('image ' + i).appendTo("#imagesLink");
    });

});

$("#imagesLink").on('change', function() {

    $('#mydivContainer').block({
        message: 'Loading'
    });

    setTimeout(LoadImage, 10, this.value);

});

function LoadImage(imagePath)
{
    $('#mydiv').html($('<img>').attr('src', imagePath));
    
    $('#mydiv img').waitForImages(function() {
        $('#mydivContainer').unblock();
        // alert("Finished!");
    });
    
}
#mydivContainer
{
    width: 400px;
    height: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://malsup.github.io/jquery.blockUI.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.waitforimages/2.4.0/jquery.waitforimages.js"></script>

choose an image <select id="imagesLink"></select>
<div id="mydivContainer">
    <div id="mydiv"></div>
</div>

または、それをテストできるフィドルjsFiddle 。

于 2012-09-26T14:42:16.573 に答える