Question

我有这个javascript

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

从外部源加载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();"/>');
    });
});

通过jQuery加载图像时显示加载图像

1 个答案: