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

【问题标题】：ExtJS 4: Show LoadMask when img component load the large imageExtJS 4：当img组件加载大图像时显示LoadMask
【发布时间】：2012-12-20 15:28:34
【问题描述】：

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

此代码不显示加载掩码：

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

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

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

我尝试将图像大小增加到 1-2 Mb，这使得加载它需要 3-4 秒，但加载掩码仍然没有显示... 我也试过把 certImg.setLoading(false) 放到 afterrender Img 事件中，结果是一样的。

当评论“certImg.setLoading(false);”时- img 已更新，但加载掩码仍显示在 img 上...

【问题讨论】：

标签： extjs

【解决方案1】：

你能检查你的代码吗？它对我有用..参见示例here。

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());

【讨论】：

【解决方案2】：

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

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

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

我只是尝试以您的方式更改我的代码，但结果相同 - 如果删除警报而不是加载掩码不显示...

Sencha 没有针对这种情况提供任何示例，可能没有在这个框架中实现。

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

【讨论】：