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

Posted 2023-02-25

【中文标题】通过 jQuery 加载图像时显示加载图像

【英文标题】：Show loading image while image loads via jQuery

【发布时间】：2012-12-23 04:40:02

【问题描述】：

我有这个 javascript

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

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

有什么意见吗？

【参考方案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"  />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() +'"  onload="$(\'#theContainor\').unblock();"/>');
    );
);​