1

我正在使用 BlockUI jquery 插件在 div 中显示加载消息，直到使用 JQuery 的加载方法加载内容。

问题是，我提取的内容包含图像。加载回调在图像完全加载之前触发，并且 div 过早地解除阻塞。

有没有办法在 BlockUI 解除对 div 的阻止之前等待所有图像加载？

或者，如果我可以覆盖解除阻塞，我可以使用waitForImages 插件执行以下操作

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

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

1 回答 1

1

我认为您应该将 DIV 包装#mydiv在另一个 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 回答