jquery - 在通过 jQuery 加载图像时显示加载图像

Question

我有这个 javascript

$(function() {
    $('button').click(function() {         
        $('#imgText').html('<img src="imagecreator.php?param=' + $('input[name=username1]').val() + '"&param="'+ $('input[name=username2]').val() + '" />');
    });
});​

它从外部源加载 GD 图像，并返回它。它可能很慢，我不知道如何在加载外部图像时显示加载 gif。

有输入吗？

Answer 1

尝试使用一些第三方的东西，比如我经常使用的那个：BlockUI ( http://www.malsup.com/jquery/block/ )，你只需要阻止作为你图像容器的元素，显示自定义加载 gif，并在该图像的加载事件中取消阻止它。

编辑：

可以在这里找到一个非常粗略的代码：http: //jsfiddle.net/EfGTS/，你需要花更多的时间来玩它来满足你的需要。

代码：

$(function() {
    $('input').click(function() {
        $('#theContainor').block({ 
            message: '<h1><img src="http://jimpunk.net/Loading/wp-content/uploads/loading45.gif" width="300px" height="300px"/>Just a moment...</h1>', 
            css: { height: '0px'} 
            }); 
        $('#theContainor').append('<img src="http://www.ptb.de/de/aktuelles/archiv/presseinfos/pi2011/bilder/20110228_thoron_big.jpg?seed=' + Math.random() +'" width="300px" onload="$(\'#theContainor\').unblock();"/>');
    });
});​