Question

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

问题是，我所拉的内容包含图片。加载回调在图像完全加载之前触发，div过早解除阻塞。

在BlockUI解锁div之前，有没有办法可以等待加载所有图像？

或者，如果我可以覆盖解锁，我可以使用waitForImages plugin

执行以下操作

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

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

Answer 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。

Jquery BlockUI - 在解除对ajax加载的阻塞之前等待图像

1 个答案: