ExtJS 4：img组件加载大图像时显示LoadMask

我需要通过单击按钮在更新Img组件的src属性期间显示“加载图像…”掩码

此代码不显示加载掩码：

certImg.setLoading('Loading image...');
certImg.setSrc('load_image.php?file_name=' + record.get('invoice_item_file'));
certImg.setLoading(false);

此代码显示但不隐藏加载掩码（它显示在更新的图像上）：

我尝试将图像大小增加到1-2MB，这使得加载时间为3-4秒，但加载掩码仍然没有显示。。。 我还尝试将certImg.setLoading（false）放到afterrender Img事件中，结果是一样的

---

当注释为“certImg.setLoading（false）；”时，-img已更新，但加载掩码仍显示在img上…

您能检查代码吗？它对我有用。。参见示例

​

有趣的案例。。。 我刚刚在代码中添加了警报，并看到了相同的结果

certImg.setLoading('Loading image...');
certImg.setSrc('load_image.php?file_name=' + record.get('invoice_item_file'));
alert('now it loading...');
certImg.setLoading(false);

但在您的代码中，如果您使用大图像（如3-4MB），则在加载图像时确实看不到加载掩码。看起来，正如加载后显示的加载掩码一样，加载完成很快，如果我们不使用警报暂停显示，我们就看不到它

我只是试着用你的方式修改我的代码，但是得到了同样的结果-如果删除警报比加载掩码dod不显示

Sencha没有提供这种情况的任何示例，可能它没有在此框架中实现

您必须尝试在不使用alert的情况下下载大型图像，才能看到这种现象

var isResized = false;
var changingImage = Ext.create('Ext.Img', {
    src: 'http://www.sencha.com/img/20110215-feat-html5.png',
    resizable:true,
    listeners: {
    render: function (me) {
        me.el.on({
            load: function (evt, ele, opts) {
                  me.setLoading('Loading Mask Tested');
            }
            });
        },
        resize:function(me) {
            alert("resized");
            if(isResized) {
                alert("second time");
             me.setSrc('http://www.sencha.com/img/20110215-feat-perf.png');   
            } else {
                isResized= true;         
            }

        },

      afterrender: function (me) {
        me.el.on({
            load: function (evt, ele, opts) {
                  alert("rendered");
                  me.setLoading(false);
            }
            });
        }
    }
    //height:200,
    //renderTo: Ext.getBody()
}).render(Ext.getBody());

certImg.setLoading('Loading image...');
certImg.setSrc('load_image.php?file_name=' + record.get('invoice_item_file'));
alert('now it loading...');
certImg.setLoading(false);